[BLANK_AUDIO]

All right.

Well today we're gonna talk about Getting Sassy With Foundation 4.

Gonna talk about using Foundation and Sass together to make some

awesome layouts and wri, write exactly markup that you want to do.

So quick introduction my name is Caleb.

I am a designer at ZURB in Campbell we do some cool things.

I design various things and I work on a foundation

as well and use it in all of my projects.

>> [LAUGH]

>> So that's me.

But what we really care about is what is Foundation?

So, how many people here are familiar with Foundation, or use it, or.

Okay, so a fair, a fair number.

We're gonna run through like, just a

really quick overview of what Foundation is.

Foundation is a front-end web design framework.

It's a great foundation for building websites.

[LAUGH] So it's, it's designed to be a good starting point.

It has a lot of components built in, to allow you

to write your markup and get your site's content all built.

And then from there you can add in your own design.

It's, it's designed to be very flexible, very customizable.

At the core, Foundation is a mobile first responsive grid.

Mobile first meaning the grid and all components

are built with small screens in mind first.

And all the built in media queries adapt

to larger screens and not the other way around.

The philosophy behind that is small screens,

bubble screens are the most constrained experience.

So when you design for mobile, you're forced to think about

okay, what is the most, what is the core function of this page.

What is the, the key action that we need to get across.

What is the main purpose of this page.

So it helps you to design really simple elegant layouts.

That look great on any screen size.

After that we have loads of UI components.

So things like navigation, form elements, buttons, typography, everything that

you need to start building a basic front end and then adding your own style later.

And it's built with Sass.

So there is a, a vanilla CSS version of Foundation,

but it's all compiled from what we do in Sass.

We love Sass obviously because it's awesome and everything

that we build in Foundation is built with Sass.

Because it allows us to like create really

powerful layouts and customize things really, really easily.

>> [INAUDIBLE]

>> All right, let's get sassy.

So we have two options to work with

when we're using the Sass version of Foundation.

We have Sass stand alone which doesn't

rely on Compass or any other external library.

It's just the SCSS And then we have the compass extension.

At ZURB, we always used the Compass extension because Compass is amazing,

it gives you access to like all kinds of mixins and functions.

But some people don't

like Compass and some like Bourbon and some

people have their own library that they use.

And we want you to be able to use Foundation with your own library as well.

So we do offer this Sass Standalone.

Sass Standalone is, it's the lowest denominator.

There's not dependencies. So, you can use it right out of the box.

It gives you all of the core foundation files in your project directory.

So you can look at them and you

can edit them.

You shouldn't edit them it's not recommended

because if you wanna update Foundation later or

change something or if you mess something up it's gonna be a lot harder to fix.

But if it's so the best practice is to

overwrite these like, these settings rather than edit them directly.

And you can find this in the Foundation GitHub repo.

Just, change the branch to scss-standalone and you'll be able to download

the, just the Sass and JavaScript.

But with a Compass extension, we can create

a new project straight from the command prompt.

So just open up your favorite CLI and you

can create a, a new project straight from there.

And with good Compass extension, the files

are tucked away where you can't touch them.

Where it is depends on your development environment.

But the point is that it's tucked away separate from your

project directory, so yeah, you can't like, edit the Compass Sass

files directly.

So it makes it really really easy to update things

and there's not really any chance of you messing anything up.

All right, lets look at, how to create a foundation project, with Sass and Compass.

So, first thing we need to do is install a Foundation gem.

So just open up a terminal and type in gem install

zurb-foundation if your on Windows you will need to have, Ruby installed.

But but otherwise, it's pretty simple.

And then you'll get a message saying

that it's fetching everything and it's installing.

And then once you have foundation installed, you type

in gem install compass to, get Compass on your system.

And, again, you'll get a similar message.

And from then, we, we have Foundation and

Compass both installed, so we can create our project.

So we want to cd into wherever your projects folder is.

For me, it's always my sites folder but people keep

their sites in different places, so navigate to your project directory.

And then from your project directory, you type

in compass create, project-name, -r, zurb-foundation, -using foundation.

And from there,

that, that, that'll create your, your projects.

And then you can, you just navigate into a new project folder.

then, type compass watch, so that way you'll be watching your your projects and

