7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Foundation

Foundation is a responsive CSS and JavaScript front-end framework. It gets you quickly started with building a website by providing many of the common UI components.

Prerequisites
  1. CSS, JavaScript, jQuery
  2. SASS
Resources
  1. Foundation main website, docs and its Github
  2. Foundation Tutsplus screencast course
  3. Responsive design Tutsplus screencast course
  4. Responsive CSS framework comparison

1.Introduction
1 lesson, 04:44

1.1
Welcome
04:44

2.Boilerplates and Scaffolding
4 lessons, 1:00:43

2.1
HTML5 Boilerplate
10:13

2.2
Twitter Bootstrap
09:29

2.3
Foundation
19:41

2.4
Yeoman
21:20

3.Markup Abstraction
2 lessons, 28:06

3.1
Emmet
15:47

3.2
Markdown
12:19

4.CSS Abstraction
3 lessons, 47:51

4.1
Sass + Compass
19:37

4.2
LESS
14:47

4.3
Stylus + Nib
13:27

5.HTML and Javascript Abstraction
2 lessons, 20:37

5.1
Jade
15:16

5.2
Haml
05:21

6.Javascript Preprocessing
1 lesson, 13:22

6.1
Coffeescript
13:22

7.Templating
2 lessons, 28:41

7.1
Mustache
15:17

7.2
Handlebars
13:24

8.Workflow
4 lessons, 44:14

8.1
Mobile Debugging
07:20

8.2
Local Web Servers
10:19

8.3
Autosave
08:38

8.4
Chrome DevTools - Inspect + Debug
17:57

9.Conclusion
1 lesson, 01:25

9.1
Conclusion
01:25


2.3 Foundation

