SOURCE: https://www.youtube.com/watch?v=02UR0k2JE04
In this lecture we're going to start introducing Bootstrap which is a CSS framework. One of the most popular CSS frameworks which was made by the engineers at Twitter.
Now what is Bootstrap? Well, Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. And this is a direct quote from the Bootstrap website. Let's take it apart a little bit. First of all, it's the most popular framework. While GitHub, which is basically a large website with code repository that has a social component to it, has over 90,000 stars or likes of the Bootstrap project. So it's the most popular project on the entire website. And it's been forked over 38,000 times.
Bootstrap consists mostly of CSS. It pre-defines a lot of CSS classes for you. So you know, a lot of the times, especially with a user interface that's a bit more complex than just a single HTML element or something, CSS needs to target a certain HTML structure. Well because of that reason, Bootstrap often times requires you to have a particular HTML structure in your HTML page. In practice, however, it's not as scary as that sounds. It doesn't really invade your HTML code and make you write some crazy HTML constructs. It just asks you to add an extra div here and there and give it a particular class so that the CSS Bootstrap defined would apply properly. Its JavaScript framework shouldn't be overlooked either. It has a very cool JavaScript framework actually based on the J Query APIs and plugin architecture that lets you put in, and lets others put in, different plugins that really enhance your website quite a bit.
Bootstrap is also called a mobile first framework. Now what does it mean? Well in general, the term means that you deal with how your user interface is laid out on the mobile device first. In the reality from what I've seen, there are two approaches to what this means. There's the purist approach, which says you code your mobile version first. And the claim is that it really helps your content strategy. How are you going to lay out your content, what the content should be. It really forces you to think, what's really important in your content that you're about to present. There's also a second approach to what mobile first means. And I will call that not 100% purist approach. And I kind of count myself among that type of thinking group. So the idea there is that you plan for mobile in your styles. But you can start coding with desktop version first, if it feels more comfortable for you, or if it just makes more sense for your project. I can just feel all of the user experience pure so in the beginning upset at me for saying that. Well. So as far as coding is concerned, I would say either approach starting from mobile and going to desktop or starting from desktop and going to mobile are really two valid approaches.
However, everybody will agree on this, that mobile first definitely means is that you plan for mobile from the start. You don't ignore it until the end or the middle of your project. You plan for it from the start. And they also agree that CSS framework, whether written by you or you take something like Bootstrap, should be mobile already. And what that means is is that it shouldn't be again an afterthought. Where after you set up your desktop version somehow you have to write some or include some other CSS that would now kind of magically try to turn this, the entire website into this mobile website as well. And interestingly enough, Bootstrap wasn't always a mobile first framework. It used to be, I forgot which version that was already, I think maybe 2 or something like that, that Bootstrap had a separate CSS file and separate set of classes. If you wanted your website to be responsive or be basically be able to be viewed on mobile devices as well. But nowadays, Bootstrap is a mobile first framework. So are there any disadvantages of using Bootstrap versus for example writing your own, like we did with the previous lecture. Well the number one complaint, the disadvantage of bootstrap, is that it's too big and it's too bloated. And what that means is there's a lot of features in there that you will probably never use. Well, the mitigating factor is you could use selective download on the Bootstrap website and only download the features you actually think you will use. But the truth of the matter is even though it is a little bit too bloated, It's not really that bad. And the claim also is that you could write your own framework that's more targeted and therefore much smaller. Well, that may be true, but it will take you a lot longer to write it. And certainly take you a lot longer to write it just as well as the guys at Twitter did. Which they put a lot of thought and a lot of painstaking decisions into every little turn that you'll probably just not have the time and the bandwidth to deal with. In part two of this lecture, let's jump into the code editor and take a look at what a basic barebones HTML document looks like and how to properly set it up.
Video Images
0 comments:
Post a Comment