Compass will convert all the Sass that you write, into CSS that the browser can read.

And then you'll get a message saying Compass is watching.

And you can learn more about Compass at compass-style.org.

[BLANK_AUDIO]

All right, so you, you can organize your project however you want.

There is a basic GitHub repo up on GitHub for the Foundation course.

And you can download the projects of this, at this url.

I'm gonna send out the slides later as well, so you can always check it out.

In the, in the Foundation course repo, you'll get the

index, JavaScript, SCSS, CSS directory and also an examples directory.

I'm gonna show several small examples of how

to like mock-up different components of foundation with SCSS.

And those are included in this directory, as well.

So you can kinda, poke at them and see how they work.

All right, the first Sass thing that we're going

to look at in Foundation is the settings files.

so, the settings files contain changeable variables

for almost every component every element in Foundation.

It saves a ton of time, cuz you can go to this file and change values, change

settings of predefined variables without writing any SCSS.

So, it's a great way to right away just kinda go in and change things.

And get a fairly customized look without hardly

writing any SCSS.

It also helps you override less, less SCSS.

Because rather than writing your SCSS

directly you're just overwriting existing variables.

So, here's an example of different variable settings.

And here if we change some so there's the body, the body font color,

font family, various colors in the site, header font colors, header styles.

So

here's a basic look

so here's a look at a basic Foundation page.

This is what Foundation looks like, out of the box.

It's pretty plain, pretty simple. Designed to be, pretty easy to customize

[BLANK_AUDIO]

With with the settings we can alter them

and create a pretty customized page pretty quickly.

So, you can see here we changed the background color, the headers, the panel

styles so it's a totally different looking page with just altering a few variables.

So that's the first way that we can really, lovers

of power of Sass, to create custom pages and foundation.

So we're going to go through, five

condition components and move kind of beyond variables.

And talk about how to use mixins to to

create foundation components writing whatever mark up you want.

The reason we're just gonna do five is obviously, I mean, time constraints.

And also, we wanna kinda dive in depth, a little bit, on each,

on each of these components, instead of just giving, like, a broad overview.

A quick note on ems we use ems quite a bit in foundations that calculate values.

They can be kind of a pain to work with.

Some people aren't comfortable working with, like, with ems,

like to use pixel values or some other unit values.

We have a function in Foundation to help you out with that called emcalc.

It takes your desired value so, if you want to pix, use pixel units or

anything, it divides that by the body font size and it spits out a em value.

So, you can do emcalc twelve pixels and it will, and it

will give you, give you the m val, the m value for that.

>> Can you tell us why a bunch of em's?

>> Because em's a em's a relative to

like, to different like whatever, whatever's around them.

So for things like buttons, for instance when we, when we

like change the padding or change the size of the button.

It is a lot easier to dynamically change the size

of the font as well to make it more, more relational.

[NOISE] I think em's, em's going to make it much easier, make, to

make, spatial relationships a lot easier so that is the main reason why.

>> So it's a little bit more flexible than pixels.

>> Yeah, it's a

little bit more flexible.

It's not, it's not, it's not, precise like, like a pixel.

But since we're, since Foundation is mobile first and

like more interested in being responsive and, and fluid.

We don't worry so much about like,

being pixel perfect or like precise pixel values.

we're, we're, we're worried more about like

spatial relationships and making things look proportional.

So, that's the idea behind em's.

All right.

So here's the basic markup syntax for the grid.

The grid is made up of rows and columns and

traditionally we've used presentational classes like these to create the grid.

So you'll define a row and then you'll define your columns.

And this looks great but let's look at how we can write our own

our own markup with our own class names and still get to the same result.

Especially here if, if we're like adding behaviors to rows or adding media

queries for like different columns on

different screen sizes and offsets of things.

It can get really bulky.

So the, the, the big advantage with SCSS is that we can keep our markup really,

really clean and really, really symantic without all

these presentational classes and still get a great result.

So the first thing we do have a handful of variables for the

grid we have the row width which is the maximum width of the row.

It's not, it's not the absolute width, it's the maximum width that it would be.

So when you expand your browser all the way

out the rows are going to stop at 62 rows.

But this can be 100% if you want your website

