Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Before we get started talking about all of the wonderful features and functionality built into Bootstrap 3, I thought you might want to know a little bit of background about what exactly Bootstrap is. Bootstrap is a responsive design framework. Which is designed to help you quickly and easily build static websites and web applications. So you can either just work with the static HTML as it comes to you with Bootstrap, or you can combine this with something like PHP or a content management system.
And you can actually turn this into something that's more dynamic in nature. Where Bootstrap is controlling the front end design of your website. Bootstrap is currently the most popular project on GitHub. GitHub is a repository of a bunch of different open source projects and the popularity of these projects is measured in stars. And Bootstrap has more stars than any other project on GitHub by like, a lot. It's extremely popular with back end developers in particular because Bootstrap is a great way to build a very simple.
Front end design for a website without having to know a ton of HTML and CSS. Bootstrap's used by a number of different organizations like NASA, and the state of Kentucky is using it, Medicare, Discus, and many, many more. And I'll give you some examples of those and places where you can go to find examples about Bootstrap. If you go to builtwithbootstrap.com. This is one of three different portfolio sites that I'll show you that contain examples of sites that are built with Bootstrap.
That are customized at various levels and abilities. Lovebootstrap.com is another one that will show you several of these fabulous bootstraps sites that are portfolio worthy. And officially on expo.getbootstrap.com, this is a portfolio of different Bootstrap sites that have been noticed by the actual developers of Bootstrap and highlighted here on their website. So a little bit background about what's new in Bootstrap 3, there's a bunch of great new features.
First of all, Bootstrap 3 has been built, once again, from the ground up, to have a mobile-first approach. This means that the way the grid system in particular is designed is, for you to think about how you're going to layout your designs first on small screens, such as those that come on a mobile phone. And then you can scale up the size of those designs to larger and larger environments. We'll see some of that coming up in the system that talks about the grid system for Bootstrap. There's only one grid system that is shipping with Bootstrap this time around.
Previously in version two, we had a fully responsive grid system and an adaptive grid system. This time it's just the responsive grid system. But a lot of functionality has been added to it. There's four different sized grids and extra small, small, medium, and large sized grids. And we'll work with all of those in the chapter on the grid system. Bootstrap is dropping support officially for IE7 and for Firefox 3.6. So those older versions of Internet Explorer will no longer be supported. And it will be supporting Internet Explorer 8 and higher.
You do have to make a minor modification. To have your sites work with Internet Explorer 8, and I'll go through that with you in a upcoming video as to what you need to do to make your sites work with IE 8. If you don't make that particular modification and just work with Bootstrap out of the box, it will work with Internet Explorer 9 and higher. Finally, one of the wonderful things that's shipping with Bootstrap this time around, are some fonts that can be used as icons in your designs. Previously, Bootstrap shipped with a series of image sprites. Those are just the little icons, maybe a hundred or so of those on a single PNG file and the pieces of the PNG file will display depending on CSS that ship with Bootstrap, which was nice but it meant that you couldn't scale up the size of that particular icon or change its color easily, because, of course, those are rastrographics.
Since we're now going to be working with fonts, those are vector graphics and we can recolor those on the fly or change the look of them pretty quickly and easily and I'll show you how to do that in a future video. One of the most common questions I get is whether people should be working with a responsive design framework at all, like Bootstrap, or its closest competitor, Foundation. And, my answer to this question is always the same. It depends. It depends on what kind of problem you're trying to solve. If you think about front-end web design over the last few years, there are a couple of approaches that we take to that. Really it just boils down to two.
We either think about front end web design as something that comes off the shelf. We purchase a theme or a template that's used for a content management system, and we plug it right on into that content management system. Maybe we change a color or two or drop in a logo. And we're done. We have a front end for our website. Or, we think about a fully-customized solution where we go and hire a graphic designer. We do three rounds of designs, we do two rounds of divisions. We slice and dice up these beautiful comps and we create our own custom HTML.
Every single time. It's an expensive process, and we may not necessarily reuse a lot of the code that we write from one project to another. I'd like for you, though, to think about these responsive design frameworks as a middle ground. Some of the work is done for you, so that you don't have to think about certain aspects of your designs. For example, the grid system is a great way for laying out webpages. You don't necessarily need to write your own grid system for every website that you're going to be building. It's still very, very customizable. And Bootstrap, with its very flexible CSS, including the LESS CSS. LESS being a CSS pre-processor system that you can use to centralize your styles. This allows you to.
Make Bootstrap look exactly as you wish it to look. But best of all, Bootstrap never has to look like Bootstrap. One of the common criticisms, especially among graphic designers, is that all Bootstrap sites look the same. That doesn't necessarily have to be true. It's only true if you want your website to look like a Bootstrap site. And some people would just like to get a quick prototype out there. Maybe they'll just use Bootstrap off the shelf, maybe change a color or two, and call it done. But if you wish to customize lots and lots of styling in Bootstrap, you certainly can.
There are of course disadvantages to working with the frame work as well. There's a lot of code bloat that people talk about in regards to frameworks, and what they mean by that is they may take ten or 20 lines of code to write, while for a custom side might only take a line or two of code, and of course the reason that so many lines of code are required in a framework is to increase the flexibility of the framework to address different styling situations. So while the code that you might write for your own custom site might be more efficient, the code that you're going to get from a responsive design framework, has definitely got a lot more, stuff in it.
And the reason why is because it has to address a number of different situations. So your code's not going to be as efficient with a responsive design framework. And of course you have to learn the responsive design framework. That can be a deterrent to some people. You have to actually learn somebody else's code and you have to know how to work with it. So, should you use a responsive design framework in your own work? Well, it depends. It depends on how much control you want over the situation. How much control you need over your project, whether you have the time to go and learn somebody else's code or not.
But I would encourage you to think of these responsive design frameworks as a way to get a lot of work done relatively quickly, that you can deliver more customized solutions to you clients. And for your websites than you can writing a bunch of custom code out of the box. You can get more done, more quickly, maybe make yourself a little bit more money too in the end and still have pretty decent quality code and a pretty good project.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.