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
Getting Sassy With Foundation 4 - Caleb Winters
46:05 with Caleb WintersWe first went with Sass for Foundation 3, but the preprocessor became a crucial component of Foundation 4. We'll take you through how Sass allowed us to create an all semantic, mobile-first responsive framework. More than that, we'll show you how Sass lets you write exactly the markup you want.
-
0:00
[BLANK_AUDIO]
-
0:08
All right.
-
0:09
Well today we're gonna talk about Getting Sassy With Foundation 4.
-
0:13
Gonna talk about using Foundation and Sass together to make some
-
0:17
awesome layouts and wri, write exactly markup that you want to do.
-
0:24
So quick introduction my name is Caleb.
-
0:28
I am a designer at ZURB in Campbell we do some cool things.
-
0:33
I design various things and I work on a foundation
-
0:38
as well and use it in all of my projects.
-
0:40
>> [LAUGH]
-
0:41
>> So that's me.
-
0:42
But what we really care about is what is Foundation?
-
0:46
So, how many people here are familiar with Foundation, or use it, or.
-
0:49
Okay, so a fair, a fair number.
-
0:52
We're gonna run through like, just a
-
0:53
really quick overview of what Foundation is.
-
0:56
Foundation is a front-end web design framework.
-
1:00
It's a great foundation for building websites.
-
1:02
[LAUGH] So it's, it's designed to be a good starting point.
-
1:07
It has a lot of components built in, to allow you
-
1:10
to write your markup and get your site's content all built.
-
1:13
And then from there you can add in your own design.
-
1:16
It's, it's designed to be very flexible, very customizable.
-
1:21
At the core, Foundation is a mobile first responsive grid.
-
1:25
Mobile first meaning the grid and all components
-
1:28
are built with small screens in mind first.
-
1:31
And all the built in media queries adapt
-
1:34
to larger screens and not the other way around.
-
1:37
The philosophy behind that is small screens,
-
1:40
bubble screens are the most constrained experience.
-
1:43
So when you design for mobile, you're forced to think about
-
1:46
okay, what is the most, what is the core function of this page.
-
1:49
What is the, the key action that we need to get across.
-
1:52
What is the main purpose of this page.
-
1:54
So it helps you to design really simple elegant layouts.
-
1:58
That look great on any screen size.
-
2:05
After that we have loads of UI components.
-
2:06
So things like navigation, form elements, buttons, typography, everything that
-
2:12
you need to start building a basic front end and then adding your own style later.
-
2:19
And it's built with Sass.
-
2:21
So there is a, a vanilla CSS version of Foundation,
-
2:24
but it's all compiled from what we do in Sass.
-
2:28
We love Sass obviously because it's awesome and everything
-
2:31
that we build in Foundation is built with Sass.
-
2:34
Because it allows us to like create really
-
2:36
powerful layouts and customize things really, really easily.
-
2:39
>> [INAUDIBLE]
-
2:42
>> All right, let's get sassy.
-
2:44
So we have two options to work with
-
2:46
when we're using the Sass version of Foundation.
-
2:48
We have Sass stand alone which doesn't
-
2:50
rely on Compass or any other external library.
-
2:53
It's just the SCSS And then we have the compass extension.
-
2:59
At ZURB, we always used the Compass extension because Compass is amazing,
-
3:04
it gives you access to like all kinds of mixins and functions.
-
3:08
But some people don't
-
3:09
like Compass and some like Bourbon and some
-
3:10
people have their own library that they use.
-
3:12
And we want you to be able to use Foundation with your own library as well.
-
3:16
So we do offer this Sass Standalone.
-
3:19
Sass Standalone is, it's the lowest denominator.
-
3:22
There's not dependencies. So, you can use it right out of the box.
-
3:28
It gives you all of the core foundation files in your project directory.
-
3:33
So you can look at them and you
-
3:34
can edit them.
-
3:36
You shouldn't edit them it's not recommended
-
3:38
because if you wanna update Foundation later or
-
3:40
change something or if you mess something up it's gonna be a lot harder to fix.
-
3:45
But if it's so the best practice is to
-
3:48
overwrite these like, these settings rather than edit them directly.
-
3:53
And you can find this in the Foundation GitHub repo.
-
3:56
Just, change the branch to scss-standalone and you'll be able to download
-
4:00
the, just the Sass and JavaScript.
-
4:05
But with a Compass extension, we can create
-
4:09
a new project straight from the command prompt.
-
4:11
So just open up your favorite CLI and you
-
4:13
can create a, a new project straight from there.
-
4:17
And with good Compass extension, the files
-
4:19
are tucked away where you can't touch them.
-
4:21
Where it is depends on your development environment.
-
4:24
But the point is that it's tucked away separate from your
-
4:27
project directory, so yeah, you can't like, edit the Compass Sass
-
4:30
files directly.
-
4:32
So it makes it really really easy to update things
-
4:34
and there's not really any chance of you messing anything up.
-
4:40
All right, lets look at, how to create a foundation project, with Sass and Compass.
-
4:45
So, first thing we need to do is install a Foundation gem.
-
4:49
So just open up a terminal and type in gem install
-
4:53
zurb-foundation if your on Windows you will need to have, Ruby installed.
-
4:58
But but otherwise, it's pretty simple.
-
5:00
And then you'll get a message saying
-
5:03
that it's fetching everything and it's installing.
-
5:08
And then once you have foundation installed, you type
-
5:10
in gem install compass to, get Compass on your system.
-
5:15
And, again, you'll get a similar message.
-
5:19
And from then, we, we have Foundation and
-
5:22
Compass both installed, so we can create our project.
-
5:26
So we want to cd into wherever your projects folder is.
-
5:31
For me, it's always my sites folder but people keep
-
5:33
their sites in different places, so navigate to your project directory.
-
5:39
And then from your project directory, you type
-
5:42
in compass create, project-name, -r, zurb-foundation, -using foundation.
-
5:48
And from there,
-
5:51
that, that, that'll create your, your projects.
-
5:54
And then you can, you just navigate into a new project folder.
-
5:59
then, type compass watch, so that way you'll be watching your your projects and
-
6:05
Compass will convert all the Sass that you write, into CSS that the browser can read.
-
6:14
And then you'll get a message saying Compass is watching.
-
6:17
And you can learn more about Compass at compass-style.org.
-
6:20
[BLANK_AUDIO]
-
6:23
All right, so you, you can organize your project however you want.
-
6:28
There is a basic GitHub repo up on GitHub for the Foundation course.
-
6:33
And you can download the projects of this, at this url.
-
6:35
I'm gonna send out the slides later as well, so you can always check it out.
-
6:42
In the, in the Foundation course repo, you'll get the
-
6:45
index, JavaScript, SCSS, CSS directory and also an examples directory.
-
6:51
I'm gonna show several small examples of how
-
6:54
to like mock-up different components of foundation with SCSS.
-
6:56
And those are included in this directory, as well.
-
6:58
So you can kinda, poke at them and see how they work.
-
7:04
All right, the first Sass thing that we're going
-
7:06
to look at in Foundation is the settings files.
-
7:10
so, the settings files contain changeable variables
-
7:13
for almost every component every element in Foundation.
-
7:18
It saves a ton of time, cuz you can go to this file and change values, change
-
7:23
settings of predefined variables without writing any SCSS.
-
7:28
So, it's a great way to right away just kinda go in and change things.
-
7:32
And get a fairly customized look without hardly
-
7:36
writing any SCSS.
-
7:39
It also helps you override less, less SCSS.
-
7:41
Because rather than writing your SCSS
-
7:43
directly you're just overwriting existing variables.
-
7:49
So, here's an example of different variable settings.
-
7:54
And here if we change some so there's the body, the body font color,
-
8:00
font family, various colors in the site, header font colors, header styles.
-
8:06
So
-
8:08
here's a basic look
-
8:14
so here's a look at a basic Foundation page.
-
8:19
This is what Foundation looks like, out of the box.
-
8:21
It's pretty plain, pretty simple. Designed to be, pretty easy to customize
-
8:26
[BLANK_AUDIO]
-
8:32
With with the settings we can alter them
-
8:37
and create a pretty customized page pretty quickly.
-
8:41
So, you can see here we changed the background color, the headers, the panel
-
8:44
styles so it's a totally different looking page with just altering a few variables.
-
8:49
So that's the first way that we can really, lovers
-
8:53
of power of Sass, to create custom pages and foundation.
-
9:01
So we're going to go through, five
-
9:04
condition components and move kind of beyond variables.
-
9:07
And talk about how to use mixins to to
-
9:12
create foundation components writing whatever mark up you want.
-
9:17
The reason we're just gonna do five is obviously, I mean, time constraints.
-
9:19
And also, we wanna kinda dive in depth, a little bit, on each,
-
9:22
on each of these components, instead of just giving, like, a broad overview.
-
9:28
A quick note on ems we use ems quite a bit in foundations that calculate values.
-
9:34
They can be kind of a pain to work with.
-
9:35
Some people aren't comfortable working with, like, with ems,
-
9:37
like to use pixel values or some other unit values.
-
9:40
We have a function in Foundation to help you out with that called emcalc.
-
9:45
It takes your desired value so, if you want to pix, use pixel units or
-
9:48
anything, it divides that by the body font size and it spits out a em value.
-
9:53
So, you can do emcalc twelve pixels and it will, and it
-
9:56
will give you, give you the m val, the m value for that.
-
9:59
>> Can you tell us why a bunch of em's?
-
10:03
>> Because em's a em's a relative to
-
10:05
like, to different like whatever, whatever's around them.
-
10:08
So for things like buttons, for instance when we, when we
-
10:11
like change the padding or change the size of the button.
-
10:13
It is a lot easier to dynamically change the size
-
10:16
of the font as well to make it more, more relational.
-
10:19
[NOISE] I think em's, em's going to make it much easier, make, to
-
10:21
make, spatial relationships a lot easier so that is the main reason why.
-
10:26
>> So it's a little bit more flexible than pixels.
-
10:28
>> Yeah, it's a
-
10:28
little bit more flexible.
-
10:29
It's not, it's not, it's not, precise like, like a pixel.
-
10:33
But since we're, since Foundation is mobile first and
-
10:35
like more interested in being responsive and, and fluid.
-
10:38
We don't worry so much about like,
-
10:40
being pixel perfect or like precise pixel values.
-
10:43
we're, we're, we're worried more about like
-
10:45
spatial relationships and making things look proportional.
-
10:48
So, that's the idea behind em's.
-
10:52
All right.
-
10:53
So here's the basic markup syntax for the grid.
-
10:57
The grid is made up of rows and columns and
-
11:00
traditionally we've used presentational classes like these to create the grid.
-
11:04
So you'll define a row and then you'll define your columns.
-
11:09
And this looks great but let's look at how we can write our own
-
11:14
our own markup with our own class names and still get to the same result.
-
11:20
Especially here if, if we're like adding behaviors to rows or adding media
-
11:25
queries for like different columns on
-
11:26
different screen sizes and offsets of things.
-
11:29
It can get really bulky.
-
11:30
So the, the, the big advantage with SCSS is that we can keep our markup really,
-
11:34
really clean and really, really symantic without all
-
11:37
these presentational classes and still get a great result.
-
11:42
So the first thing we do have a handful of variables for the
-
11:46
grid we have the row width which is the maximum width of the row.
-
11:52
It's not, it's not the absolute width, it's the maximum width that it would be.
-
11:55
So when you expand your browser all the way
-
11:57
out the rows are going to stop at 62 rows.
-
11:59
But this can be 100% if you want your website
-
12:02
to be full screen, it can be whatever you want.
-
12:06
Gutter, pretty self explanatory.
-
12:08
And then columns, by default the total columns in the grid are 12.
-
12:13
because, 12 column grids are pretty common people are used to working with them.
-
12:18
But you can adjust this to be 16 or 20, or whatever you want.
-
12:21
[BLANK_AUDIO]
-
12:25
All right, so, lets look at container row markup.
-
12:28
So, if we're going to build a row with mix-ins this is all we need.
-
12:32
We need an element and we're going to give it a class of header
-
12:35
to be symantec, to describe what it is and not what it looks like.
-
12:41
And to make this behave like a row we need to include the row mixin.
-
12:47
So we'll select the header and we'll do, include grid-row.
-
12:52
And that will give us, a nice container row right here, ready to put columns into.
-
13:07
I'll put columns in here.
-
13:08
Inside of the header we might have a logo and a nav.
-
13:12
Super clean mark up.
-
13:14
Let's look at how to make these into columns.
-
13:19
So inside of the header we're selecting the logo in the
-
13:22
nav and we're passing the grid-column mixin to each of these elements.
-
13:26
And we need to define how many columns each element takes up.
-
13:31
So, we have an argument called columns and we pass a value to each of these.
-
13:35
Since since our amount of columns of 12, we need to make
-
13:39
sure that our columns add to 12 or at least don't exceed 12.
-
13:42
And
-
13:45
that will give us, give us, this right here.
-
13:51
So, you see I have four columns, eight
-
13:54
columns, we've got a nice gutter and it's fluid.
-
13:59
Since we didn't specify any media queries, it stays the same when its large or small.
-
14:02
>> 12 columns is the default?
-
14:06
>> Yeah, 12 columns is the default, but again, you can
-
14:10
change it to whatever you want.
-
14:12
>> In this grid makes it so you don't have to use the [UNKNOWN] class?
-
14:15
Yes.
-
14:15
>> [INAUDIBLE].
-
14:16
>> Yeah, you can name it whatever you want and you just target
-
14:18
it in your SCSS and you, and you just pass the grid-row mixin.
-
14:23
>> You don't have to use the dollar sign columns though, colon?
-
14:28
>> Columns is, is the argument and colon is the value.
-
14:31
>> But I don't, the current version I'm using
-
14:34
I haven't been doing that, we're just putting four.
-
14:37
>> Really?
-
14:38
>> Uh-huh. >> Interesting.
-
14:40
I've, I've always done it this way.
-
14:41
>> Yeah, that's actually the first time I've seen that.
-
14:43
It's cool.
-
14:43
>> Okay, I've learned something too. Cool.
-
14:49
>> All right, center columns.
-
14:51
You can also center columns inside of your rail or center a single column.
-
14:56
You can't center a column set, so if you have more than
-
14:59
one column inside of a row you can't center both of them.
-
15:02
But if you have one column inside of a row you can center that.
-
15:07
If you do wan't to center multiple columns you can maybe nest another
-
15:10
row inside of single column and then have multiple columns inside of there.
-
15:14
But we're gonna
-
15:14
look a just how to center a single column. So again, here's the markup, super clean
-
15:22
and then, we're gonna center logo so we're gonna pass a behavior argument to it.
-
15:26
So we'll say center:true.
-
15:29
And that will give us centered columns.
-
15:35
With this right here.
-
15:36
So here's three columns centered, there's larger, like six columns centered.
-
15:48
You can also offset columns in your markup.
-
15:51
So if you want maybe a larger gutter between your sidebar and your main
-
15:55
content if it's like, pushing too close and you want it to be further away.
-
15:59
You can offset your columns, so the way that we
-
16:02
do that is we have an aside and an article here.
-
16:06
The way we'll do that is on the article, we'll
-
16:09
pass the offset argument and give it a value of one.
-
16:12
So this
-
16:14
is, the, the offset value is also part of your I call column value.
-
16:19
Do you want you want your offset, and your columns to all still not exceed 12.
-
16:23
So, we had 81 is 9, and then 3 for these sides, that's still 12 columns.
-
16:29
But we'll get a, a little offsets.
-
16:31
There'll be a little more room to breath
-
16:32
between the, the main content and the sidebar.
-
16:35
So, some examples of offsets are in here as well.
-
16:38
So right
-
16:40
here like this is offset by one column, this is offset by three, this is offset by
-
16:44
six. Oop, sorry,
-
16:51
media queries.
-
16:58
We can use media queries to change how the grid behaves between screen sizes.
-
17:06
So we'll be using the same mixins within any media context.
-
17:10
It doesn't matter.
-
17:11
But we can create lay outs that shifts between different screen sizes.
-
17:17
And then, again since like, we're using mixins here, you don't, you
-
17:21
don't actually have to media queries
-
17:23
mobile first because we're running our own.
-
17:25
but, again, Foundation is like built in this
-
17:28
period of mobile first we definitely recommend like starting
-
17:31
small then expanding out for the best results.
-
17:36
So, here's an example of media query markup.
-
17:39
Again, it doesn't really look any different.
-
17:43
All the styling's done, in SCSS.
-
17:48
So at the top, we have just our
-
17:50
normal mobile-first default, default columns, so, eight and four.
-
17:55
But we're specifying, you know, a few, a few media queries.
-
18:01
And within there, we're kind of playing around with how the columns are behaving.
-
18:05
so, like, in one of them, they're, like, the columns
-
18:07
shrink down to two and we're dealing with an offset.
-
18:10
But then, when the string gets bigger, we're
-
18:11
gonna nullify the offset, and say that it's zero.
-
18:13
And we're gonna give both columns a width of six.
-
18:17
So an example of how that, how that works, how that behaves is down here as well.
-
18:23
So here you see there's, there's media
-
18:31
queries and right now it's even, they're both six columns but we can shrink down.
-
18:37
One kind of shift around, one has an offset
-
18:40
but then we we get smaller, they shift back over.
-
18:44
So just a quick example of like, how you can change your layout with media queries.
-
18:49
And you can use, I mean, as many media
-
18:51
queries as you want and do whatever you want.
-
18:55
I mean, it's advisable not to get to crazy and use
-
18:57
too many media queries, but wh, with Sass the power is there.
-
19:01
>> So, you just write the straight media query?
-
19:05
>> Yeah,
-
19:05
the, the, there are actually media query variables
-
19:09
in Foundation that you can do as well.
-
19:12
But like, for this example, we're just
-
19:13
writing the straight media query, you need.
-
19:15
>> Could you use break points to put this, just toss
-
19:17
them in there, just add break point anywhere [SOUND] [UNKNOWN] media query?
-
19:20
>> Break point, I believe so, yeah.
-
19:23
>> The way, the way I've been doin it is, in, like, there's a mix-in, there's a.
-
19:28
>> Yeah.
-
19:29
You don't actually
-
19:30
have do the bm, you can just do the mobile or small.
-
19:33
>> Yeah, typically, like, off and on, like when I'll write, like,
-
19:37
media queries just even include like the small and medium mixin as well.
-
19:40
>> And that's in the settings right? >> Yeah.
-
19:42
The size, screen size?
-
19:43
>> Yeah, yeah, and you can change those as
-
19:45
well in the settings, like where the break points are.
-
19:47
All right, we can also do content ordering.
-
19:57
Moving content around with push and pull. So oftentimes we'll want, we'll want
-
20:01
elements to appear after, like, later on, the more they are written on the markup.
-
20:07
So on mobile screens for example, we might have a sidebar
-
20:11
like, that's with the subnav, on the top before the main content.
-
20:15
But then, maybe when it expands out, we want the sidebar to
-
20:18
get pushed over to the right and to appear after the main section.
-
20:22
And it's
-
20:22
possible with Foundation.
-
20:24
The way that we do that, is so we have, we have are like aside or our main.
-
20:30
Aside is three columns. Main is nine.
-
20:34
The sides gonna appear like over, over to the right and before the
-
20:38
main content but maybe on bigger screens we want to shift that around.
-
20:41
So, what we can do is we can define a
-
20:44
media query at a certain point we want these to shift.
-
20:49
So we can push the side bar over by nine columns
-
20:53
then pull the main content back so it'll, it'll just flip flop.
-
20:57
So an example of that
-
21:04
is here.
-
21:05
So you see we've got pull three, push nine and
-
21:12
it shifts.
-
21:13
So actually it's, this is, this is mobile first, this is the correct view.
-
21:17
So this, this little, little guys can get pushed over by nine columns and this
-
21:22
big guy's going to get the whole three, so if you look again, it'll shift.
-
21:29
So it's great for changing the way that your
-
21:31
content appears or is ordered on different size screens.
-
21:39
>> Some Foundation handles changing float left or
-
21:42
float right also when you do push and pull?
-
21:44
>> Yeah, you just need to include the push and the pull arguments.
-
21:50
Yes.
-
21:50
>> [UNKNOWN] >> no.
-
21:53
Foundation 4 is not compatible with IE 8, Foundation 3 is.
-
21:58
that's, that's totally a different discussion.
-
22:00
But it, it, it was a conscious decision to drop support for IE8.
-
22:07
[INAUDIBLE].
-
22:08
>> Thank you. >> [LAUGH].
-
22:10
All right. Nesting the Grid.
-
22:13
So you can also infinitely nest your grid.
-
22:19
You can have as many grids within grids as you want.
-
22:22
So an example of how to do that is
-
22:24
here we our header and our sidebar and main content and
-
22:27
we've already defined these as acting like rows and columns and everything.
-
22:30
But maybe inside there we want another grid or
-
22:33
we want like more control which, which you can do.
-
22:36
So instead of main content, we might have an article for example.
-
22:40
And we might have a div or a paragraph or something like that.
-
22:44
And we want the article to be to be a row with 12 columns in it.
-
22:48
So what we can do
-
22:50
with Sass is we'll.
-
22:53
So, so we have our, our main which is which is eight
-
22:56
columns wide but the article, we're gonna include the, the grid-row mixin.
-
23:01
And were gonna paste the behavior of nest.
-
23:04
What this is going to do is, [COUGH] is it's going to tell the
-
23:07
row to like, to like, shrink down and like, behave as if it's nesting.
-
23:12
And then within there, we include our grid-column mixins
-
23:16
just like normal.
-
23:17
You don't need to pass anything else to them.
-
23:19
>> So, it still equals 12 even though it's nested in 8?
-
23:22
>> Yeah, right.
-
23:23
Because, because it's within, it's within the context of another row.
-
23:26
So, anything within the context of a row goes up to 12.
-
23:30
Or whatever the columns is defined as, cuz it can change.
-
23:36
So an example of that
-
23:40
We'll be here.
-
23:40
So you can see this, these are a little bit darker.
-
23:42
This is a, this is a nested grid. Then again it's fluid.
-
23:50
So yeah, there, that is, that is a lot of stuff you can do with the grid.
-
23:56
Pretty cool.
-
23:58
Let's move on to buttons. Buttons are another, another huge thing.
-
24:04
Buttons are used everywhere.
-
24:05
And we like to have a lot of control with
-
24:08
buttons cuz you need different kinds of buttons for different purposes.
-
24:11
So, let's look at how to build a button and we're gonna look at how to
-
24:15
customize it with with CSS or SCSS. so, here is the basic button syntax.
-
24:20
Using presentational classes, it can get pretty bulk cuz like if
-
24:23
you want it to be smaller, you gotta include that class.
-
24:25
If you want it to have rounded edges, we'd include that class as well.
-
24:29
We're gonna look at how to do all
-
24:30
this stuff with just really, really simple markup.
-
24:33
[BLANK_AUDIO]
-
24:36
So, if we're gonna build with mixins, we can just
-
24:39
keep the markup simple, without passing any classes to it.
-
24:47
And we have a plethora of variables available for buttons before you even
-
24:51
have to get in and, like, dig in and write your own mixins.
-
24:54
Not write your own mixins, include your own mixins.
-
24:58
So we have, like, padding, padding sizes, we
-
25:01
can choose how they're displayed, if they're going
-
25:03
to be, like, inline, if they're going to
-
25:04
be block and just, and fill the whole screen.
-
25:08
We can choose the font styles, other styles.
-
25:14
Pretty much anything.
-
25:15
So the quick way to make a button is
-
25:18
to include the button mixin in your class name.
-
25:22
And this will give you just the default button.
-
25:25
That's pretty basic, but you don't need to pass any arguments here.
-
25:28
This will just give you. There it is, the button.
-
25:33
But if you wanna get, get crafty, get sassy,
-
25:37
we have a ton of arguments we can pass
-
25:39
to buttons as well. You can control the padding.
-
25:42
You can control the background, the radius.
-
25:45
We can make it full width. We can expand it to fill it's parent.
-
25:49
And you can disable it too which will disable hover actions.
-
25:52
And it will kind of make it translucence.
-
25:56
One other cool thing to note is when you adjust the
-
25:58
padding argument, that will dynamically change the font size as well.
-
26:02
So that, if you make it like,
-
26:04
you know, 100 pixels or something, the font size
-
26:07
will adjust to be proportional, which is really cool.
-
26:13
So here's an example of a, a, a more complex button.
-
26:17
So we're including the button mixin, but we're passing a padding argument, a
-
26:21
background argument and a radius argument to create a more, a more stylized button.
-
26:28
Here, here's an example of that.
-
26:30
And the, the, the text color's changing automatically, too.
-
26:33
Because, we have built into, built into buttons, we have a function, we have
-
26:37
a function where we get the likeness of, the background color of the button.
-
26:40
And change the font color depending on how readable it's gonna be.
-
26:44
>> Now, you would still have to include or would you still have
-
26:47
to include the small class, large class expanded class or is there a mixin?
-
26:49
>> So, so what, no, so what you do, for that it's, it's in the padding.
-
26:55
So,
-
26:55
if you, if you'd want it to be small, you'd, you
-
26:57
would like you would include the variable for like $button-tiny for example.
-
27:02
And that would make the padding really, really tiny and
-
27:04
that would resize the font really, really tiny as well.
-
27:07
So, it does it on the fly. So.
-
27:08
>> So, it's, even though it's not like, small
-
27:12
and large are written in their padding controls def.
-
27:14
>> Yeah, the, like the, you have your, like your, your your padding classes.
-
27:18
Like button, button, button medium.
-
27:21
So, and there's, there's like button, like button large, button tiny, that kind of.
-
27:24
So like, if you, if you wanted to use those values,
-
27:26
you could just pass those to the padding mixin or padding argument.
-
27:31
But, you can clear your own value too.
-
27:37
Oh. Okay, Button base.
-
27:40
But if, if we, want to get really granular, you can
-
27:44
also, there's separate mixins for, for each one of these things.
-
27:48
We can build a button from scratch basically.
-
27:51
With a button base which will just give you like the bare bones.
-
27:55
It will just be like a container like of a border and some text, and that's it.
-
28:01
And, then we can add in styles, we can
-
28:02
add, we can add the button size and we want to pass the padding argument to that.
-
28:08
We can change the style, the background of the radius.
-
28:11
Again like, add inset shadow which is that little like shiny like white thing
-
28:16
at the top to make it look like a little bit more like a button.
-
28:19
And then we can add in how transitions work.
-
28:25
So, so an example of all these are
-
28:28
down at the, the bottom here, so here's the, here's the base button.
-
28:31
It's just, it's just text and a border.
-
28:34
Then if we want to add size we need to add padding to it so that's down here.
-
28:39
And then we can add style and then we can make it super fancy
-
28:43
and make it have, I don't know if you can see it from there.
-
28:50
Make if have like nice hover styles and
-
28:51
a little shiny inset shadow and nice transitions.
-
28:59
Sweet. So that is the gist of building,
-
29:06
building buttons in Foundation with SCSS. Super customizable.
-
29:10
There's a lot of arguments to work with.
-
29:12
And you can make a lot of like very different button styles.
-
29:17
Button Groups.
-
29:18
So now that we've made these awesome buttons, let's
-
29:20
look at how to make them work as a unit.
-
29:26
So button group syntax is pretty simple.
-
29:28
It's an unordered list with list items and
-
29:32
anchor links that are buttons inside of them.
-
29:35
We can this is, this is the basic like default markup.
-
29:38
It's a little bit presentational. So we can change that to whatever we want.
-
29:42
We can call it maybe the tool bar and change the button class names.
-
29:49
And it's built on top of buttons.
-
29:50
So again you just create an, an order list.
-
29:54
You create your list items. And then you put buttons inside of them.
-
30:00
And the classes that you make for buttons, so like all
-
30:02
those classes that we made before, will work in a button group.
-
30:06
It's super easy.
-
30:09
So here is an example of the button group container mixin.
-
30:13
So this just
-
30:14
defines a whole container is like, this has a button group inside of it.
-
30:18
And then to apply a specific styles to the button group.
-
30:23
We actually apply those to the list items and not in the container itself.
-
30:27
So we need to do the direct child selector of
-
30:30
the list items and include the button group style mixin.
-
30:34
And then from there, so inside the button group style, we can adjust the radius
-
30:39
of the whole group.
-
30:40
So, it'll just like if you pass the border radius, it'll adjust the radiuses, or the
-
30:45
radii of the ends, but not each individual
-
30:48
buttons so it'll like, be like one cohesive unit.
-
30:52
You can also make it even, so all the buttons will be
-
30:55
the same width, and the whole button group will fill its parent.
-
30:58
And you can adjust how it'll float, so if it'll float right or left.
-
31:03
>> So that'll respond to
-
31:04
mobile, then, it''s respond to that. >> Yeah.
-
31:07
Yeah, absolutely.
-
31:07
>> How about using an inline grid for that?
-
31:11
>> [LAUGH].
-
31:11
>> Right there, if that's what I'm doing.
-
31:13
>> Yeah, so here's an example, so basic button
-
31:16
group then like here we pass the radius to it.
-
31:20
And here's an even button group so it fills it's parent
-
31:24
and it just, they stay the same width no matter what the size is.
-
31:29
It the like this would break if you had a small screen and you had like 12 buttons.
-
31:34
It would just make each one really small and the text would overflow.
-
31:37
That's that's, that's worth considering.
-
31:39
But, but if you have like a sigmatic
-
31:40
control on a mobile device, like, it's just perfect.
-
31:45
>> What type of platform?
-
31:46
Would it use h class or would it use the anchor type platform?
-
31:50
>> You can, you can use the button class on a, on
-
31:54
an anchor link, on an input button or on a button element.
-
31:58
So it doesn't really matter which, which element you use.
-
32:00
>> Is it okay [UNKNOWN] practice to use?
-
32:02
>> It depends, depends what you're using it for.
-
32:05
So, if you're, if you're building a form for example,
-
32:08
it's probably better to use the, the submit input, right?
-
32:12
But if you're, if it's just linking to new,
-
32:13
to another page, it's better to use the anchor link.
-
32:16
So that's, that's kind of, that's the idea behind the practice.
-
32:19
[BLANK_AUDIO]
-
32:25
All right. >> [SOUND]
-
32:26
>> Alert, alert boxes. >> [SOUND]
-
32:30
>> So alert boxes are similar looking to buttons, similar in how you build them.
-
32:35
But they're more of a global element and they're definitely simpler.
-
32:39
So, the basic markup for an alert box is you have your class that
-
32:44
you want to be an alert box and inside there you have your message.
-
32:50
We have.
-
32:50
>> Can you wrap in a p tag or not, does it have to be?
-
32:53
>> Any block level element could be, but,
-
32:56
you're going to have, yeah, it'll be fine, yeah.
-
33:02
wait, wrapped in a p tag, or? >> The message
-
33:06
>> Oh yeah, it can. >> I mean, I just that you
-
33:08
>> It can be, it doesn't need to be.
-
33:10
>> Okay
-
33:10
>> If you, if you wrap it in a p tag, it's
-
33:12
going to like add more margins and padding because there's like some default
-
33:15
stuff in there. so, you'd, you'd have to collapse that.
-
33:18
But I just, I wouldn't do it.
-
33:20
But you, but you, but you can, you're not restricted.
-
33:24
so, again we have a number of
-
33:26
variables available for alert boxes, similar to buttons.
-
33:30
Border, font styles.
-
33:36
We also have close button styles, which we'll look at in a minute.
-
33:38
You can add a little like x for to, to close the alert box as well.
-
33:45
And to style an alert box, again we just pass the alert mixin.
-
33:50
And that gives us
-
33:55
this guy here.
-
33:59
We can also just build it from, from the base.
-
34:04
So include the alert box base and that'll just give us the outline and some text.
-
34:10
And then we can style the background color from there.
-
34:13
You'll notice that there's not, there's not nearly as
-
34:15
many arguments for alert boxes as they are for buttons.
-
34:20
And the reason behind that is alert boxes um,we
-
34:23
think should be much more of a global element.
-
34:25
They're for special moments on the site.
-
34:26
Like when we get a message and we get an alert or a notification.
-
34:29
So it should be consistent, the user should, like,
-
34:31
know immediately, like, what that is when they see it.
-
34:34
So we're keeping the size and like everything consistent.
-
34:37
But you can kind of change the color and the border a little bit.
-
34:40
But as long as everything's more consistent people
-
34:43
are going to know what that is more readily.
-
34:48
We can also add a close button to
-
34:50
the alert box as well.
-
34:51
it's just an anchor link with whatever class you want.
-
34:55
We're calling it close because that's what it does.
-
34:57
It's pretty semantic.
-
34:58
And, the character in there is just the multiplication symbol, because it's a nice
-
35:03
symmetrical little square x, but it can be whatever you want it to be.
-
35:09
And then, we just pass the, the alert close mixin to the close button.
-
35:15
How does this tap in to your, your colors
-
35:17
like your warning, your alert colors, your success color?
-
35:20
>> You can you can add whatever like color variable you want.
-
35:26
So like.
-
35:27
>> So like background [CROSSTALK].
-
35:27
So like background you could say, you could say
-
35:30
like this could be like Alert Error or something.
-
35:33
And then or it could be cause an
-
35:34
error and then for your back ground color you would give it like
-
35:38
the, the error color variable or the alert color variable, something like that.
-
35:43
So you can use your alert color variables or you can use a different color.
-
35:50
We can also add a radii, radius to our alert box as well.
-
35:57
So
-
36:00
the examples of alert boxes. [INAUDIBLE]
-
36:05
might as well close button you can click on.
-
36:09
You'll notice they it's, it's not, it's not quite vertically centered.
-
36:14
That's because it's, it's center with a box itself.
-
36:16
Not on the, not on the, the message that's
-
36:19
in case, the message goes down two lines or something.
-
36:23
The button itself won't really interfere
-
36:25
with the message and, it'll still feel in place.
-
36:28
But, you can always adjust that with, with SCSS, just like
-
36:31
bump it down more a few pixels position relative or something.
-
36:34
And
-
36:40
last but not least, panels. Panels are another pretty global element.
-
36:45
like, like alert boxes that don't have a ton of arguments
-
36:48
but they're pretty universal and we'll look at how to build them.
-
36:51
So, a panel is just a div or anything.
-
36:54
A panel can be any element.
-
36:57
Recommend you do some sort of block panel element
-
36:59
or some element that's set to display as block.
-
37:01
Because it's gonna contain con, it, it's purpose is just to contain content
-
37:06
inside of it.
-
37:07
So we'll just use in div here cuz it's generic and we're doing it a class.
-
37:13
And we have a panel of variables to work with as well.
-
37:16
This should look familiar by now, background, border,
-
37:20
layout, font colors and we have mixin defaults.
-
37:25
So if you, if you include just the panel, you'll get
-
37:28
just the default panel from Foundation with no special styling or anything.
-
37:33
But you can pass arguments to it.
-
37:35
You can pass a background in a padding argument,
-
37:38
for example and that will give us some custom panels.
-
37:44
Here's an example of that.
-
37:45
So, here's a basic panel.
-
37:47
It's not styled or customized or anything. It's just a default foundation panel.
-
37:53
But down below here, we've added some padding.
-
37:55
We've added some background color and the
-
37:57
border color is generated from the background color.
-
37:59
So it all stays consistent. So this is an example of a custom panel.
-
38:07
All right.
-
38:07
So we've looked at the grid, buttons, button groups alert boxes and panels.
-
38:14
So what about the rest?
-
38:17
There's a lot of other components in Foundation.
-
38:19
almost, almost all the UI elements can be, can be built with mixins.
-
38:24
All the CSS components can.
-
38:26
For things that require JS plugins or things that have
-
38:29
a lot of moving parts, many of those s, s,
-
38:32
still rely on presentational classes for now.
-
38:35
We are working on like, porting those, like, making
-
38:38
those more dynamic and making mixins out of those.
-
38:40
With Reveal now, you can create, the modals with with mixins.
-
38:48
But for, but, but things like Orbit or, or the top bar things that
-
38:51
are, where there's a lot of moving pieces in like, things that are pretty bulky.
-
38:54
We, those, those are still pretty, like pretty set,
-
38:57
they don't have mixins, a lot of mixins for those yet.
-
39:02
But it's a work in progress. >> [SOUND]
-
39:04
>> [FOREIGN] >> Thank you.
-
39:05
>> All right. So that's it.
-
39:08
Any, any questions?
-
39:09
Any, any other things you guys want more detail on?
-
39:13
>> Yeah, you just actually answered the modal question I was about to bring up.
-
39:16
>> Oh, okay.
-
39:17
Great.
-
39:17
>> Cuz those seem to be very common requests
-
39:19
these days, everyone wants to go to the third dimension.
-
39:22
>> Yeah, yeah.
-
39:22
>> So we use just JavaScript to do it, right now.
-
39:26
>> Use JavaScript
-
39:28
to define the mode.
-
39:28
But you can, the, there's mixings available now to.
-
39:31
>> So you can take out, you can make the class,
-
39:34
be more semantic about taking a lot of the classes out.
-
39:37
Yeah, like you could like, you could like, if
-
39:39
your, if your modal was a sign up form, you
-
39:41
could call it sign up form and then we
-
39:43
have mixins like, at included, that kind of thing so.
-
39:46
>> Oh, okay.
-
39:46
So you can get more of that into the CSS then.
-
39:50
>> Yeah. >> Mess around with
-
39:55
CSS. >> Yeah.
-
39:57
Absolutely. >> For like modals And stuff like that.
-
40:00
>> Mm-hm.
-
40:00
>> Why would you want to, I'm curious as to why
-
40:03
you might do a mixin rather than a placeholder in that instance?
-
40:08
>> It's a, it's a, it's a good question,
-
40:13
yeah, I would be willing to do a
-
40:14
mixin, in case we're like include various functionality.
-
40:20
If we wanted like
-
40:23
if we're have like for instance a default, a default modal but
-
40:27
like maybe in one case we'll have a modal plus like plus this.
-
40:31
And like dynamically change font sizes and things
-
40:34
like that we would have a mixin for that.
-
40:37
>> You have really good documentation on your site for it also.
-
40:39
For doing this thing. [CROSSTALK].
-
40:42
I must say I, I've used Foundation 3 many times.
-
40:44
>> Mm-hm.
-
40:45
I'm using Foundation 4 on our current application.
-
40:47
>> Mm-hm. >> and it's like
-
40:48
amazing I love Foundation. >> Thank you.
-
40:50
>> It's like the bomb.
-
40:51
And the setting all the Sass that you have that
-
40:55
stuff is, it's like so fun to use and so easy.
-
40:59
I recommend everybody try it.
-
41:01
And it, it's awesome it's a game changer,I think.
-
41:04
>> Thank you.
-
41:05
>> I'm an advocate [LAUGH].
-
41:08
>> [LAUGH].
-
41:10
>> I learned some new stuff on that I, I realized that I'm not using mixins as
-
41:14
much as I should. >> Mm-hm.
-
41:15
>> Because I was getting in the habit of not using them, you know?
-
41:16
>> Yeah, yeah exactly.
-
41:17
>> And now, I'm like," Oh, how am I going to
-
41:18
refactor and bring all that stuff out html and put it in?
-
41:21
Yeah, it, yeah it, like, it, it requires you
-
41:24
think ahead a little bit more kinda plan things out.
-
41:26
But it makes things really easy to change like after
-
41:29
you have things built it makes things way easier to customize.
-
41:32
[NOISE]
-
41:34
>> One other thing.
-
41:36
>> Yeah? >> A lot of people that I work with
-
41:39
have a really hard time dropping IE. >> Mm-hm.
-
41:43
>> It's just like an enterprise addiction.
-
41:44
>> Sure.
-
41:45
>> So I see you have this IE8 finished for
-
41:48
CSS, Is that, I guess it's all like a 100% but.
-
41:52
>> It's not 100% so we don't officially support IE8.
-
41:56
We do have the IE8 commission for grid which is
-
41:58
a port of definition three grid with definition four classes.
-
42:01
SO you can include that in IE specific style sheet.
-
42:05
And like, there's also, there's also [NOISE] what, what js plugin was it?
-
42:11
There's a, there's a few, a few poly, polyfield plugins you can play with.
-
42:13
>> Right.
-
42:13
Yeah. Yeah.
-
42:14
It's just
-
42:14
>> To make things work. >> You, you still have to branch.
-
42:17
>> Yeah.
-
42:17
>> like, a little bit. Okay.
-
42:21
>> Cool, alright. >> Other question?
-
42:23
>> Yes.
-
42:23
>> Can you show us like the coolest site built with Foundation.
-
42:26
Doesn't look like a Foundation site?
-
42:28
>> The coolest site built with Foundation
-
42:30
that doesn't look like a Foundation site?
-
42:32
[LAUGH] Hm. Let's see.
-
42:36
>> [INAUDIBLE].
-
42:40
>> The Embassy properties. >> [INAUDIBLE].
-
42:45
>> I'm gonna close all this.
-
42:46
[UNKNOWN] >> Uh-huh.
-
42:53
>> What was yours?
-
42:54
>> [UNKNOWN] IUN. >> Got it.
-
42:57
There it is.
-
42:58
>> [CROSSTALK].
-
43:01
To answer your question when you do a live conference from a Foundation.
-
43:07
Can you, can you go click on clothing or something?
-
43:09
>> Sure. >> So we actually, they have a feature
-
43:11
called block grid, where you can place like n
-
43:14
number of elements, sort of like four elements there.
-
43:17
And there's like, we can customize it for large and small.
-
43:20
So when you resize, it actually, on a
-
43:21
tablet, it shows you like two elements per row.
-
43:24
So, [CROSSTALK]
-
43:26
and then when you go to your mobile it shows
-
43:30
you, so actually extending that to an extra small screen.
-
43:33
So on a mobile it shows you just one and we have a [SOUND]
-
43:37
[INAUDIBLE] layout they have to be creditors.
-
43:40
>> Here the argument allows like [UNKNOWN] look
-
43:43
like Foundation or another one [INAUDIBLE] app, whatever.
-
43:46
I think that's a bs argument because.
-
43:48
>> This Foundation is built specifically so that, I
-
43:51
mean it doesn't look pretty out of the box.
-
43:53
Like it's, it's very basic, it's built because with the,
-
43:56
the idea that you're going, like going and customize things.
-
44:00
In a sense, it's built to like in purpose to make
-
44:02
it as easiest as possible
-
44:04
>> And I chose it, 'cuz I was like, I was like, I need that, I need that.
-
44:07
I was gonna either. Mm hm.
-
44:08
>> Build all these things from scratch. >> Yeah.
-
44:10
>> And basically built on another foundation, or just use Foundation.
-
44:13
So I was, like, it was a no brainer.
-
44:14
>> Yeah.
-
44:14
>> 'Cuz it, there's so many things in it,
-
44:16
you know, that you're gonna end up building your way.
-
44:17
>> Yeah. This was also built in Foundation.
-
44:20
the, the Treehouse marketing site.
-
44:22
Another whole app for the marketing site is built on Foundation, as well.
-
44:25
Finished in three, I think, a little
-
44:27
bit older, but it's still the same components.
-
44:36
>> I have another question for you. >> Yes.
-
44:37
>> I'm sure you get this a lot.
-
44:39
>> Mm-hm.
-
44:39
>> What's your take on a Bootstrap as a foundation.
-
44:42
>> [LAUGH] He tries Less.
-
44:44
>> Well Bootstrap is on Less.
-
44:46
>> Yeah, they have a Sass version, but officially it's less.
-
44:50
>> Spanish.
-
44:51
Yeah.
-
44:53
>> Their code, the official code is is like Sass.
-
44:58
>> I haven't so, in all, in all fairness,
-
45:01
I haven't actually, I'm not up to date on Bootstrap, Bootstrap 3,
-
45:05
so I can't, I can't quite, so, I can't quite speak to that.
-
45:09
But, Foundation is, again, it, it, it's
-
45:12
built, it's built to be highly customizable.
-
45:16
It's build so that you can like, put your own design on top of it.
-
45:20
Whereas Bootstrap is like super shiny out of the box.
-
45:23
And it's, it's, it's purpose we see it as more of a kind
-
45:26
of like more to have something that looks great right out of the box.
-
45:29
But it looks like very Bootstrappy, it looks
-
45:31
like, as various things to look and it's like.
-
45:34
There's like, there's like apps out there to customize it and stuff.
-
45:36
But basically it's not, it's not as easy to do out of the
-
45:39
box whereas Foundation was built specifically
-
45:42
like to put your own design onto.
-
45:44
So that's, that's, that's the the basic, basic laws.
-
45:49
Anybody else?
-
45:50
Any other questions?
-
45:56
[SOUND]
You need to sign up for Treehouse in order to download course files.
Sign up