to be full screen, it can be whatever you want.

Gutter, pretty self explanatory.

And then columns, by default the total columns in the grid are 12.

because, 12 column grids are pretty common people are used to working with them.

But you can adjust this to be 16 or 20, or whatever you want.

[BLANK_AUDIO]

All right, so, lets look at container row markup.

So, if we're going to build a row with mix-ins this is all we need.

We need an element and we're going to give it a class of header

to be symantec, to describe what it is and not what it looks like.

And to make this behave like a row we need to include the row mixin.

So we'll select the header and we'll do, include grid-row.

And that will give us, a nice container row right here, ready to put columns into.

I'll put columns in here.

Inside of the header we might have a logo and a nav.

Super clean mark up.

Let's look at how to make these into columns.

So inside of the header we're selecting the logo in the

nav and we're passing the grid-column mixin to each of these elements.

And we need to define how many columns each element takes up.

So, we have an argument called columns and we pass a value to each of these.

Since since our amount of columns of 12, we need to make

sure that our columns add to 12 or at least don't exceed 12.

And

that will give us, give us, this right here.

So, you see I have four columns, eight

columns, we've got a nice gutter and it's fluid.

Since we didn't specify any media queries, it stays the same when its large or small.

>> 12 columns is the default?

>> Yeah, 12 columns is the default, but again, you can

change it to whatever you want.

>> In this grid makes it so you don't have to use the [UNKNOWN] class?

Yes.

>> [INAUDIBLE].

>> Yeah, you can name it whatever you want and you just target

it in your SCSS and you, and you just pass the grid-row mixin.

>> You don't have to use the dollar sign columns though, colon?

>> Columns is, is the argument and colon is the value.

>> But I don't, the current version I'm using

I haven't been doing that, we're just putting four.

>> Really?

>> Uh-huh. >> Interesting.

I've, I've always done it this way.

>> Yeah, that's actually the first time I've seen that.

It's cool.

>> Okay, I've learned something too. Cool.

>> All right, center columns.

You can also center columns inside of your rail or center a single column.

You can't center a column set, so if you have more than

one column inside of a row you can't center both of them.

But if you have one column inside of a row you can center that.

If you do wan't to center multiple columns you can maybe nest another

row inside of single column and then have multiple columns inside of there.

But we're gonna

look a just how to center a single column. So again, here's the markup, super clean

and then, we're gonna center logo so we're gonna pass a behavior argument to it.

So we'll say center:true.

And that will give us centered columns.

With this right here.

So here's three columns centered, there's larger, like six columns centered.

You can also offset columns in your markup.

So if you want maybe a larger gutter between your sidebar and your main

content if it's like, pushing too close and you want it to be further away.

You can offset your columns, so the way that we

do that is we have an aside and an article here.

The way we'll do that is on the article, we'll

pass the offset argument and give it a value of one.

So this

is, the, the offset value is also part of your I call column value.

Do you want you want your offset, and your columns to all still not exceed 12.

So, we had 81 is 9, and then 3 for these sides, that's still 12 columns.

But we'll get a, a little offsets.

There'll be a little more room to breath

between the, the main content and the sidebar.

So, some examples of offsets are in here as well.

So right

here like this is offset by one column, this is offset by three, this is offset by

six. Oop, sorry,

media queries.

We can use media queries to change how the grid behaves between screen sizes.

So we'll be using the same mixins within any media context.

It doesn't matter.

But we can create lay outs that shifts between different screen sizes.

And then, again since like, we're using mixins here, you don't, you

don't actually have to media queries

mobile first because we're running our own.

but, again, Foundation is like built in this

period of mobile first we definitely recommend like starting

small then expanding out for the best results.

So, here's an example of media query markup.

Again, it doesn't really look any different.

All the styling's done, in SCSS.

So at the top, we have just our

normal mobile-first default, default columns, so, eight and four.

But we're specifying, you know, a few, a few media queries.

And within there, we're kind of playing around with how the columns are behaving.

so, like, in one of them, they're, like, the columns

shrink down to two and we're dealing with an offset.

But then, when the string gets bigger, we're

gonna nullify the offset, and say that it's zero.

And we're gonna give both columns a width of six.