Foundation by Zurb is another front-end framework, where we can use CSS and JavaScript and also HTML to fill up various UI components in our web project. For this version, we will be using Foundation version 4 which is by default already responsive or rather fluid. it will adapt to the design, according to the width of the browser. Briefly, let's look at two websites associated with Foundation. The first one is definitely the GitHub. If you want a detailed look at how you can contribute, as well as look at the source code, have a look at this. The second one is for our daily use of Foundation. This is the Documentation. Over here you will see briefly what is exactly Foundation by looking at the outline of it in the sidebar on the left. So as I briefly mentioned, Foundation consist of many different small UI components. For example, it consist of the grid to layout our project or navigation in terms of pagination or breadcrumbs. Or buttons, forms, typography. CSS components include things like alert boxes or some panels or even a pricing table. And finally there are also JavaScript UI components. So for example, if you have a little dropdown or a reveal in terms of modal windows. So we will be covering both the CSS as well as the java script part of Foundation integration into our every day web project. And soon you will realize, how quickly we can get up a clean look web project with just a Foundation. So let's start with a downloading Foundation into our local machine. Once you click the Download button, you'll notice that it will bring us to this page, which will have three options for us to download Foundation. The first one is Default and this also means that all the components will be there for example, in terms of buttons. Everything will be there. Forms. Everything. Basically all the UI components that Foundation has to offer. But if you go into Custom CSS, you can basically pick and choose exactly the ones that your project needs. Finally there's also a Sass component. Now Sass is a CSS pre processor. If you're not aware of what Sass is, I will be covering it in the future videos. And if you want to customize your project and add in code, you can use Sass because Foundation is built using Sass and then the team will compile Sass to CSS. All right, great. So let's get started with the Default version of Foundation CSS and JavaScript so that we can basically have everything to play with. So I'm gonna click the Download button, and once we unzip the folder, this is what we will see. As you notice, it will already come with a bunch of files that will help us get started immediately, it's some sort of a boiler plate, so let's first transfer the index of HTML into our project folder and if you open this up in a text editor you will find that the head, the body tag, and so on so fourth will already contains some code. Now for the clarity of it, let's go part by part. So this is the doc type and there we have some conditional comments which will help us cater to older legacy browsers. Now this seems really familiar to what we covered in HTML5 Boiler Plate, isn't it? Now once again, the key to tackling these sort of boiler plate frameworks is to look at them part by part. If you wish to take the HTML 5 Boiler Plate Code, part of it, do go ahead and use it as well. Next we have the head code there, some general metatags, the title, and next we have the link tag which basically links to the Foundation CSS file. Let's come back to our Foundation, the original Foundation that we downloaded. And if we come back to the CSS folder, wow, there are three of them. So normally the CSS will basically give us a consistent style across all browsers. So for our purpose we'll just use the foundation.min.css. Of course, if you want to go ahead and read the code. Do go ahead and use foundation.css in your development environment. Great, so once I come back to get start and HTML, I will need to change this file to foundation.min.css. Let's let me clean up a little bit. We also have a modernizer as JavaScript, now for the sake of simplicity let us remove all the JavaScript links. Later on when we use the JavaScript components we'll come back to it. And finally, let me just clean up the entire body and there you go. We are all ready to start using the components of a Foundation starting with CSS. Obviously, as you noticed this will be completely empty. So let's get up and start with some grid layouts. So in Foundation, you will have each of the row defined in the simple class of div called row. Foundation will divide the layout into 12 grid columns. So firstly, you will have the columns in terms of class defined. And then Foundation will also have this class called large and then dash. Here you can put the width of the columns. So for us let's just say four. And inside here let me just include some dummy text. Great. So we are already seeing the first grid column. And since there are 12, so 12 divided by 4, I will include two more columns. And each of this, div tags will be four columns wide. Now you might be wondering, well, this is not four columns wide. This is like single column, isn't it? Well, that is the beauty of Foundation. Now, notice what happens when I increase this width of the browser. So here, you will see equally divided three columns and each of them have width of four. Now, what if you want to also do the same for, say the mobile version. So for mobile, you will add a class called small. So let me just demo that. So you will have small. And then with a dash you can once again define the width of the column. So four, four, four, that makes us twelve. Why don't we do something different for the mobile? So let's say the first column will collapse into just two column width and maybe the second one will be four. And that's two plus four, six. How about the last one we'll just fall back to six. So that will give us 12 columns. There you go, this will be two width, four width, and then six. So once again, when you have bigger browser width it will be equally distributed. And when you have a smaller one it will be distributed in a ratio of two is to four is to six. So in this way it makes our design instantly responsive and guess what? All you need to do is include the class names. This is how Foundation or rather Boiler Plate frameworks can get you started very quickly. Once again, under the Documentation grid do go ahead and try the other types of classes that are available for our experimentation and layout of the page. Next, briefly, let's explore Navigation. Once again, it comes with various components. But for the sake of simplicity, let's explore bread crumbs. So once again, it will give us this very simple bread crumb layout that is available for us to extend upon. And it will also give us a pseudo code or a sample code for us to use. So I'm just gonna copy this and why don't I create a new row, and inside that let me just paste in the breadcrumb code. And once you do that, notice how you have the breadcrumb immediately happening, thanks to all the CSS classes that are appended. Why don't we extend it? Let's say along with home and features we also have say an About page and we also have a Contact page. And immediately, you'll see that you'll have the design applied to our web page. And this is of course the current one, and this is a disabled bread crumb. Similarly, let's go ahead and explore some buttons. You will realize it is so easy to put in some button and it's classes. Now in terms of buttons, this will very much remind you of Twitter Bootstrap as well. So we can basically change it's size, color, radius and even disable it all with the use of classes. Now one thing we can learn from here is how modular the code is. If you want to and that is why sometimes I do use this boiler plate framework to even learn how to code better by looking at its source code. All right, so let's go ahead and start with the simple anchor tag, which has just one class called Button. So once again, I'll do it inside a brand new div called row, and let me just paste in the simple default button. And there you go. This is how a default button will look like. Let's try out some size. How about tiny. That was really simple. How about large. And there you go, within an instant of changing the class we have a different size. Now I also want the color. How about alert? So that will give us a red color. Or how about success? And that will give us a green color. Now notice with classes we can add and take away one. So let's say now we take away large, it will basically fall back to the default size. And there you go that was slightly smaller than the large. Let's add on. How about some shaped red. If we add to this class called Radius, notice how the corners will be slightly curved. Let's say you want a lot more curved or even a rounded button. So for that, we have a class called Round. And there you go, that was a rounded button that is success, which is green in color and finally you can add and disable to say that hey, this button is not for use and to give us a slight fade color. Finally, Foundation also comes with its own header tags. So for example, like this, this will be header one. Or you can even try a paragraph like so, so it will have it's own line height and font size and so on and so forth. So it's just as easy as applying the tag. Lastly, after the various UI components, I wanted to show you this thing called CSS components. This will consist of a slightly more complicated style which we also very frequently use in our projects, for example, a pricing table or even, let's say, a progress bar. These are all made for us right there ready for us to use. Why don't we try the Progress bar? So once again, I will just include the Default progress bar style and there you see, this means 100% complete. And it is success and round in the shape. You can also notice how to color and the shape, class names are kind of same across the buttons or even the progress bar, so it is very used to sort of remember the class name and use it again and again in the same context of size or shape or color. Finally if you want the color to be slightly, like not 100%. You can also include in inline style which will be, well let's see, 5% this time. And there you go, the progress bar will be 40%. Finally, we will play with some components that are built using JavaScript. Now there are many such components, but let's just play with the reveal and maybe tool tip as well. If you look at kind of installing the JavaScript part of Foundation, you will realize that firstly Ffoundation JavaScript components depend on a library called jQuery or Zepture. Also you will realize that Foundation JavaScript needs a modernizer, which acts as a shame for HTML file elements. So let's go ahead and add a modernizer as well as jQuery in our library first. If you come back to the downloaded version of Foundation that we did from the website. If you go inside the JS folder, you'll find that inside the vendor they will very conveniently already include jQuery Zepto, as well as Modernizr. Now, for my case, I like to actually still go ahead and include mine. For example, in this case, the jQuery is an older version. You might just want to include a more updated version. So for my case, I will go ahead and go to this side called cdngs and let me firstly search for modernizer library and I'll copy the entire thing. Come back to my code and just before the body tag, I'll include it inside the source, there you go, and similarly I'll do the same and find jQuery. Now we are all ready to include the Foundation JavaScript library. Once again if we come back to the downloaded folder, here you'll see Foundation One folder, and if we open this up we'll see that there are many Foundation folders here and if we kinda read the file names, you'll see there alert clearing, now that looks kinda familiar and there you go we have one for tool tip and one for review. This means to say if you want to use a specific a JavaScript of library that are dependent on Foundation go ahead and pick and choose those exact ones. And if you see this name such as JoyRide, Magellan, Orbit, Reveal tool tip, guess what? They actually correspond to exactly the same as a documentation. So it's pretty clear on what you should be including if you want to say use Madeline. But for our case we'll just keep it simple and I'll just take the entire JavaScript library. So I'll just copy this and paste it here. All right so now that we have Foundation in our project, we definitely need to have another script tag and let's include it here, foundation.min.js. Great. So now that we have included the relevant JavaScript libraries, why don't we go ahead and include the model other review UI components. So I will once again just put it inside a div called row. Let's find reveals so there you go, this is reveal. And so the very first thing we will have to do is of course include the anchor tag. Which we will click and that will open up into a window. As usual Foundation will already give us some sample code to work with and extend upon. I'll just use the sample code. Let me just paste it here. And next we also have the modal box itself. So let me just go ahead and there you go. It even gives a little example on how it will look like. I'll just get the modal box code as well. All right, great, so we have the anchor tag and the modal box. Let's look how it, seems like in the browser. Once we click this the model of the window should appear. Obviously, nothing happens because we need to call Foundation. So all we did here was to include the libraries. So let's go ahead and include the Foundation specific function to call reveal. So firstly, what we need to do is initialize Foundations so that will be document.foundation. Next we need to call this id with My Model, so let's do that once again with jquery. I'll say #myModel and then a .foundation. All right so let's try that out. So when we click here, there you go. The little model box pops up. And when we close it it just disappears. Now once again, you'll notice that because Foundation is also responsive. Notice what happens when I click it, in a bigger browser width it basically expands throughout the scree, isn't it very neat? Now along with reveal which is one of the UI components, let's also try out tool tips. So what a tool tip does is that when you hover over it. It will basically give us a little hover text, but notice we can also style it like for example, it will can come from the bottom or it can come from the top, left or right. Let's try this out with the default code that it has given us. So once again, I'll just copy this. And let's use the tool tip as part of the paragraph here. All right, so there you go. I have used it here now, since I have already used the JavaScript required libraries here, and called on the Foundation that initialized it. Once we hover over it, guess what? The tool tip already appears. Now by default, if you notice the tip is coming at the bottom and let's try out how about some left. So if we include the tool tip here, the class has tip, let's also include another one and call it tip-left, and now when we try to hover it, guess what? It will still be at the bottom but, of course that was for responsive design, but when we try to hover over it in a bigger browser it will be on the left, and if you do a right, there you go, it will be on the right. So, that was a very brief introduction to what is Foundation now, the key to using Foundation is to go through the documentation. And understand each of the components and the classes on how we can apply these styles too. Finally, I wanted to point out that, if you want to extend upon the Foundation, you will have to use Sass, which is a CSS pre-processor. And with each of the components, for example, with Grid if we kind of click and go through the documentation. You will see that towards the end it will also come with a lot of sass documentation. For example, some variables or even some mix-ins on how you can not only use it but also customize it. Finally, some links related to Foundation. There is actually an entire Tuts+ course on it by Craig Campbell. I highly recommend you to check it out because he will actually go through each of the UI components in detail in each of the video. There is of course another Tuts+ course on responsive web design that I highly recommend you as well. Because as you know we are always not only coding for the desktop environment but mobile as well. So, do go ahead and check this out because Foundation 4 is responsive all the way. Finally, with the big relation to Twitter bootstrap that we did in the last video, and Foundation in this video, and then there is another framework called Skeleton. So as you can see, there are CSS JavaScript frameworks are basically front and frameworks that allows us to have a lot of UI components. So what are the differences? I believe the best way to truly understand the differences is to quickly download them and try out the different classes, notice whether you like this tile, whether if it suits your project, but I felt that this website gave a very brief very good overview and comparison between all of the frameworks. So yep, that was a brief introduction to Foundation. Do go ahead and try it out, the documentation is really simple to get you started. And most importantly get you started in quickly starting a web application.

Back to the top