1 00:00:00,280 --> 00:00:04,570 In this video, I'll teach you about a PostCSS plugin that helps keep your 2 00:00:04,570 --> 00:00:10,260 typography and layout flexible by converting pixel values to rem values. 3 00:00:10,260 --> 00:00:13,920 Rem, or root is a flexible CSS unit 4 00:00:13,920 --> 00:00:18,170 that's always relative to the font size of the root element of the page. 5 00:00:18,170 --> 00:00:20,300 Usually it's the HTML element. 6 00:00:20,300 --> 00:00:23,730 For many it's easier to think in pixels, so when designing and 7 00:00:23,730 --> 00:00:27,850 prototyping it can be faster to write your CSS using pixels. 8 00:00:27,850 --> 00:00:31,410 However, rem values make your layouts more flexible and 9 00:00:31,410 --> 00:00:33,940 they are a preferred approach for many developers. 10 00:00:33,940 --> 00:00:38,906 But using rems does require some math on your part, but PostCSS can do the math for 11 00:00:38,906 --> 00:00:42,645 you so you can design with pixels but use rems in production. 12 00:00:42,645 --> 00:00:48,396 Back in my terminal I'll install the pxtorem 13 00:00:48,396 --> 00:00:54,449 plugin as a dev dependency by typing npm install 14 00:00:54,449 --> 00:01:00,673 --save-dev followed by postcss-pxtorem. 15 00:01:03,935 --> 00:01:09,111 Once the plugin installs all required 16 00:01:09,111 --> 00:01:14,124 in my gulpfile by typing var pixtoram 17 00:01:14,124 --> 00:01:19,957 = require('postcss-pixtorem'). 18 00:01:19,957 --> 00:01:27,830 And I'll enable the plug in by adding the pxtorem variable to the processors array. 19 00:01:30,850 --> 00:01:35,770 I'll save my gulpfile then I'll type the gulp command 20 00:01:35,770 --> 00:01:38,800 in the terminal to run my latest changes. 21 00:01:38,800 --> 00:01:41,930 So now I'm able to define flexible font sizes, margins, 22 00:01:41,930 --> 00:01:46,830 and padding and rem units while thinking in terms of pixels. 23 00:01:46,830 --> 00:01:52,760 So first, I'll grab this h1 rule here from my CSS next example, 24 00:01:52,760 --> 00:01:56,540 I'll paste it below the pxtorem comment. 25 00:01:56,540 --> 00:02:02,560 So usually in a CSS preprocessor like SASS, you'll create a function with logic 26 00:02:02,560 --> 00:02:08,148 that converts pixels to rems, then you'll use that function in place of your values. 27 00:02:08,148 --> 00:02:14,600 Well the pxtorem post CSS plugin does all the pixel to rem calculations for you. 28 00:02:14,600 --> 00:02:16,030 You simply use pixel values. 29 00:02:16,030 --> 00:02:22,233 So, for instance, in the h1 rule, I'll add a font-size property 30 00:02:22,233 --> 00:02:27,620 of 60px and if I open up my output CSS and just like that, 31 00:02:27,620 --> 00:02:33,940 you'll see that the plug in converts the fixed pixel value to a flexible rem value. 32 00:02:33,940 --> 00:02:38,790 Now with the default plugin settings only font related properties 33 00:02:38,790 --> 00:02:44,180 like font and font size are converted to rems. 34 00:02:44,180 --> 00:02:51,180 So if I add a bottom margin of say 40px, once I hit save, 35 00:02:51,180 --> 00:02:55,700 you can see that the plugin does not convert the value here to rem. 36 00:02:58,030 --> 00:03:02,531 Now most PostCSS plugins offer configuration options that 37 00:03:02,531 --> 00:03:05,220 extend their functionality. 38 00:03:05,220 --> 00:03:09,120 So be sure to always read a plug as documentation when using it 39 00:03:09,120 --> 00:03:09,850 in your project. 40 00:03:10,970 --> 00:03:16,266 The pics to run docs show that you can use configuration options to set the root 41 00:03:16,266 --> 00:03:22,298 font size, define exactly which properties should change from pixels to ram, even add 42 00:03:22,298 --> 00:03:28,112 pixel fall backs for older browsers that don't support rams like IE eight and more. 43 00:03:28,112 --> 00:03:32,281 So back in my gulpfile in the processors array, 44 00:03:32,281 --> 00:03:36,880 I'll pass some of these config options to pxtorem. 45 00:03:36,880 --> 00:03:41,110 Now you pass options to a plugin via an object. 46 00:03:43,510 --> 00:03:48,600 With the propWhiteList option you control exactly which 47 00:03:48,600 --> 00:03:52,064 properties change from pixels to rem. 48 00:03:52,064 --> 00:03:55,920 To enable all properties, set its value to an empty array. 49 00:03:57,300 --> 00:04:04,490 I'll save my gulpfile and in my terminal, I'll press Ctrl+C to stop the watcher. 50 00:04:04,490 --> 00:04:08,877 Then type the gulp command to run my latest gulpfile changes. 51 00:04:10,040 --> 00:04:13,280 And now I can define pixel values for any properties. 52 00:04:13,280 --> 00:04:17,722 So for example, right below the margin bottom property, 53 00:04:17,722 --> 00:04:21,350 I'll say letter-spacing: 1px. 54 00:04:21,350 --> 00:04:26,700 And over in the output notice how they all get converted to rems. 55 00:04:28,380 --> 00:04:32,260 And you can even convert your media query breakpoints to rems 56 00:04:32,260 --> 00:04:36,670 by passing the mediaQuery option and setting it to true. 57 00:04:36,670 --> 00:04:39,290 So I'll save these changes. 58 00:04:39,290 --> 00:04:40,790 Bring up the terminal. 59 00:04:40,790 --> 00:04:42,400 Hit Ctrl+C. 60 00:04:42,400 --> 00:04:45,540 Then type gulp again to run my latest changes. 61 00:04:47,070 --> 00:04:49,652 Now if I go over to my source CSS and 62 00:04:49,652 --> 00:04:54,913 simply save it when I bring up the output CSS you can see that the media 63 00:04:54,913 --> 00:05:00,389 query breakpoint range is now defined in rem units instead of pixels.