So an example of how that, how that works, how that behaves is down here as well.

So here you see there's, there's media

queries and right now it's even, they're both six columns but we can shrink down.

One kind of shift around, one has an offset

but then we we get smaller, they shift back over.

So just a quick example of like, how you can change your layout with media queries.

And you can use, I mean, as many media

queries as you want and do whatever you want.

I mean, it's advisable not to get to crazy and use

too many media queries, but wh, with Sass the power is there.

>> So, you just write the straight media query?

>> Yeah,

the, the, there are actually media query variables

in Foundation that you can do as well.

But like, for this example, we're just

writing the straight media query, you need.

>> Could you use break points to put this, just toss

them in there, just add break point anywhere [SOUND] [UNKNOWN] media query?

>> Break point, I believe so, yeah.

>> The way, the way I've been doin it is, in, like, there's a mix-in, there's a.

>> Yeah.

You don't actually

have do the bm, you can just do the mobile or small.

>> Yeah, typically, like, off and on, like when I'll write, like,

media queries just even include like the small and medium mixin as well.

>> And that's in the settings right? >> Yeah.

The size, screen size?

>> Yeah, yeah, and you can change those as

well in the settings, like where the break points are.

All right, we can also do content ordering.

Moving content around with push and pull. So oftentimes we'll want, we'll want

elements to appear after, like, later on, the more they are written on the markup.

So on mobile screens for example, we might have a sidebar

like, that's with the subnav, on the top before the main content.

But then, maybe when it expands out, we want the sidebar to

get pushed over to the right and to appear after the main section.

And it's

possible with Foundation.

The way that we do that, is so we have, we have are like aside or our main.

Aside is three columns. Main is nine.

The sides gonna appear like over, over to the right and before the

main content but maybe on bigger screens we want to shift that around.

So, what we can do is we can define a

media query at a certain point we want these to shift.

So we can push the side bar over by nine columns

then pull the main content back so it'll, it'll just flip flop.

So an example of that

is here.

So you see we've got pull three, push nine and

it shifts.

So actually it's, this is, this is mobile first, this is the correct view.

So this, this little, little guys can get pushed over by nine columns and this

big guy's going to get the whole three, so if you look again, it'll shift.

So it's great for changing the way that your

content appears or is ordered on different size screens.

>> Some Foundation handles changing float left or

float right also when you do push and pull?

>> Yeah, you just need to include the push and the pull arguments.

Yes.

>> [UNKNOWN] >> no.

Foundation 4 is not compatible with IE 8, Foundation 3 is.

that's, that's totally a different discussion.

But it, it, it was a conscious decision to drop support for IE8.

[INAUDIBLE].

>> Thank you. >> [LAUGH].

All right. Nesting the Grid.

So you can also infinitely nest your grid.

You can have as many grids within grids as you want.

So an example of how to do that is

here we our header and our sidebar and main content and

we've already defined these as acting like rows and columns and everything.

But maybe inside there we want another grid or

we want like more control which, which you can do.

So instead of main content, we might have an article for example.

And we might have a div or a paragraph or something like that.

And we want the article to be to be a row with 12 columns in it.

So what we can do

with Sass is we'll.

So, so we have our, our main which is which is eight

columns wide but the article, we're gonna include the, the grid-row mixin.

And were gonna paste the behavior of nest.

What this is going to do is, [COUGH] is it's going to tell the

row to like, to like, shrink down and like, behave as if it's nesting.

And then within there, we include our grid-column mixins

just like normal.

You don't need to pass anything else to them.

>> So, it still equals 12 even though it's nested in 8?

>> Yeah, right.

Because, because it's within, it's within the context of another row.

So, anything within the context of a row goes up to 12.

Or whatever the columns is defined as, cuz it can change.

So an example of that

We'll be here.

So you can see this, these are a little bit darker.

This is a, this is a nested grid. Then again it's fluid.

So yeah, there, that is, that is a lot of stuff you can do with the grid.

Pretty cool.

Let's move on to buttons. Buttons are another, another huge thing.

Buttons are used everywhere.

And we like to have a lot of control with

buttons cuz you need different kinds of buttons for different purposes.

So, let's look at how to build a button and we're gonna look at how to

