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