Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Introduction to bootstrap
0:02 Do you remember that scary page from the web design section?
0:05 It looked like this, it was just plain basic HTML, zero styling.
0:09 My contention was that most of you were like
0:12 "oh my gosh, I don't even know where to start when looking at something like this"
0:15 to try to make it look like AirBnB or something beautiful.
0:19 If we just take Bootstrap and drop it into there,
0:22 you'll see it already is going to look quite a bit better.
0:24 So it will look like this.
0:26 Now, the title slightly changed but other than that it's identical,
0:29 other than just including the Bootstrap CSS,
0:32 but notice how much more pleasant it is to look at.
0:35 How much nicer the words are in terms of reading.
0:39 The line height changed just a little bit, the fonts and spacing,
0:43 the spacing between the letters, the spacing between the lines, all of that,
0:47 the typography is much cleaner, the headings look better,
0:51 the colors are adjusted a little bit.
0:53 Bootstrap, just by including it, will take any page and make it look a little bit better,
0:59 but we want to go a lot farther than that, remember, this is our goal,
1:02 this is the landing page or homepage of our Blue / Yellow Rocket Band.
1:07 Now, let's just do a quick tour to point out some various pieces
1:12 that we are going to see on our tour of Bootstrap.
1:14 So we have this navbar across the top, that comes from Bootstrap,
1:18 you can't see it because I am not resizing the screenshot,
1:20 but if I did, you would see that that is a responsive design
1:23 that turns into a slightly different version on mobile than it does on wide desktop screens.
1:27 We have nice looking call to action buttons,
1:30 albums, upcoming events and "get notified",
1:33 we have this big banner, this hero image to call out to people coming to our page
1:38 to just let them know "boom, here is the band",
1:41 like you are on stage with them here,
1:44 and this is part of one the themes that we are going to bring in,
1:48 you can see the form about getting notified looks pretty nice,
1:52 that comes from Bootstrap, both the button as well as the form and the way it behaves,
1:57 from some of the form controls in Bootstrap
2:00 and the image and the upcoming event below the up above picture of the band there,
2:06 that's actually in the grid layout so that image itself is responsive
2:12 so it changes based on the size that it has to work with,
2:15 as well as those two components, they don't just crush themselves together,
2:19 they fall one on top of the other when it gets too skinny like on mobile as well.
2:23 So all of this is going to come from the Bootstrap grid layout and image classes.
2:28 So with that in mind, let's go take a quick tour of Bootstrap.
2:32 Now, you may be tempted to pull up bootstrap.com, that's not Bootstrap;
2:36 getbootstrap.com, that's where Bootstrap lives, just remember,
2:41 there is some sort of the weird site just at bootstrap.com.
2:44 So here we are at getbootstrap.com,
2:47 notice there is a notification a Bootstrap 4 is coming pretty soon,
2:50 so it's not released yet, I believe there is few breaking changes
2:54 so just be aware when that comes out;
2:55 but here is what we want to look at; we want to look at Bootstrap
2:58 and it's broken into a couple of sections, we can download the zip file and solve it that way,
3:03 I am actually recommending the way to do this as via Bower or npm,
3:07 take your pick there, something that can auto update and manage that for us.
3:10 So let me just click on getting started, and it talks about how you download,
3:14 I talked about you can just download the Bootstrap source,
3:17 it comes with Saas, so kind of a higher level than CSS design language there,
3:22 you can use the CDN, that's what you get from the startup projects in Pyramid
3:26 or you can install with Bower, just "bower install bootstrap"
3:29 or maybe a better option is to use bootstrap-CSS
3:34 and that will give you a smaller version.
3:37 You could also install with npm if you don't want to use Bower.
3:40 Let's look at a few examples.
3:42 So over here, this gives us a quick idea of what we have to work with.
3:47 You can flip through and you see there is a bunch of options,
3:50 of all the various things you can do, here is a nice little Cover thing,
3:53 here is a Carousel, and so on, let's just focus on this one real quick.
3:58 So here you can see we have the nice let's call it "well", this thing
4:01 that says "theme example" at the top, you can see the navigation,
4:05 the navigation is a little dropdown and if I change the size
4:08 it should even become responsive and it does, like this, very nice.
4:11 All that is automatic.
4:14 There is some nice buttons, different sizes, and colors and so on, tables.
4:19 You don't think too much about styling tables these days
4:22 because people shy away from them, but when you have tabular data - guess what,
4:25 a table is pretty sweet and they have nice easy designs for it, we've got thumbnails,
4:29 these labels here, badges, dropdowns, all kinds of stuff,
4:34 cool progress bars, and so on.
4:37 So next, let's go back to the Bootstrap site,
4:41 they could work on their layout there a little bit couldn't they?
4:44 Let's look at CSS, the design elements you have to work with
4:47 are broken into a couple of categories, you've got CSS,
4:50 which are the core CSS elements,
4:56 so that goes at the end, these are broken up into different pieces,
5:00 and we can check them out.
5:02 So there is a couple of things to notice over here,
5:04 that Bootstrap is HTML 5-friendly, it's mobile first, I talked about typography,
5:09 I haven't talked about normalize.css but normalize is really important.
5:14 One of the pains of web design is
5:17 when on different browsers the same HTML CSS looks different,
5:22 and often that difference arises from the browser having no explicit style for a thing
5:27 and then making their assumption about how that should look
5:31 and if say Firefox has a different assumption about how H1 should look
5:35 compared to say Chrome, then that's going to look a little bit different.
5:39 Normalize explicitly sets every single possible style
5:42 so those types of challenges basically don't exist.
5:46 So when you include Bootstrap, you get one of these reset or normalization.css files
5:51 which is great, we are going to talk about the grid system
5:54 and how you can use that to achieve tabular type layout that is also responsive,
6:00 it's not just tables jammed in there, we talked about typography,
6:03 tables have really nice ways to style them,
6:06 let's see if we can pull up one, like this is a pretty good looking table, table-striped,
6:10 here you can see the alternating styles, it's a little subtle, so a little bit harder to see,
6:15 so all you've got to do is throw it on there
6:16 and your table looks much better automatically striped.
6:19 You can see that forms look much better in here,
6:22 so we can use like form control elements, we are going to get into that, buttons,
6:26 we have some nice looking buttons and colored call to action
6:30 sort of primary color buttons, very nice.
6:34 We are going to spend a dedicated section on that as well as on images,
6:37 you can see what different image shapes that we have to work with,
6:40 as well as responsiveness.
6:42 Speaking of responsive, Bootstrap comes with a number of
6:45 responsive design helper classes. So for example,
6:49 if you've got certain page elements that should only show up on large screens
6:52 and you want a different representation or a small one,
6:55 you can combine these settings to basically hide those.
6:59 I use this often in navigation, less so outside of there.
7:03 Now, let's look at the components,
7:05 there is a few interesting elements in the components, we have these Glyphicons,
7:09 these are OK, Font Awesome is way better,
7:11 and so I'll be using Font Awesome for our stuff, but it kind of plays the same role.
7:15 The idea is to use a font for little icons rather than pictures
7:18 because you can perfectly resize them by changing the font size
7:22 and change the color by just changing the color for an element,
7:25 which is very hard to do with images.
7:28 So you can sort of style these icons better if they are fonts than if they are fixed images.
7:32 The most important take from this section we are going to work with is navigation,
7:35 so you'll see little warnings as well like
7:45 So you can have little tabs, like this, these are nice,
7:48 or you can have these things called Pills, over here,
7:51 or more likely, what we are interested in is the navbar,
7:55 down here, so something like this, make it wider,
7:59 it should look all different, here we go we have this nice little dropdown here and links,
8:03 stuff that sticks to the right, stuff that sticks to the left,
8:05 we have forms, like search boxes, all kinds of stuff.
8:08 And we can even change this to be a dark version or a light version,
8:13 depending on whether we put the nav inverse or nav default.
8:23 for example, Modal dialogues are really great
8:26 or Scrollspies also, super cool.
8:29 Let's look at Modal real quick; so if we had some kind of link,
8:33 we are going to click and have something that looks like this come up,
8:36 and put whatever HTML in the middle we like that's great,
8:39 of course we can style it here
8:40 we can launch a Modal dialogue and it kind of pops in,
8:43 and whatever you want to put in here you can have
8:45 and you can close it back out and so on.
8:47 So, we want to make use of that in our design, for sure.
8:50 The other thing that's cool down here is Scrollspy,
8:52 so the idea is you've got these various sections on your page that relate to navigation,
8:57 and as you scroll, you kind of move into these other areas,
9:00 and you'd like the navigation at the top to be stuck sort of to track as you move,
9:06 so if you are kind of doing a more of a one page design,
9:09 you still want navigation, this Scrollspy is cool.
9:12 Alright, so that's a really quick fly over of Bootstrap.