customize it with with CSS or SCSS. so, here is the basic button syntax.

Using presentational classes, it can get pretty bulk cuz like if

you want it to be smaller, you gotta include that class.

If you want it to have rounded edges, we'd include that class as well.

We're gonna look at how to do all

this stuff with just really, really simple markup.

[BLANK_AUDIO]

So, if we're gonna build with mixins, we can just

keep the markup simple, without passing any classes to it.

And we have a plethora of variables available for buttons before you even

have to get in and, like, dig in and write your own mixins.

Not write your own mixins, include your own mixins.

So we have, like, padding, padding sizes, we

can choose how they're displayed, if they're going

to be, like, inline, if they're going to

be block and just, and fill the whole screen.

We can choose the font styles, other styles.

Pretty much anything.

So the quick way to make a button is

to include the button mixin in your class name.

And this will give you just the default button.

That's pretty basic, but you don't need to pass any arguments here.

This will just give you. There it is, the button.

But if you wanna get, get crafty, get sassy,

we have a ton of arguments we can pass

to buttons as well. You can control the padding.

You can control the background, the radius.

We can make it full width. We can expand it to fill it's parent.

And you can disable it too which will disable hover actions.

And it will kind of make it translucence.

One other cool thing to note is when you adjust the

padding argument, that will dynamically change the font size as well.

So that, if you make it like,

you know, 100 pixels or something, the font size

will adjust to be proportional, which is really cool.

So here's an example of a, a, a more complex button.

So we're including the button mixin, but we're passing a padding argument, a

background argument and a radius argument to create a more, a more stylized button.

Here, here's an example of that.

And the, the, the text color's changing automatically, too.

Because, we have built into, built into buttons, we have a function, we have

a function where we get the likeness of, the background color of the button.

And change the font color depending on how readable it's gonna be.

>> Now, you would still have to include or would you still have

to include the small class, large class expanded class or is there a mixin?

>> So, so what, no, so what you do, for that it's, it's in the padding.

So,

if you, if you'd want it to be small, you'd, you

would like you would include the variable for like $button-tiny for example.

And that would make the padding really, really tiny and

that would resize the font really, really tiny as well.

So, it does it on the fly. So.

>> So, it's, even though it's not like, small

and large are written in their padding controls def.

>> Yeah, the, like the, you have your, like your, your your padding classes.

Like button, button, button medium.

So, and there's, there's like button, like button large, button tiny, that kind of.

So like, if you, if you wanted to use those values,

you could just pass those to the padding mixin or padding argument.

But, you can clear your own value too.

Oh. Okay, Button base.

But if, if we, want to get really granular, you can

also, there's separate mixins for, for each one of these things.

We can build a button from scratch basically.

With a button base which will just give you like the bare bones.

It will just be like a container like of a border and some text, and that's it.

And, then we can add in styles, we can

add, we can add the button size and we want to pass the padding argument to that.

We can change the style, the background of the radius.

Again like, add inset shadow which is that little like shiny like white thing

at the top to make it look like a little bit more like a button.

And then we can add in how transitions work.

So, so an example of all these are

down at the, the bottom here, so here's the, here's the base button.

It's just, it's just text and a border.

Then if we want to add size we need to add padding to it so that's down here.

And then we can add style and then we can make it super fancy

and make it have, I don't know if you can see it from there.

Make if have like nice hover styles and

a little shiny inset shadow and nice transitions.

Sweet. So that is the gist of building,

building buttons in Foundation with SCSS. Super customizable.

There's a lot of arguments to work with.

And you can make a lot of like very different button styles.

Button Groups.

So now that we've made these awesome buttons, let's

look at how to make them work as a unit.

So button group syntax is pretty simple.

It's an unordered list with list items and

anchor links that are buttons inside of them.

We can this is, this is the basic like default markup.

It's a little bit presentational. So we can change that to whatever we want.

We can call it maybe the tool bar and change the button class names.

And it's built on top of buttons.

So again you just create an, an order list.

You create your list items. And then you put buttons inside of them.

And the classes that you make for buttons, so like all

those classes that we made before, will work in a button group.

It's super easy.

So here is an example of the button group container mixin.

So this just

defines a whole container is like, this has a button group inside of it.

