Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Building RWD with Sass: The Tools You Need to Know About
35:57 with Tracy RottonIf you're building responsive websites, then you need to know how Sass can help. Learn about the features that will make your RWD life much easier.
-
0:00
[MUSIC]
-
0:04
I am Tracy Rotton.
-
0:06
I'm taupecat on Twitter GitHub, Instagram, Facebook except I'm never on Facebook.
-
0:12
But pretty much taupecat everywhere on the internet.
-
0:15
I am lead web developer for RP3 agency.
-
0:17
We are a full service advertising agency that's located in Bethesda, Maryland.
-
0:23
Personally, I have been building websites for 20 years now.
-
0:26
I built my first website in 1994 way back before it
-
0:29
was ever called a front-end developer or anything like that.
-
0:33
I'm a big fan of WordPress I contributed to
-
0:36
the last two WordPress default themes and hope to continue to do so in the future.
-
0:43
I've been building responsive websites since 2011.
-
0:46
After the Boston Globe site we launched, I read Ethan Marcutt's book on the subject.
-
0:52
And it completely changed my philosophy on what a website should be and
-
0:56
how a website should be built.
-
0:59
And, everything I do nowadays is responsive.
-
1:02
And I began using Sass about a year after that, when I realized that doing
-
1:06
things the vanilla CSS way was a bad best practice.
-
1:11
It was, it was a bad practice to do that.
-
1:14
There are so many tools that CSS preprocessors.
-
1:17
Can give you to leverage your skills as a developer, that,
-
1:21
I just couldn't ignore it any more.
-
1:22
Now, every project I do involves using Sass.
-
1:27
So, I'm gonna tell you a little story about my days before I got
-
1:31
into using Sass.
-
1:33
My first responsive design project was contracting at
-
1:37
a company that redesigned the Robert Wood Johnson Foundation website.
-
1:42
A team of two developers,
-
1:44
including myself, spent three months working on the site.
-
1:49
We used Vanilla CSS and we used a lot and lot of This guy to
-
1:53
calculate everything that we needed to calculate in terms of percentages.
-
1:58
And ems and all these other relatives units that you begin to
-
2:01
become accustomed to when you're building responsive sites.
-
2:06
What we ended up with was an 80K mega CSS file.
-
2:10
That was just completely unmanageable and horrible to kinda have to deal with.
-
2:14
When you have to back and change font sizes or change colors or font stacks or
-
2:18
anything like that.
-
2:20
It was a total nightmare.
-
2:22
I mean, take a look at things like this.
-
2:24
We had to keep calculating these values in the calculator, copying and pasting them.
-
2:28
Putting in the comments how we got to these numbers.
-
2:32
And I decided, never again.
-
2:33
[LAUGH].
-
2:35
There has definitely got to be a better way.
-
2:39
Fast forward two years.
-
2:41
RP3 agency redesigned the Norfolk Southern Corporate website last year and
-
2:46
we did things a little differently this time.
-
2:48
First of all we used Sass.
-
2:52
Together with that we used Compass which is kinda an ad on to Sass and
-
2:55
we had some very specific reasons why we were using it.
-
2:59
Over the course of time, I can see myself repeating some of
-
3:02
the processes that that we were using over and over again.
-
3:06
So I sorta build of home-grown re,
-
3:08
response to the Sass library, which you can still find on my GitHub account.
-
3:12
And we put the whole thing together using CodeKit.
-
3:15
Now, one of the reasons we use Compass.
-
3:18
If Sass does not have a configuration file of its own, but Compass does.
-
3:23
So when you have a team of developers and
-
3:25
there are three developers in the Norfolk Southern redesign.
-
3:29
You wanna have as many things that you can commit in supervision control and
-
3:33
share amongst your team as possible.
-
3:35
CodeKit has since allowed you to create configuration files in that way,
-
3:41
but at the time it didn't.
-
3:42
So, using Compass was one of the ways we achieved that objective.
-
3:46
But, it still fell apart in other ways when dealing with JavaScript and etc.
-
3:50
That, that we couldn't commit.
-
3:52
So we also figured there had to be a better way than CodeKit to do that.
-
3:58
So that's the prologue.
-
4:00
Now, it's worth at this point to kinda just
-
4:04
review what is involved in responsive design.
-
4:07
According to Ethan Marcotte's seminal work on the subject there's three basic rules.
-
4:13
Fluid layouts.
-
4:13
You don't wanna define anything in hard pixels, hard values,
-
4:18
things that are inflexible.
-
4:19
You wanna keep things relatively based and percentage based.
-
4:24
Flexible images and media.
-
4:26
Now there's actually two parts of this.
-
4:29
The first is keeping your images in their containers.
-
4:33
And letting them grow and expand or
-
4:36
contract as the needs of the viewport dictate.
-
4:40
And then there's also the retina or high DPI issues when you're dealing with
-
4:45
retina Macbook Pros, or iPhone 4s or high DPI Android devices, etc.
-
4:50
And then the third tenant of responsive design is using CSS3 media queries.
-
4:55
And what these give you is,
-
4:57
when a certain condition is met according to the viewport.
-
5:01
Than a certain set of CSS rules will kick into gear
-
5:07
at that point and not at other points.
-
5:11
So those are the basics of responsive designs.
-
5:14
Now, some of the basics of SASS can work very well with this.
-
5:17
CSS is not a programming language.
-
5:19
But SASS can give you some tools that can be
-
5:22
very much more like a programming languages like JAVA script of PHP.
-
5:26
Including things like variables.
-
5:29
Functions which ideally will do one thing and then return a result.
-
5:35
Mixins which are a lot like functions except
-
5:38
that it's gonna return CSS to you based on the information that you give it.
-
5:45
And media query bubbling.
-
5:46
And we're gonna get really in to showing you how media query bubbling is gonna make
-
5:51
your life much easier, as we go on.
-
5:54
You could say the response of web design and SASS are a perfect fit for each other.
-
6:01
So let's take a look and
-
6:03
see how SASS is actually going to help us with our responsive development.
-
6:07
When you start working with responsive design,
-
6:09
the first thing that you kind of get very familiar with is the responsive formula.
-
6:14
And this simply put is what do I
-
6:17
want this element to be in terms of the context that it is.
-
6:22
And the result that you're gonna get is usually gonna be a percentage,
-
6:27
although it can also be some other relative unit like em.
-
6:31
And for that SASS has a perfect tool built right in called the percentage function.
-
6:37
And all you have to do is write out this percentage.
-
6:40
You give it that target that you want, you tell it that context, you divide it,
-
6:44
that's what the slash is for.
-
6:46
And it's going to give you a unit list number, and return it as a percentage.
-
6:51
So, in this example, I have a standard two column layout.
-
6:55
Where I've got 585 pixel is my target.
-
7:00
Inside a 960 pixel canvas, that's my context.
-
7:04
Same thing with the side bar, where my con, where my target is 350 pixels and
-
7:08
my context is still 960 still.
-
7:11
So, if I run that Sass through the pre-processor,
-
7:15
the resulting CSS I get is is 60.9375 for our main content.
-
7:20
And 36.45833 and you can imagine that those threes go on forever and
-
7:26
I didn't have to use That guy to get it.
-
7:29
Better yet, my code is now self-documenting.
-
7:32
I don't have to go back and on every line and say what I did.
-
7:35
Because it's right there in the S, in the Sass for
-
7:38
every other developer on my team to see.
-
7:40
[BLANK_AUDIO]
-
7:43
The next step of responsive design is flexible images and media.
-
7:46
But you know what we're gonna come back to that, save that one for later.
-
7:52
Media query bubbling.
-
7:55
This is what makes Sass rock and
-
7:58
when I first started using CSS preprocessors I started with less.
-
8:02
And then when to a Drupal conference, or Drupal camp.
-
8:06
And was talked into using Sass by Mason Wendell.
-
8:08
Mostly because at the time Sass had media query bubbling, but Less did not.
-
8:14
Less there has it, but I stuck with SASS anyway.
-
8:17
So we're going to take a look at three different examples of how we
-
8:20
can use media query bubbling.
-
8:22
And the first is the very basic, bare bones.
-
8:25
This is straight out of the box.
-
8:27
So take a sidebar.
-
8:29
Normally in a, if we're working in a mobile-first kinda situation,
-
8:32
we're going to find that it's not gonna have any floats.
-
8:36
It's not gonna have a defined width.
-
8:37
The width will be 100% of the view port, etc, the container.
-
8:41
And for our sidebar, we're gonna have certain properties that are gonna be
-
8:44
global no matter what the viewport size.
-
8:46
In this case, the background color and the font size are never going to change.
-
8:50
So, but we could, we could put our media query
-
8:56
inside our sidebar declaration so then when it hits a certain breakpoint size.
-
9:00
Then we're gonna apply the flow,
-
9:02
then we're gonna apply the width in terms of a percentage.
-
9:05
And we're already using that percentage formula that's Sass comes with.
-
9:08
But we still had to go back into our calculator as
-
9:13
we can see from the comments to determine our em unit.
-
9:17
Because we want to express our break points in terms of ems.
-
9:21
So that was kind of a pain.
-
9:23
But, whatever?
-
9:24
We, we come up with valid CSS right here, where our sidebars declare.
-
9:29
Then we have our media query, which is bubbled up now,
-
9:32
and contains our sidebar at floating em width at 43.125.
-
9:38
So that's the very basic principles of using media query bubbling.
-
9:44
But we can do better than that.
-
9:46
So here's the next example.
-
9:47
If you want to level up your media query bubbling.
-
9:51
So every browser has a default context.
-
9:55
It assumes that fonts are going to be a certain size, and
-
9:58
usually that size is 16 pixels.
-
10:00
Unless the, the user of the, the browser has changed.
-
10:03
And so we're gonna define a variable that says, assume,
-
10:08
16 pixels is our default browser context unless we say otherwise.
-
10:13
Then next I'm gonna write a function.
-
10:15
And that function is going to do one thing.
-
10:16
It's going to take the target that I feed it and the context that I feed it.
-
10:21
And if I don't feed it a context,
-
10:23
it's going to assume that it's that default browser context.
-
10:27
And that's going to return that part of that value to me in em.
-
10:31
So target, divided by context, times 1 em to get that em unit.
-
10:38
And then whenever I run that function, I am going to get that answer.
-
10:41
So I am going to run that function on the very next line.
-
10:44
And beyond that, I'm gonna define this break point into a variable so
-
10:50
that I can reuse it.
-
10:52
Now variables are great for
-
10:53
response in design because when you're dealing with media queries.
-
10:57
That you're gonna be repeating throughout your code, it's very easy for
-
11:01
one developer on your team to maybe misjudge the break point.
-
11:04
It said it's 680 instead of 690.
-
11:06
Or, maybe somebody just transposed a digit.
-
11:09
When you're using a variable, everybody's gonna use the same value, and
-
11:12
you don't have to worry.
-
11:13
That's one less error that is gonna crop up in your CSS, as you go on.
-
11:19
Aside from that, maybe the break points are gonna change.
-
11:22
Maybe 690 is not gonna cut it for the design after it's gone through
-
11:26
a couple revisions and you need to change it.
-
11:28
Well if you do it here in the variable, you're changing it once and
-
11:31
it's applying through the entire CSS.
-
11:34
So the rest of this illustration here is fairly sim, similar.
-
11:41
So we still are setting are min width but we're using a variable now.
-
11:45
And the resulting CSS shows us our sidebar with our global properties.
-
11:51
And then the sidebar with the media query triggering it.
-
11:56
But you know what, we're in New Orleans, we're going to kick it up one more notch.
-
12:00
So this is kinda the Jedi master way of dealing with, media query bubbling.
-
12:07
And I see Chris Coyer sitting in the back.
-
12:09
And I'm gonna give all props to him because this is his mama bear,
-
12:12
papa bear, baby bear method, using media queries.
-
12:15
So I still have the default browser context.
-
12:19
Just like I did on the last slide.
-
12:20
I still have my function, just like I did on the last slide.
-
12:24
I still have my breakpoint at medium.
-
12:27
But now, I have a new thing.
-
12:27
I have a mix-in.
-
12:29
I'm calling this mix-in BP for breakpoint.
-
12:32
And I'm gonna seed a key word.
-
12:35
And then my mix in is gonna use a little bit of logic.
-
12:38
Remember, CSS doesn't have logic, which means it's not a programming language.
-
12:41
But SASS does.
-
12:43
So we can use that logic to test for our keyword.
-
12:47
And in this case, if our keyword is medium, then we're gonna
-
12:50
use that medium break point and return the content that's in there.
-
12:55
So, here we go again with our sidebar and it's global properties.
-
13:00
And then our mix in this time being called with the include directive and
-
13:05
the CSS that we want to, to pass to it.
-
13:08
Now you might be thinking this is a whole lot of typing than we
-
13:12
did the first time around but we realize this is all just setup.
-
13:16
Right here.
-
13:17
The real payoff is that this is a lot less typing, and a lot less error prone.
-
13:23
Because now you're using keywords again,
-
13:25
and keeping things more consistent throughout your entire code.
-
13:31
So, here again is your finished CSS.
-
13:33
We have our sidebar with it's global properties, and
-
13:35
we have our media query with the sidebar that's floating.
-
13:39
And if you haven't noticed by now,
-
13:41
all of these three examples led up to the exact same CSS.
-
13:47
So that is media query bubbling.
-
13:51
Now, media queries can be used to set resolutions for your images.
-
13:55
And remember I said we were gonna talk about that later.
-
13:58
A lot of times your images for responsiveness are gonna be
-
14:01
handled through things like the picture element, and stuff like that.
-
14:05
But when you're using background images, and you want to use them in CSS.
-
14:08
And you want to have versions for your re, re, normal resolution versus your s,
-
14:13
higher resolution, this is probably one of the best practice.
-
14:17
Media queries that do that, now I don;t know about you, but
-
14:19
I don't want to have to type that a 100 times in project.
-
14:22
I don't want to have to meet that media query in a dark alley late at night.
-
14:26
So, if I created a mix-in, that and I'm going to call this one [COUGH] High-DPI,
-
14:31
then it's gong to write all of that for me then if best practices change.
-
14:36
Then we only have one place to change it.
-
14:38
Because, I mean, who knows, we have iPhone 6 and
-
14:40
6 Plus, they're even higher than High-DPI.
-
14:43
It's just craziness inside.
-
14:48
Now, I can hear you guys thinking.
-
14:50
Isn't repeating all these media queries over and
-
14:53
over instead of having them in one shot going to blow up my CSS.
-
14:57
Well, maybe, but no, not really.
-
15:01
First of all, best practices again say that your browser, or
-
15:04
your web server, should be sending G-zipped CSS to your browser.
-
15:08
And your browser's going G, Z, un, un-G-zip it, excuse me.
-
15:13
And parse it out.
-
15:14
So when you G-zip something, it's gonna take repeated.
-
15:17
Strings and crunch them into teeny tiny little bytes.
-
15:21
So that's gonna do most of the negating of that problem for you.
-
15:26
Second of all, if you're using JavaScript task runners like Grunt or Gulp.
-
15:30
There are actually plugins that will rewrite your code,
-
15:34
a CSS post-processor, if you will.
-
15:38
And it's going to combine all of your media queries into one shot and
-
15:42
remove that limitation for you.
-
15:47
So moving on to the next thing about Sass.
-
15:50
Now extend directive is not particularly useful solely for
-
15:55
responsive design, but it's got a few caveats that you should be aware of.
-
16:00
Now I like to use placeholder-selectors.
-
16:02
If you use classes in CSS of course they start with a dot.
-
16:06
If you use IDs in CSS which you shouldn't but,
-
16:11
okay, some people do, they start with a hash.
-
16:15
Well, a selector that starts with a percentage sign is a placeholder-selector.
-
16:20
And basically, this is Sass's way of saying that this selector should not exist
-
16:24
on its own, but only be referred to in, but using the extend directive.
-
16:30
And it's a, really kind of an ingenious idea, the extend.
-
16:34
In that it aggregates code around common property.
-
16:39
So, take this example.
-
16:41
I love using placeholder selectors to get rid of non-semantic, but
-
16:46
necessary classes like clearfix.
-
16:48
I hate having clearfix, you know, written in my mark, it doesn't belong there.
-
16:53
So, instead, I created clearfix place-holder selector,.
-
16:56
And I give it, in this case, the Nicolas Gallagher Micro Clearfix.
-
17:00
And then I can call it in my site header and
-
17:03
my site footer that I want those elements to be clearfixed.
-
17:08
So here's the resulting CSS.
-
17:10
That percentage slide in Clearfix goes away, and
-
17:14
is instead replaced by the site header declarations, in valid CSS.
-
17:19
And then site header gets written again for the properties that are unique to it.
-
17:24
As does site footer.
-
17:27
But herein lies the rub.
-
17:28
Cuz what Sass is doing is r, kinda rearranging your code,
-
17:34
there's a problem using extend directive with media queries.
-
17:38
If you try to write a media query and
-
17:40
put your extend directive inside the media query, Sass is gonna yell at you.
-
17:47
It doesn't like that, it'll return an error.
-
17:49
You can't do that.
-
17:51
Now, for most things it's not that big a deal.
-
17:53
I mean, after all, you can clear fix an element that's not floating.
-
17:57
It's just not gonna do anything so you're not really losing anything.
-
18:01
But if there's something that you really, really need to use.
-
18:04
Extend for and you really, really needed to use it in a media query then why not
-
18:09
put the media query in side the place holder selector?
-
18:12
You want to do this?
-
18:13
You want to put media queries inside your place holder selector.
-
18:17
Sure, go for it, it's awesome.
-
18:23
So those are kinda what's native to Sass that you can use to
-
18:27
help you with your CSS and responsive design.
-
18:30
But there's some libraries out there that can really kinda take this to
-
18:35
the next level.
-
18:38
So we're gonna talk about two of them.
-
18:39
The first is a grid system called Susy.
-
18:43
And I say it's a grid system, but that's kinda misleading.
-
18:46
Because actually really what it is, is it's math, and it's doing the math for
-
18:51
you so that you don't have to.
-
18:54
So what do I mean by this, well let's go to the demo.
-
19:00
So here we have our demo,
-
19:01
we have our two elements here that are sitting on top of each other.
-
19:05
No matter what the configuration they're just going to be
-
19:10
sitting on top of each other.
-
19:12
And so, I want to use Susy to kinda create a grid system for me.
-
19:18
Now I'm using Susy as a Ruby gem and I'm using it with Compass.
-
19:22
You don't have to use it with Compass, I've just found this easier to do.
-
19:25
So I'm requiring Susy right here.
-
19:28
So here is my CSS.
-
19:29
I'm going to import Susy, not because Susy's a Ruby gem,
-
19:32
it's sitting outside my project.
-
19:34
I don't have to keep it in revision control.
-
19:36
I don't have to let it pollute my project code.
-
19:39
It's sitting off the to the side, minding it's own business.
-
19:42
Ready for me to have it to do what it needs to do whenever I need it.
-
19:47
So, I am going to define the setting that I want to Susy to work with.
-
19:51
In this case, I want 12 columns.
-
19:54
Let me bump this up a little bit.
-
19:56
I want my gutters to each be one quarter the width of a column.
-
20:00
So again, we are talking about relationships between items and
-
20:05
not anything that's hard pixels.
-
20:06
Although I actually can use hard pixels if you want.
-
20:10
We're gonna set our container size.
-
20:11
And again, I'm using that em function that I wrote a few slides back to
-
20:16
say that my container is gonna be 1280 pixels expressed in em's.
-
20:20
And I'm gonna want to output everything as a flow,
-
20:23
which is what you traditionally think of when using grid systems.
-
20:29
So, now I have some CSS here, if I just uncomment it.
-
20:36
I have a wrapper class.
-
20:37
Okay, not everything can be purely semantic,
-
20:38
so there are a few things we're gonna have to live with.
-
20:41
Not a perfect world.
-
20:43
I want my main column to be eight pi,
-
20:46
eight columns wide in that 12 column grid system.
-
20:50
And I want my sidebar to be four columns, and, and
-
20:53
it's going to be the last element on the page.
-
20:56
So make the adjustments there.
-
20:57
Get rid of any right margin, etc.
-
20:59
So when I save all that, and I reload.
-
21:04
Now I have a perfect two column grid.
-
21:07
If I want to change the values, maybe I want to make it six, and six.
-
21:13
I just need to do that.
-
21:17
Save. There we go.
-
21:20
Now what if I want to add a third column?
-
21:22
Well, Susy makes it very easy, there's a minimum amount of effort I have to do.
-
21:28
So, now we know that we have three columns, so
-
21:30
I'm gonna keep the main column at six, but I'm gonna cut this down to three.
-
21:35
Of course, not both sidebars can be the last element on the page.
-
21:38
So we're gonna get rid of that and just say the last child in this dom is last,
-
21:45
and we're gonna give it that last mix in.
-
21:48
Refresh, and now we have our three columns.
-
21:51
And it took all of what, ten seconds.
-
21:54
So that's that demo.
-
21:57
Now, Susy can get even more powerful than this.
-
22:00
So a lot of times when we're working with a CMS, for
-
22:03
example, I work a lot with WordPress.
-
22:05
You don't know exactly how much content is gonna give, be given back to you,
-
22:10
when you're using that.
-
22:11
It's up to many many factors.
-
22:13
So, here I have three elements, but maybe I'm gonna have many many more than that.
-
22:20
So here is a gallery, this is, of items, now you can also be using images,
-
22:25
etc, whatever.
-
22:29
But, you know,
-
22:31
if you notice, I only have the one wrapper class, I don't have row classes.
-
22:38
So how is this working exactly?
-
22:39
Well, here it is, the gallery mix in with Susy.
-
22:43
And basically it's gonna use a different method called isolate to
-
22:48
kinda do some special things.
-
22:50
It's not, it's gonna reduce the amount of margins that are defined.
-
22:55
To reduce the problems that you have with
-
22:58
browsers not rendering number of pixels correctly.
-
23:02
And its also going to,
-
23:03
the gallery mixins also going to kinda calculate where my floats need to clear.
-
23:09
So if I change the gallery and I'm going to have three columns for each element.
-
23:14
So now each column has, or each item has three columns.
-
23:21
Like that. And that's all I had to do.
-
23:22
And it's calculating where the breaks need to go.
-
23:26
And so I've reduced the amount of non-somatic markup.
-
23:29
And I'm reducing amount of effort that I need to get these threads, and
-
23:33
they're all aligned beautifully.
-
23:38
So I mentioned floats versus isolate.
-
23:41
Really it's kinda you know floats are what you're used to.
-
23:44
The isolate instead of defining it's
-
23:47
right margin it's defining it's right margin as negative 100%.
-
23:51
And again, this is because different browsers kinda treat like
-
23:55
what happens like midway through a pixel differently.
-
23:59
And so this kinda solves that problem in a couple ways, one of which is, like,
-
24:03
reducing the amount of times you've defined that.
-
24:08
again, all these slides are on GitHub.
-
24:10
And you can go and look at it and there's a link to the article that explains it.
-
24:14
And Susy uses this method to kinda, make things like gallery possible.
-
24:22
So that's so that's some of what Susy can do.
-
24:25
It, it can also do asymmetrical grids.
-
24:27
It can make sure that, if you instead of having evenly number of columns
-
24:32
that are evenly sized, perhaps you want 25%, 50% and 25%.
-
24:36
Well, Susy can do that too.
-
24:38
You just have to define that in the settings.
-
24:41
You can also define different grids for different pages.
-
24:44
So, one page has a three column grid and the other page has an eight column grid.
-
24:48
Well, you could do a 24 column grid.
-
24:50
Or you could just have two different grid systems for
-
24:52
two different pages in your project.
-
24:55
It's all just a few settings away.
-
24:59
So the other library I want to talk about is Breakpoint because grid systems,
-
25:03
as fluid as they are, will only get us so far.
-
25:07
Breakpoint gives us mix ins that are similar to the Jedi master method that I
-
25:12
showed you before.
-
25:13
It assumes that everything that you do is going to be based on
-
25:17
min-width that's a mobile first approach.
-
25:19
But if you have a desktop down approach then you can specify that as well.
-
25:23
You could even give it a range so if something kicks in as 400 pixels and
-
25:28
ends at 800 pixels just give it those two values.
-
25:31
And it's going to know that you mean that range.
-
25:34
And it, you can also tell it what screen resolution, for
-
25:36
those High-DPI images that you wanted.
-
25:39
And then you're gonna that breakpoint as well for your retina screens.
-
25:45
So let's take a look at some more demos.
-
25:51
So here is our responsive grid that we looked at before.
-
25:55
It's nice and fluid.
-
25:55
But when you get down to being 400 pixels wide it's kinda ridiculous and
-
26:01
we don't really want that.
-
26:03
So we want to build in a break point.
-
26:05
This will only kick in at a certain point.
-
26:08
So just as I did before, I import break point.
-
26:17
I'm using a Ruby gem again.
-
26:20
And I'm saying my first break point is gonna be 480 pixels and
-
26:24
maybe I'll have another break point at 760.
-
26:27
I'm gonna set this variable break point to ems to be true because I
-
26:32
want to express all my break points in terms of ems.
-
26:36
And so now I go down here.
-
26:37
Let me uncomment.
-
26:39
My medium break point.
-
26:41
[BLANK_AUDIO]
-
26:52
And so now when we start out at our lowest break point there's no floating going on.
-
26:58
And as I drag the browser out.
-
27:00
We have floating going on.
-
27:02
So maybe I want to invoke that larger break point.
-
27:06
[BLANK_AUDIO]
-
27:17
And I think I am just not reaching it with the, there we go.
-
27:22
But we have a slight problem here.
-
27:25
[BLANK_AUDIO]
-
27:28
I see what I did wrong.
-
27:30
[BLANK_AUDIO]
-
27:36
Okay.
-
27:37
[BLANK_AUDIO]
-
27:41
Anyway.
-
27:43
So, you see how basically it works, right there.
-
27:50
Now you can do the same for the gallery approach as well.
-
27:54
So, here I have no floating going on.
-
27:57
But I go in to my break point.
-
27:59
Comment a few things out.
-
28:01
I have my gallery.
-
28:05
Let that run.
-
28:06
[SOUND] And now here I have a nice, neat gallery
-
28:11
that acts differently at different break points.
-
28:18
And if it's just a few little mix ins, and break point and
-
28:23
Susy did all the rest of the work.
-
28:26
And we never once had to go to That guy.
-
28:34
So yeah, break point and Susy together are very powerful tools.
-
28:38
As I said, you can do screen resolution media queries and it,
-
28:42
Susy actually integrates pretty well with break point.
-
28:46
Here you have a mix in for Susy that, where you give it the break point value
-
28:50
that you want, and then you give it the columns that you want.
-
28:54
And it will go ahead and do all the break point work for you.
-
28:57
So that's reducing the amount of code that you have to type even further.
-
29:03
So this is all good.
-
29:05
It's great for modern Evergreen browsers but
-
29:07
there are still those browsers out there, [COUGH] IE.
-
29:11
That haven't really caught up with the whole media query bandwagon.
-
29:15
So, sometimes we still have to deal with them.
-
29:17
Hopefully you don't but if you did.
-
29:21
We got you covered there.
-
29:24
So there are a few options that you have when you're dealing
-
29:27
with non-media query supporting browsers.
-
29:29
The first is you can give them the mobile view,
-
29:32
which essentially means you're ignoring the problem.
-
29:34
Now I actually think this is a perfectly valid approach but
-
29:38
your client might not agree.
-
29:40
So what else can you do?
-
29:42
Well, you can use something like respond.js.
-
29:44
Which will actually make your browser responsive by doing a whole lot of
-
29:48
JavaScript in the background.
-
29:50
But, as you might imagine, that's going to put a lot of load on your browser, and
-
29:54
be slow and affect performance.
-
29:56
So, maybe that's not the best option, either.
-
30:00
The third options, what we're gonna talk about, is using Modernizr.
-
30:04
Which will detect whether your browser supports media queries, and
-
30:08
pairing that with break point.
-
30:11
So, here I have the demo, from earlier.
-
30:16
And if I go and look at this on IE 8 right here.
-
30:20
Well of course, I'm not seeing any break points.
-
30:23
Of course, because IE 8 is old.
-
30:26
So what can we do about that?
-
30:29
Well, we can go back here and uncomment these two lines where I
-
30:33
set break point no-query fallbacks, I want that to be true.
-
30:37
And I want a browser that doesn't support media queries to look like my
-
30:42
media breakpoint.
-
30:44
So if I do that here, and
-
30:51
uncomment myself here.
-
30:57
Let Gulp run.
-
30:58
[BLANK_AUDIO]
-
31:01
And then reload.
-
31:04
Now, well, it kinda looks like my medium break point, but again, IE is old.
-
31:11
Doesn't understand last child selector.
-
31:14
So we do have to go back and deal with them.
-
31:15
Now there's selectivizer.
-
31:17
Or you can just give it that non-semantic last class that
-
31:22
we've basically been trying to avoid this whole talk.
-
31:27
And I changed this.
-
31:32
Presto-chango.
-
31:38
And it's just not going to work for me is it?
-
31:40
>> You commented out.
-
31:41
>> Their we go.
-
31:41
Now, it just took Gulp a few seconds to run.
-
31:45
So there we have our break point.
-
31:48
Now it doesn't look like this because this is our large break point and
-
31:52
we set it to decide at that it is going to use our medium break point.
-
31:56
But that's a value judgment that you can make in conjunction with your
-
31:59
designers and your clients.
-
32:00
As to what break point you want to serve to legacy browsers like that.
-
32:06
So, I also talked about briefly before about combining media queries, and
-
32:10
we can do that here.
-
32:12
I've been running this whole demo using Gulp.
-
32:16
So, taking a quick look at my main CSS that it's compiling,
-
32:20
if I go through and look for my media queries.
-
32:23
I'm going to see a lot of the same media queries repeated over and over and
-
32:27
over again.
-
32:27
And we already talked about how that might not be as big of a problem as you think,
-
32:32
but if you're really concerned about micro optimization,.
-
32:35
Then you can use that Gulp plugin called combined media queries.
-
32:39
Now I'm gonna run things again.
-
32:45
And it's gonna create a new CSS file for me called main.cmq.
-
32:50
And if I look for my media queries here, I'm gonna find exactly two.
-
32:56
It's rewritten my CSS so that they're all kinda congregated together.
-
33:03
I go back in here and
-
33:05
I'm now going to use that CMQ1 instead of the normal one I've been working with.
-
33:10
And there is no change.
-
33:12
It's the same thing.
-
33:13
So, it's kinda experimental.
-
33:15
There are bugs on, with it.
-
33:17
So use it as your own, at your own risk.
-
33:20
But, if you're really concerned about, kinda squeezing every
-
33:26
last k you can out of your CSS file, then that might be a big tool to use.
-
33:32
So, that's pretty much where we've gotten to.
-
33:36
now, we just redesigned our agency website.
-
33:40
It launched last week.
-
33:42
And the tools that we used to do that were of course Sass,
-
33:47
Compass, Susy, and Breakpoint, to kinda put it all together.
-
33:51
And credit to Sam Richard for teaching me the phrase,
-
33:55
presentation driven development, cuz that's entirely what this was.
-
34:00
And we used Gulp to put it all together.
-
34:03
Gulp again, same thing with Grunt,
-
34:05
other task runners gives you this configuration file.
-
34:09
That lets every developer on your team work on the same page and
-
34:12
keeps the guess work out of what the settings are.
-
34:18
So, I could throw a whole bunch of resources at you for
-
34:22
learning more about responsive web development.
-
34:24
Or I can just point you to Brad Fross, excellent, This Is Responsive library.
-
34:29
Pretty much if it's about responsive design, it's here, and
-
34:33
this is a great place to get started with that.
-
34:36
Now to learn more about SASS.
-
34:39
You can go to SASS's web site for all the documentation.
-
34:41
The Sass Way is a great web site with tutorials in both beginner, and
-
34:46
mid, intermediate, and advanced techniques.
-
34:50
Sache is another great resource.
-
34:51
And SassBites, if you see Micah around here go say hi.
-
34:56
He's, he runs a great podcast called SassBites.
-
34:59
With video tutorials, etc.
-
35:00
On how to use SASS.
-
35:02
And Breakpoint and Susy, also.
-
35:06
And a few articles that are very much on point.
-
35:10
Building web layouts easily with Susy was a guest post on CSS tricks last month.
-
35:15
Excellent article about getting started using Susy layouts.
-
35:19
And managing responsive break points with Sass on Sitepoint.
-
35:22
Sitepoint has a lot of great articles about Sass.
-
35:25
Mostly by Hugo Giraudel, and I'm sorry I'm massacring his name.
-
35:29
But he writes extensively on Sass, and it's a great resource to follow.
-
35:34
So, thank you so much for, for coming.
-
35:37
Again if you like this talk you can vote for it in Chris's text voting system.
-
35:44
And I want to give props to a few of the people in real life in
-
35:48
the community who have contributed to this presentation.
-
35:51
And CSS DefCon for having me.
-
35:54
That's it.
-
35:55
[APPLAUSE]
You need to sign up for Treehouse in order to download course files.
Sign up