Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to PostCSS!
You have completed Introduction to PostCSS!
Preview
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up