And then to apply a specific styles to the button group.

We actually apply those to the list items and not in the container itself.

So we need to do the direct child selector of

the list items and include the button group style mixin.

And then from there, so inside the button group style, we can adjust the radius

of the whole group.

So, it'll just like if you pass the border radius, it'll adjust the radiuses, or the

radii of the ends, but not each individual

buttons so it'll like, be like one cohesive unit.

You can also make it even, so all the buttons will be

the same width, and the whole button group will fill its parent.

And you can adjust how it'll float, so if it'll float right or left.

>> So that'll respond to

mobile, then, it''s respond to that. >> Yeah.

Yeah, absolutely.

>> How about using an inline grid for that?

>> [LAUGH].

>> Right there, if that's what I'm doing.

>> Yeah, so here's an example, so basic button

group then like here we pass the radius to it.

And here's an even button group so it fills it's parent

and it just, they stay the same width no matter what the size is.

It the like this would break if you had a small screen and you had like 12 buttons.

It would just make each one really small and the text would overflow.

That's that's, that's worth considering.

But, but if you have like a sigmatic

control on a mobile device, like, it's just perfect.

>> What type of platform?

Would it use h class or would it use the anchor type platform?

>> You can, you can use the button class on a, on

an anchor link, on an input button or on a button element.

So it doesn't really matter which, which element you use.

>> Is it okay [UNKNOWN] practice to use?

>> It depends, depends what you're using it for.

So, if you're, if you're building a form for example,

it's probably better to use the, the submit input, right?

But if you're, if it's just linking to new,

to another page, it's better to use the anchor link.

So that's, that's kind of, that's the idea behind the practice.

[BLANK_AUDIO]

All right. >> [SOUND]

>> Alert, alert boxes. >> [SOUND]

>> So alert boxes are similar looking to buttons, similar in how you build them.

But they're more of a global element and they're definitely simpler.

So, the basic markup for an alert box is you have your class that

you want to be an alert box and inside there you have your message.

We have.

>> Can you wrap in a p tag or not, does it have to be?

>> Any block level element could be, but,

you're going to have, yeah, it'll be fine, yeah.

wait, wrapped in a p tag, or? >> The message

>> Oh yeah, it can. >> I mean, I just that you

>> It can be, it doesn't need to be.

>> Okay

>> If you, if you wrap it in a p tag, it's

going to like add more margins and padding because there's like some default

stuff in there. so, you'd, you'd have to collapse that.

But I just, I wouldn't do it.

But you, but you, but you can, you're not restricted.

so, again we have a number of

variables available for alert boxes, similar to buttons.

Border, font styles.

We also have close button styles, which we'll look at in a minute.

You can add a little like x for to, to close the alert box as well.

And to style an alert box, again we just pass the alert mixin.

And that gives us

this guy here.

We can also just build it from, from the base.

So include the alert box base and that'll just give us the outline and some text.

And then we can style the background color from there.

You'll notice that there's not, there's not nearly as

many arguments for alert boxes as they are for buttons.

And the reason behind that is alert boxes um,we

think should be much more of a global element.

They're for special moments on the site.

Like when we get a message and we get an alert or a notification.

So it should be consistent, the user should, like,

know immediately, like, what that is when they see it.

So we're keeping the size and like everything consistent.

But you can kind of change the color and the border a little bit.

But as long as everything's more consistent people

are going to know what that is more readily.

We can also add a close button to

the alert box as well.

it's just an anchor link with whatever class you want.

We're calling it close because that's what it does.

It's pretty semantic.

And, the character in there is just the multiplication symbol, because it's a nice

symmetrical little square x, but it can be whatever you want it to be.

And then, we just pass the, the alert close mixin to the close button.

How does this tap in to your, your colors

like your warning, your alert colors, your success color?

>> You can you can add whatever like color variable you want.

So like.

>> So like background [CROSSTALK].

So like background you could say, you could say

like this could be like Alert Error or something.

And then or it could be cause an

error and then for your back ground color you would give it like

the, the error color variable or the alert color variable, something like that.

So you can use your alert color variables or you can use a different color.

We can also add a radii, radius to our alert box as well.

So

the examples of alert boxes. [INAUDIBLE]

might as well close button you can click on.

