Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to PostCSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Convert Pixels to Rems

5:02 with Guil Hernandez

In this video, you'll learn about a simple PostCSS plugin that converts pixel values to rem values.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this video, I'll teach you about a PostCSS plugin that helps keep your 0:00
    typography and layout flexible by converting pixel values to rem values. 0:04
    Rem, or root is a flexible CSS unit 0:10
    that's always relative to the font size of the root element of the page. 0:13
    Usually it's the HTML element. 0:18
    For many it's easier to think in pixels, so when designing and 0:20
    prototyping it can be faster to write your CSS using pixels. 0:23
    However, rem values make your layouts more flexible and 0:27
    they are a preferred approach for many developers. 0:31
    But using rems does require some math on your part, but PostCSS can do the math for 0:33
    you so you can design with pixels but use rems in production. 0:38
    Back in my terminal I'll install the pxtorem 0:42
    plugin as a dev dependency by typing npm install 0:48
    --save-dev followed by postcss-pxtorem. 0:54
    Once the plugin installs all required 1:03
    in my gulpfile by typing var pixtoram 1:09
    = require('postcss-pixtorem'). 1:14
    And I'll enable the plug in by adding the pxtorem variable to the processors array. 1:19
    I'll save my gulpfile then I'll type the gulp command 1:30
    in the terminal to run my latest changes. 1:35
    So now I'm able to define flexible font sizes, margins, 1:38
    and padding and rem units while thinking in terms of pixels. 1:41
    So first, I'll grab this h1 rule here from my CSS next example, 1:46
    I'll paste it below the pxtorem comment. 1:52
    So usually in a CSS preprocessor like SASS, you'll create a function with logic 1:56
    that converts pixels to rems, then you'll use that function in place of your values. 2:02
    Well the pxtorem post CSS plugin does all the pixel to rem calculations for you. 2:08
    You simply use pixel values. 2:14
    So, for instance, in the h1 rule, I'll add a font-size property 2:16
    of 60px and if I open up my output CSS and just like that, 2:22
    you'll see that the plug in converts the fixed pixel value to a flexible rem value. 2:27
    Now with the default plugin settings only font related properties 2:33
    like font and font size are converted to rems. 2:38
    So if I add a bottom margin of say 40px, once I hit save, 2:44
    you can see that the plugin does not convert the value here to rem. 2:51
    Now most PostCSS plugins offer configuration options that 2:58
    extend their functionality. 3:02
    So be sure to always read a plug as documentation when using it 3:05
    in your project. 3:09
    The pics to run docs show that you can use configuration options to set the root 3:10
    font size, define exactly which properties should change from pixels to ram, even add 3:16
    pixel fall backs for older browsers that don't support rams like IE eight and more. 3:22
    So back in my gulpfile in the processors array, 3:28
    I'll pass some of these config options to pxtorem. 3:32
    Now you pass options to a plugin via an object. 3:36
    With the propWhiteList option you control exactly which 3:43
    properties change from pixels to rem. 3:48
    To enable all properties, set its value to an empty array. 3:52
    I'll save my gulpfile and in my terminal, I'll press Ctrl+C to stop the watcher. 3:57
    Then type the gulp command to run my latest gulpfile changes. 4:04
    And now I can define pixel values for any properties. 4:10
    So for example, right below the margin bottom property, 4:13
    I'll say letter-spacing: 1px. 4:17
    And over in the output notice how they all get converted to rems. 4:21
    And you can even convert your media query breakpoints to rems 4:28
    by passing the mediaQuery option and setting it to true. 4:32
    So I'll save these changes. 4:36
    Bring up the terminal. 4:39
    Hit Ctrl+C. 4:40
    Then type gulp again to run my latest changes. 4:42
    Now if I go over to my source CSS and 4:47
    simply save it when I bring up the output CSS you can see that the media 4:49
    query breakpoint range is now defined in rem units instead of pixels. 4:54

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up