You'll notice they it's, it's not, it's not quite vertically centered.

That's because it's, it's center with a box itself.

Not on the, not on the, the message that's

in case, the message goes down two lines or something.

The button itself won't really interfere

with the message and, it'll still feel in place.

But, you can always adjust that with, with SCSS, just like

bump it down more a few pixels position relative or something.

And

last but not least, panels. Panels are another pretty global element.

like, like alert boxes that don't have a ton of arguments

but they're pretty universal and we'll look at how to build them.

So, a panel is just a div or anything.

A panel can be any element.

Recommend you do some sort of block panel element

or some element that's set to display as block.

Because it's gonna contain con, it, it's purpose is just to contain content

inside of it.

So we'll just use in div here cuz it's generic and we're doing it a class.

And we have a panel of variables to work with as well.

This should look familiar by now, background, border,

layout, font colors and we have mixin defaults.

So if you, if you include just the panel, you'll get

just the default panel from Foundation with no special styling or anything.

But you can pass arguments to it.

You can pass a background in a padding argument,

for example and that will give us some custom panels.

Here's an example of that.

So, here's a basic panel.

It's not styled or customized or anything. It's just a default foundation panel.

But down below here, we've added some padding.

We've added some background color and the

border color is generated from the background color.

So it all stays consistent. So this is an example of a custom panel.

All right.

So we've looked at the grid, buttons, button groups alert boxes and panels.

So what about the rest?

There's a lot of other components in Foundation.

almost, almost all the UI elements can be, can be built with mixins.

All the CSS components can.

For things that require JS plugins or things that have

a lot of moving parts, many of those s, s,

still rely on presentational classes for now.

We are working on like, porting those, like, making

those more dynamic and making mixins out of those.

With Reveal now, you can create, the modals with with mixins.

But for, but, but things like Orbit or, or the top bar things that

are, where there's a lot of moving pieces in like, things that are pretty bulky.

We, those, those are still pretty, like pretty set,

they don't have mixins, a lot of mixins for those yet.

But it's a work in progress. >> [SOUND]

>> [FOREIGN] >> Thank you.

>> All right. So that's it.

Any, any questions?

Any, any other things you guys want more detail on?

>> Yeah, you just actually answered the modal question I was about to bring up.

>> Oh, okay.

Great.

>> Cuz those seem to be very common requests

these days, everyone wants to go to the third dimension.

>> Yeah, yeah.

>> So we use just JavaScript to do it, right now.

>> Use JavaScript

to define the mode.

But you can, the, there's mixings available now to.

>> So you can take out, you can make the class,

be more semantic about taking a lot of the classes out.

Yeah, like you could like, you could like, if

your, if your modal was a sign up form, you

could call it sign up form and then we

have mixins like, at included, that kind of thing so.

>> Oh, okay.

So you can get more of that into the CSS then.

>> Yeah. >> Mess around with

CSS. >> Yeah.

Absolutely. >> For like modals And stuff like that.

>> Mm-hm.

>> Why would you want to, I'm curious as to why

you might do a mixin rather than a placeholder in that instance?

>> It's a, it's a, it's a good question,

yeah, I would be willing to do a

mixin, in case we're like include various functionality.

If we wanted like

if we're have like for instance a default, a default modal but

like maybe in one case we'll have a modal plus like plus this.

And like dynamically change font sizes and things

like that we would have a mixin for that.

>> You have really good documentation on your site for it also.

For doing this thing. [CROSSTALK].

I must say I, I've used Foundation 3 many times.

>> Mm-hm.

I'm using Foundation 4 on our current application.

>> Mm-hm. >> and it's like

amazing I love Foundation. >> Thank you.

>> It's like the bomb.

And the setting all the Sass that you have that

stuff is, it's like so fun to use and so easy.

I recommend everybody try it.

And it, it's awesome it's a game changer,I think.

>> Thank you.

>> I'm an advocate [LAUGH].

>> [LAUGH].

>> I learned some new stuff on that I, I realized that I'm not using mixins as

much as I should. >> Mm-hm.

>> Because I was getting in the habit of not using them, you know?

>> Yeah, yeah exactly.

>> And now, I'm like," Oh, how am I going to

refactor and bring all that stuff out html and put it in?

Yeah, it, yeah it, like, it, it requires you

think ahead a little bit more kinda plan things out.

But it makes things really easy to change like after

you have things built it makes things way easier to customize.

[NOISE]

>> One other thing.

>> Yeah? >> A lot of people that I work with

have a really hard time dropping IE. >> Mm-hm.

>> It's just like an enterprise addiction.

>> Sure.

>> So I see you have this IE8 finished for

CSS, Is that, I guess it's all like a 100% but.

>> It's not 100% so we don't officially support IE8.

We do have the IE8 commission for grid which is

a port of definition three grid with definition four classes.

SO you can include that in IE specific style sheet.

And like, there's also, there's also [NOISE] what, what js plugin was it?

There's a, there's a few, a few poly, polyfield plugins you can play with.

>> Right.

Yeah. Yeah.

It's just

>> To make things work. >> You, you still have to branch.

>> Yeah.

>> like, a little bit. Okay.

>> Cool, alright. >> Other question?

>> Yes.

>> Can you show us like the coolest site built with Foundation.

Doesn't look like a Foundation site?

>> The coolest site built with Foundation

that doesn't look like a Foundation site?

[LAUGH] Hm. Let's see.

>> [INAUDIBLE].

>> The Embassy properties. >> [INAUDIBLE].

>> I'm gonna close all this.

[UNKNOWN] >> Uh-huh.

>> What was yours?

>> [UNKNOWN] IUN. >> Got it.

There it is.

>> [CROSSTALK].

To answer your question when you do a live conference from a Foundation.

Can you, can you go click on clothing or something?

>> Sure. >> So we actually, they have a feature

called block grid, where you can place like n

number of elements, sort of like four elements there.

And there's like, we can customize it for large and small.

So when you resize, it actually, on a

tablet, it shows you like two elements per row.

So, [CROSSTALK]

and then when you go to your mobile it shows

you, so actually extending that to an extra small screen.

So on a mobile it shows you just one and we have a [SOUND]

[INAUDIBLE] layout they have to be creditors.

>> Here the argument allows like [UNKNOWN] look

like Foundation or another one [INAUDIBLE] app, whatever.

I think that's a bs argument because.

>> This Foundation is built specifically so that, I

mean it doesn't look pretty out of the box.

Like it's, it's very basic, it's built because with the,

the idea that you're going, like going and customize things.

In a sense, it's built to like in purpose to make

it as easiest as possible

>> And I chose it, 'cuz I was like, I was like, I need that, I need that.

I was gonna either. Mm hm.

>> Build all these things from scratch. >> Yeah.

>> And basically built on another foundation, or just use Foundation.

So I was, like, it was a no brainer.

>> Yeah.

>> 'Cuz it, there's so many things in it,

you know, that you're gonna end up building your way.

>> Yeah. This was also built in Foundation.

the, the Treehouse marketing site.

Another whole app for the marketing site is built on Foundation, as well.

Finished in three, I think, a little

bit older, but it's still the same components.

>> I have another question for you. >> Yes.

>> I'm sure you get this a lot.

>> Mm-hm.

>> What's your take on a Bootstrap as a foundation.

>> [LAUGH] He tries Less.

>> Well Bootstrap is on Less.

>> Yeah, they have a Sass version, but officially it's less.

>> Spanish.

Yeah.

>> Their code, the official code is is like Sass.

>> I haven't so, in all, in all fairness,

I haven't actually, I'm not up to date on Bootstrap, Bootstrap 3,

so I can't, I can't quite, so, I can't quite speak to that.

But, Foundation is, again, it, it, it's

built, it's built to be highly customizable.

It's build so that you can like, put your own design on top of it.

Whereas Bootstrap is like super shiny out of the box.

And it's, it's, it's purpose we see it as more of a kind

of like more to have something that looks great right out of the box.

But it looks like very Bootstrappy, it looks

like, as various things to look and it's like.

There's like, there's like apps out there to customize it and stuff.

But basically it's not, it's not as easy to do out of the

box whereas Foundation was built specifically

like to put your own design onto.

So that's, that's, that's the the basic, basic laws.

Anybody else?

Any other questions?

[SOUND]