[MUSIC] 0:00 At the talk, I will be. 0:13 Up and Running with Bootstrap. 0:16 And basically we'll just be covering the key pieces of Bootstrap. 0:18 That I believe are good to wrap your head around. 0:22 And get started with the framework fairly quickly. 0:24 All the opinions on what you might need to get up, and running are my own. 0:28 Which I think is important to other people, 0:32 most definitely have different ideas. 0:34 yeah, so again, 0:37 my name is Bess, I'm currently a JavaScript engineer at Articulate. 0:37 Though I was at a [UNKNOWN] I did really enjoy my time there, so 0:41 I'm really glad to be back, helping and showing sharing my 0:44 information [LAUGH] that I have gather on Bootstrap with you all. 0:49 So Why I think this talk might be helpful? 0:53 Cuz I think that docs can be a little bit overwhelming when you 0:57 just crack open Bootstrap online and take a look at what it offers. 1:01 So I find it personally easier to conceptualize, 1:06 what Bootstrap does by looking at examples. 1:10 And so that's what I'm going to try to 1:15 focus on with a lot of my code is to show you some examples, so 1:18 that you all can wrap your head around what's actually going on. 1:21 So the first question I had in mind When I first saw Bootstrap, 1:25 or heard about it, is why would I use it? 1:31 Makes [LAUGH] sense right? 1:34 In general it eases common, painful, and 1:35 repetitive tasks often associated with websites. 1:38 I am sure we all have those. 1:41 so, if you're looking for a quicker, easier, more uniform way to build and 1:44 set up a site then Bootstrap, might be a good way to go. 1:49 So it obviously helps with a few things, but what does it actually help with. 1:54 These are the things that I find can help me out when I'm using Bootstrap. 1:58 So this is definitely not an all inclusive list, but here are a few of the items. 2:04 It helps with responsive setup and utilities related to responsiveness. 2:08 It can help you set up grid layouts. 2:14 It normalizes styles across browsers. 2:17 It includes typography and 2:20 common HTML styling, so things look pretty good outside of the box. 2:22 It allows for 2:27 component building such as dropdowns, navigation, glyphicons and pagination. 2:28 And there is a variety of jQuery plugins for 2:33 a variety of UI interactions, such as modals, tooltips, and carousels. 2:37 A good thing to keep in mind when considering all of these is that, 2:42 all of them are in fact optional. 2:46 You can download a custom builds of the pieces you might want to use. 2:49 For example, if you don't wanna use the J the JS plugins, 2:53 no worries, you don't have to. 2:57 But those are if you want to just include them for 2:57 dropdowns you can do that as well. 3:00 So now we know what Bootstrap can actually help with, 3:03 when is a good idea to use Bootstrap? 3:06 I think this is an important question 3:08 because frameworks can often be overused as I'm sure we all know. 3:13 So here are some places where, I think it's a good idea to use or 3:18 experiment with Bootstrap. 3:20 First, when building a new site from scratch. 3:23 Second, when exploring ideas, or prototyping. 3:27 Third, when trying to achieve base line browser consistency. 3:30 And four, when you're looking for solid documentation from the framework. 3:34 And that can be a pretty big one if you're really looking for a framework. 3:37 There are like I said, a. 3:42 Because the framework can be overused, I really do think it's important to 3:46 think about where you want to apply Bootstrap and when. 3:49 When considering it for a project. 3:53 Cuz Bootstrap is not a silver bullet. 3:55 And it's also worth noting that if you have a need for older browser support. 3:58 Some of the Bootstrap features are not available in IE 8. 4:02 And below, like, of course. 4:07 I just wanted to move that and you might wanna look at the Getting Started Guide on 4:09 the website, if you have more questions about that. 4:13 So, for the purposes of this talk, what will we be covering? 4:16 The core components of Bootstrap that enable us to build faster / smarter / and 4:21 funner websites. 4:25 I recommend following along with the documentation if you want to. 4:27 It's to [LAUGH] command. 4:30 Just because that's the way I tend to like to learn. 4:35 To read along as I go so there's [UNKNOWN] there. 4:38 To take a look. 4:42 So first things first. 4:45 Now that we know, why we might wanna use it, 4:48 and what it kind of can offer how do we set up? 4:50 There are a lot of ways to integrate Bootstrap. 4:54 I would definitely look through the options, and 4:57 use the one that best suits your needs. 4:59 You can integrate it in with your current SAS or WES project. 5:01 Use [INAUDIBLE] download the library itself. 5:05 Or set, or use the CDN links for both the CSS and the JavaScript. 5:08 I think if you're just getting setup and experimenting, the CDN links are fine. 5:14 To get going and get a preview of, of what Bootstrap offers. 5:19 So I'm going to go over quickly a basic template that I 5:24 think gets the gist of what Bootstrap offers right away and 5:29 enables you to just start [LAUGH] throwing things in there as it were. 5:33 I have used this CDNs in this simple template, 5:39 which is different than the sample template on the website. 5:43 So I think if you grab the basic template on the Bootstrap website, 5:46 you still have to download the library files. 5:50 Here you can just copy and paste this into a jsFiddler code pan, or 5:53 save it a new HTML file and you should be able to run it. 5:58 One thing worth noting is that there is this HTML5 doc type. 6:03 And just a normal HTML5. 6:10 You need to give 8, and a couple other things that I'll go over in a second. 6:12 But we have the the CDN, CSS, for Bootstrap. 6:16 And then, we actually have the body of the HTML. 6:20 So really the only things here that are a bit extrapolated, 6:23 are this div class of container. 6:29 Which I will mention in a second in this hello world. 6:31 So really there's not. 6:34 Oh and then, sorry. 6:35 There's jQuery which is necessary for 6:36 the Bootstrap plugins JavaScript plugins to run. 6:38 And then the Bootstrap JavaScript itself. 6:42 So, if I was to run this demo. 6:46 You don't see a whole lot, 6:49 but you do see that the container is at least centered to the page. 6:51 It's not leading to the left edge. 6:56 And the header looks pretty good for just being normal inch one. 6:58 And if you see this locally, then your own file is good. 7:02 Instruct should be ready to go. 7:06 All right, so before I delve into features. 7:09 I think it's a good idea to review the core basics of what the framework sets up, 7:12 and the point of view it comes from. 7:17 The first thing to know about Bootstrap is it's ulti-mobile first. 7:19 We don't need to add helpful classes to override, 7:25 that would be considered desktop. 7:27 Quote unquote styles. 7:30 Mobile first means just that. 7:32 If you're not familiar with the term it's just the default framework, is built for 7:34 mobile without needing further tweaks from the beginning. 7:38 There is one thing you probably do wanna add though, 7:42 which was in the previous template. 7:44 You will want to add this meta tag in your HTML. 7:45 To ensure that proper mobile and 7:50 good rendering is available, and does indeed happen so, 7:53 and that is in the docs, again because I find the docs a little bit overwhelming, 7:59 I wanted to point out some of the sort of essential setup 8:04 details If you forget this part [LAUGH] and your mobile experience isn't working. 8:08 You could really end up racking your brain around, 8:13 why it might not be rendering correctly. 8:16 So let's continue. 8:18 More on what you get out of the box. 8:21 The essentials are basically handled when it comes to CSS styling. 8:23 When you include Bootstrap. 8:29 So this means that all the common styles for 8:32 the HTML are normalized across the browsers. 8:34 And Bootstrap just sets up a few small base styles. 8:37 Which is fairly minimal one is that the background color is set to white. 8:41 And the base font size is set to 14 pixels with a line-height of 1.428. 8:45 And this might not seem super important to you, 8:51 but I, I do think it's a good idea know what has been set, before you override. 8:52 If you're using less, there are variables for all of these. 8:58 There's a font family base, a font size base, and line-height base. 9:03 That you can override and use within your code. 9:07 And I believe in terms of basic style setup, 9:12 the only other style that gets set up is underlines only cover. 9:15 These sort of common setup styles can be found within scaffolding.less. 9:20 So. 9:25 On to the more fun things. 9:28 Bootstrap is responsive by default. 9:30 Which means it will respond to various, browsers and viewports. 9:32 The only thing we want to add to ensure that the styles cooperate as you expect, 9:37 is this container class, which we had seen in our previous template. 9:44 And the container class sets a width that is going to 9:50 be based on your current viewport at various different sizes, and 9:54 if you want your container to be full width the classes container-fluid. 9:57 But this is almost always the first element that you put a style on. 10:03 And then you continue downward with your other Bootstrap, classes, and 10:10 your normal HTML. 10:14 So, now we are onto grids, and that's where the fun really starts. 10:16 It's also where the complications [LAUGH], the complicated code or 10:20 classes usually start as well. 10:25 There are a couple. 10:27 Things to keep in mind when setting up grids. 10:30 I'm just gonna restate myself a little. 10:33 Obviously you want the class of container. 10:35 But the first actual rules of the columns and grids themselves is you want. 10:39 A div class, it could actually be I guess any element. 10:46 But typically it would be a dev, [COUGH] excuse me, with the class of row. 10:49 And that just defines row that the columns are going to live in. 10:55 And that they will span full width of the container. 10:58 And then within that row, you want to set your column. 11:01 And the main probably rule, and the one to keep in mind is that all 11:06 columns must equal 12, if they want to span the whole width of the row. 11:10 So in the case of this column, it is set to, to fill the full width of the mural. 11:16 You might be wondering what that prefix is for, that 12. 11:22 And those are different column sizes you can specify. 11:26 Or, sorry, different viewport sizes, you can specify based on the size. 11:30 So, there are four, I believe. 11:35 There's column extra small, column small, column medium and column large. 11:37 So, all of these are different column sizes that get applied 11:42 at those various, at various viewports which are set in the documentation. 11:49 You can see why this is kind of tricky. 11:53 But if you look at the documentation for grids I have The link here below, 11:56 it outlines the sizes that these could be set at. 12:00 So if we run this code, we can see, 12:04 as I mentioned I have this row and it's taking up the full. 12:07 The columns are taking up the full width of the row, so 12:14 it's wrapping in this space. 12:17 And then we have all below that, another row with another column. 12:18 And this column is set to 8. 12:23 So it's gonna span 8. 12:26 And then another one which spans 4. 12:27 So therefore, it takes up the whole role which equals 12. 12:31 And That is why it plays itself out so nicely when we run the demo. 12:35 Yes so you might be wondering what's the benefit of using various sizes 12:43 and how do they actually get figured out and what are the breakpoint sizes. 12:51 This side is just to give you a little more information on. 12:57 We start get a size correspond to in terms of the column prefix. 13:02 Basically on those extra small sizes since this is 13:07 a mobile first framework there's no media query and this is the default layout. 13:11 In this case the width is just going to be auto. 13:16 It's going to try to fit however much it can into the column. 13:18 For small devices that'll be so you use the sm prefix. 13:23 That's for 768, medium 992, and large 1200. 13:29 The first break point in which the columns start can stack horizontally 13:36 And vertically are in the median style so if you want your columns to 13:44 be all in line next to each other but then, you know, stack horizontally at 13:52 smaller screen sizes then you wanna just target the median size. 13:57 So if I run this in the demo, since the viewpoint is less than [UNKNOWN] 992 and 14:04 I run this, you can see that these columns are now stacked and this is the same code 14:10 as our original before, but instead of the small prefix, I have a medium prefix. 14:17 So really you have a lot of options for the ways that your columns get set up and 14:24 the way that they're aligned. 14:29 And also you have the awesome option to have your own column party, where columns 14:31 can have combined classes that result in various column layouts at different sizes. 14:37 Since this demo is kind of constrained to a certain size at this point I set up 14:42 a CodePen which kind of easily shows what can happen when you combine these columns. 14:48 For example I'll just talk through this kind of quickly, but 14:53 we have our container and our row and within that we have our column set up. 14:59 The first column, 15:04 the extra small size it will be spanning 12 which is the full length. 15:05 At the small viewport sides we'll be spanning 6, and the medium 8. 15:09 So at each viewport these, this will take up a different amount of your row. 15:15 For the second column setup, extra small will be 6, and 15:20 since the one that's above it is 12 this will be on the next line. 15:23 But because the mediums are 84 equalling 12, 15:28 hopefully this isn't blowing your mind. 15:32 [LAUGH] this, the medium size will indeed take up the whole row. 15:34 So if we go here and take a look my screen is too big. 15:39 It actually does resize. 15:47 So that's 8 and 4. 15:51 So they're taking up the full row I had I just have a little styling here to 15:52 show you the columns and if I try to make it bigger it should. 15:55 Let's see. 15:59 Yeah. 16:02 You can see that that these change accordingly. 16:02 That well this one. 16:07 It's creeping up around this one. 16:10 But they are all shifting in various sizes for the viewports though. 16:13 You can quite easily change the order of 16:18 the layouts by at various viewpoints, just by adjusting these columns. 16:23 And like I said this might. 16:28 I think I've said this. 16:31 [LAUGH] This might be the most complicated part of Bootstrap. 16:31 In terms of, just that you add and have to sort of think about, and think through. 16:34 But once you get started I don't think, 16:41 I think you'll find it's quite easy to conceptualize how to set up your grids. 16:44 There is one thing that's new to Bootstrap I think last month, 16:49 that I thought I might mention that you do have the ability to clear rows and, 16:52 you have the ability to clear rows at certain sizes. 16:58 So, in the second, or I guess, yeah, the second row, 17:02 we have some normal columns set in extra small size 6 and 6. 17:05 So, that would be 12. 17:10 And if we wannna make sure we clear that column, 17:12 we can quite easily put this class that says visible extra small block. 17:15 We can clear fix class which is a Bootstrap class. 17:21 And this will clear the row, only when the extra small is visible. 17:24 So that's really a can do later. 17:29 Clear rows at certain sizes So in the case of the small, this row is not clear. 17:31 We have four front, and four, so these three will all be in line. 17:37 So that's a lot of fanciness for the price of some classes. 17:41 [LAUGH] You might think holy, oh my gosh, that's a lot of. 17:46 Let's divide this. 17:52 And you might be right. 17:54 But I think that grids do require a lot of CSS in terms of 17:56 getting the layout working with that JavaScript. 18:02 So that might be something you wanna consider when you're 18:06 thinking about Bootstrap. 18:09 But this makes me nervous. 18:11 [LAUGH] For me it's, it's okay. 18:13 It's a wrapper div it's setting up the layout and the vPort bleh, 18:16 the view ports are being targeted specifically as such and I, I find that 18:22 it's sort of self documenting and easier than trying to do something another way. 18:27 One more thing on grids, is you can nest grids. 18:34 This looks funcated but it's indeed very handy, so 18:38 we can have our own column in a row. 18:42 And within that it's a, or the column itself is 9, it's a span of 9. 18:47 So it's not even going the full length of the row could be 12. 18:52 But in my column we have another row, and that row is set to 12. 18:56 So if we run this code we can see that the parent row, 19:01 that's, that would be the full length has a child column but it's only set to 9. 19:09 Even though it's only set to 9, the children are set, 19:16 can be set to 12 which will take up the whole length of the parent. 19:22 So, you can nest these grids quite easily even 19:25 if their parents aren't taking up the whole space the room that they're in. 19:31 And yeah, hopefully that is helpful if you've ever run across layout issues. 19:37 All right, hopefully that grid stuff didn't wanna make your head 19:43 explode cuz now we're gonna talk about HTML. 19:47 Which hopefully is lower, so. 19:51 So Bootstrap does offer a little more than just grim loveliness, 19:54 it helps support a vast array of HTML styles that are common and 19:59 often hard to pull off across browser. 20:03 So here I have my container, I have my row. 20:07 I have my eight span column. 20:08 And then, I just have a header, a paragraph, an unordered list. 20:12 Pretty simple. 20:16 And my second column. 20:18 Again, they are totalling 12. 20:19 I'm just sorta gonna repeat myself a little bit. 20:21 And we have a header, an image, and then, 20:24 we have a class image thumbnail and image responsive. 20:27 And, these are just some helper classes Bootstrap offers that you can look into. 20:30 And this just give you a thumbnail boarder around the image to be responsive. 20:37 Made paragraph, the class of lead or led. 20:43 [LAUGH] And but it's late. 20:46 [LAUGH] And this sets the font size to make it a little bit more a lead or 20:51 intro paragraph. 20:55 And then we have a button with this btn and tbn-primary stuff. 20:58 This is another set of Bootstrap classes that kind of 21:03 sets up your HTML to look pretty fantastic. 21:06 So I run the demo. 21:10 Looks pretty good. 21:12 Keep in mind that I have not applied any CSS at this point. 21:13 This is all Bootstrap. 21:16 So our header, our paragraph, our unordered list, our other row, our 21:17 awesome cat image has this little rounded thumbnail action and it's responsive. 21:23 This image is much bigger in real life and then we have our lead indent. 21:29 So, we about just set up our first semi Bootstrap site just using 21:35 some simple rows, columns, normal HTML, and a couple of helper classes along. 21:41 Make sure you well you don't have to but if you look at the documentation you can 21:48 see more examples of the type of HTML helper classes that are available to you. 21:53 So other than just normal HTML then what you 21:59 might expect from Bootstrap, I wanted to explicitly mention forms. 22:04 Because I think as we all know normalizing forms are pretty difficult and notorious. 22:10 And Bootstrap offers a million more of them. 22:19 A lot of different ways to style up a variety of form elements and layouts. 22:22 And that's really quite easy. 22:29 I think the first thing I wanna mention is you want to make sure you 22:31 build your form as you normally would which would be a form tag, 22:34 associating labels with inputs and all that good old semantic stuff. 22:38 And so really Bootstrap, with Bootstrap you're just putting in extra classes. 22:43 So the first thing you want to do if you want to lay it out in 22:49 a Bootstrap style is you can use this class one group which just sets up 22:53 spacing between the elements so everything's aligned well. 22:57 So we have a form group class. 23:02 We have our label and our input and this class of form control, 23:03 all it really does it set this input to be 100% width of its parent form group. 23:08 Then we have a second form groups, same thing. 23:14 A third form group, with the file input. 23:17 And this help block text, on some help text, which helps align help text. 23:19 Then we have a checkbox and a submit button with another class of button. 23:25 And this is a separate button style. 23:31 The default button style. 23:34 So if we run this, it looks pretty good, right? 23:36 Here's your form. 23:40 The labels and inputs that are associated. 23:40 Everything works pretty well. 23:43 accessibility, you can get more accessible I'm sure. 23:46 File chooser, this everything works. 23:50 Boom, button looks great. 23:55 And this is just one way to lay out the forms, right. 23:57 This is the newbie, the standard way to lay out forms. 23:59 Bootstrap also offers classes for inline forms. 24:03 Different sizes of the inputs validation states and disabled inputs. 24:09 Sort of the things you know and love about forms. 24:15 And again, even though we're adding quite a few classes, 24:21 make sure you keep your forms valid and built well. 24:25 Enough on the HTML. 24:32 Let's talk about components, or what you might consider widgets. 24:34 These are things you would build to solve commonplace hassles when 24:39 building a website. 24:44 One thing Bootstrap does really well and 24:45 one thing I've used quite a bit is glyphicons. 24:49 And they are icons built from a font that I believe are open source. 24:52 At least what, they were offered free to Bootstrap. 24:58 But they're built from a plot so that they resize gracefully. 25:04 And they can be used inline with any text elements and 25:08 HTML element that's inline and look fantastic, I might add. 25:12 So again, containing a row and a column, and then we have our header. 25:18 Let's say that we wanted to put an icon before this header. 25:26 It's quite easy. 25:28 We just want to insert span or another inline element. 25:30 Use a class of glyphicon, which is an indication to obviously use the glyphicon. 25:34 And then the second class here is the icon itself to use. 25:39 So here we're using the search icon. 25:42 The second paragraph or I guess the first paragraph is will I ever find my phone, 25:46 and I wanted to phone a nice phone icon so I did the same sorta setup with the span. 25:50 I'm using this phone icon. 25:57 And then in the second paragraph here we have our 25:58 button with a bunch of button classes. 26:01 Button, button default, button large, so here you can see like 26:05 Bootstrap just offers a ton of different ways to get things sized and set up for 26:09 the [UNKNOWN] that box. 26:13 But then within that button we have our glyphicon alternate phone. 26:14 So let's see what happens when we run this demo. 26:21 That looks pretty good. 26:24 I have to say. 26:25 Look at that glyphicon. 26:26 Here's my search glyphicon, my test, 26:29 my paragraph, my other glyphicon, and [UNKNOWN] button here another. 26:32 You can sort of think of glyphicons as 26:37 unsemantic images or something where you wouldn't actually, I 26:41 guess the main takeaway is you don't want to add anything else to this spam, right? 26:47 You don't want to give it any more classes. 26:51 it's, it's just supposed to be displaying some visual, visual text. 26:54 It's a font in this case, but it's a visual helper for the associated text. 26:59 So when you're gonna see glyphicons they should be used on their own 27:04 within an inline element, and do wanna make sure there's a little space here or 27:10 it can just bump up against the edge of the text. 27:14 But it's very helpful, it resizes, there's a lot of different icons to choose from. 27:18 And I have a lot of [UNKNOWN], 27:23 like your own personal emoticon set for building up sets. 27:24 So next we have dropdowns. 27:30 This is another common place component. 27:33 And I wanted to build this one up too, 27:35 because it does require the JavaScript plugin. 27:37 I'm sure, as you might know, 27:41 you can probably pull up dropdown to CSS, which, I think Trenton will be covering. 27:42 But in the case of Bootstrap, it does require JavaScript. 27:47 So how do you set up your dropdowns? 27:53 It's pretty easy. 27:56 I just there is a container class on this, I just turned it off. 27:58 The visualization, I turned it off. 28:03 Just so that you can, you can see that we mark the code here. 28:06 So we have our row with our column. 28:10 You want to wrap your whole dropdown in a div class of dropdown. 28:12 You want to figure out which element you wanna use for 28:17 your target, so you open the dropdown. 28:20 You can use pretty much anything you want. 28:22 In the case of this first one I'm using a button, again with my normal 28:25 awesome classes I have an additional class of the dropdown toggle 28:29 I think that the main thing to keep in mind when you're adding 28:37 the dropdown is the class doesn't matter so much as the data toggle attribute. 28:43 Since this is JavaScript, the JavaScript is what's looking for that instantiates. 28:48 It's looking for what it's going to open. 28:54 And so dropdown, 29:00 the data toggle attribute is what actually gets used to get the dropdown working. 29:00 So you'll wanna put the data toggle dropdown to 29:07 associate the button with the dropdown that should be opened. 29:11 And in the case of, 29:15 this, the dropdown we are opening is this dropdown, menu, excuse me. 29:16 This attribute is for accessibility. 29:22 And so it's quite easy, 29:25 all you really need is a dropdown class wrapping your dropdown. 29:28 An element will trigger the dropdown with the data toggle dropdown. 29:33 And then the associated dropdown text, element I mean. 29:37 And the second column we have another div class of dropdown, but 29:43 instead of a button toggle we have an anchor toggle. 29:46 Pretty fun. 29:50 And so we open this up, we run it, and we have, boom, 29:51 this dropdown triggered by a button and another dropdown triggered by an anchor. 29:55 Pretty easy peasy. 30:02 I wanted to note too I but in this caret which is another Boostrap helper, 30:04 it's not a glyphicon it's an actual caret. 30:10 Obviously it can associate as part of Bootstrap as well. 30:14 So that's how you'd setup your dropdowns. 30:18 So we got your glyphicons, you got your dropdowns, and 30:22 then you realize you need a nav. 30:25 So when a simple unordered list just won't do. 30:27 Bootstrap offers a ton of different navigation styling options. 30:32 And luckily for everyone it's just using, you know, 30:38 you can use your typical UL, it just styles that up nice and neat. 30:41 So I just have some text in a row. 30:44 And then in my second row I have a column with Nav [UNKNOWN]. 30:47 And, only thing you need to indicate to Bootstrap that you want it to 30:51 be a Nav [UNKNOWN] class and then the Nav styling you might wanna use. 30:55 In this case of this first one we're using pill style, which is shaped like a pill. 31:00 [LAUGH] And the second one we're using down here in the second column, 31:04 it's a tab style navigation. 31:09 Again, there's an attribute for for Aria here. 31:12 If you're unfamiliar with Aria, Bootstrap documentations does go, 31:14 do go over some of this in a little bit of depth, in a [INAUDIBLE] accessibility. 31:19 So we run this. 31:24 We have some awesome looking tabs or navs, nav tabs. 31:24 Here's our pill ones and here are out panelly tab ones. 31:31 You might be thinking, oh that's awesome I want to show my panel. 31:36 Seem like you might be thinking ahead. 31:40 And that is another JavaScript component, but for the case you just wanted 31:42 a styling that looked like this and you wanted to write your own JavaScript, or 31:45 you want to triple [UNKNOWN] open in CSS, you could easily do that too. 31:49 This is just for the styling. 31:53 So navs, pretty rad. 31:55 Here's another component that I find handy that's a relatively simple one, panels. 32:00 Panels you can just think of it as boxes with borders around them and 32:07 some little stylistic help along the way. 32:13 I find panels really helpful for prototyping a website. 32:17 So if you're using Bootstrap, you just wanna get an idea out there. 32:22 You want to try things out, you want to move things around a panel can be a really 32:26 good idea to delineate some of your content especially into the column. 32:30 So here we have a container and a row, a column to 12 and a panel, so. 32:36 The panel is the first class you wanna use. 32:44 And then a styling class. 32:46 In this case, it's just the default panel. 32:47 I believe this might be optional, as well. 32:51 So this probably doesn't have to be here, 32:53 but I like to include it cuz it's a pretty common thing to add. 32:55 And then a panel body, which is just the, the content of the body. 33:00 In the second row, I have another column. 33:04 And in that I have a panel, with also a panel heading it's a separate div. 33:08 And a panel title, and 33:13 this just goes some extra styling love for the panel title obviously. 33:14 And then another panel body in the last one it's just another sort of panel. 33:18 So when I run this it doesn't look all that exciting, but 33:24 you have some delineated content set up. 33:28 Everything's in the columns correctly. 33:31 You have your title. 33:32 You could also have a footer, which I'm gonna put here. 33:33 But again, this is just really a nice component you can use. 33:36 And then you could override with your own styles later if you want to. 33:39 So obviously, I've covered only a few of these components. 33:46 And that's just beginning. 33:52 There are all type, different types of components you can use. 33:53 The other components include pa, paginations, that's not really a word. 33:56 pagination, wells, thumbnails, and common header styles such as jumbotron. 34:00 You may have seen that one. 34:06 It's like a giant, jumbo header which I show in a later slide. 34:07 You might want to take some time and read through those components if 34:11 you're wondering what might be helpful for you and your project. 34:14 Okay. 34:19 So now that we've talked through responsive, setting up grids, 34:20 what the basic HTML looks like, and 34:24 some of the components that you can use, I just wanted to chat about JavaScript. 34:28 Again, these are jQuery plugins, and that bears repeating just because 34:33 if you don't include jQuery, you might be unpleasantly surprised. 34:40 And most of these JavaScript components are to [UNKNOWN] to 34:44 help you ease the UI pain. 34:49 So let's talk about some UI pain. 34:53 Modals. 34:57 I'm sure you've all walled through modals at some point launching [UNKNOWN] from 34:58 divs, trying to mask the background, getting everything working cross browser. 35:03 These can be quite a pain. 35:09 And Bootstrap does give us quite a lot with the modal.js plugin. 35:11 In Bootstrap's words, modals are streamlined but 35:15 flexible dialogue prompts with the minimum required functionality and smart defaults. 35:18 And I would definitely agree with that. 35:24 I'm doing a semi-complicated modal demo, just to get your head wrapped around 35:27 what's actually what, what the modal plugin can pull off. 35:34 Don't be too intimidated, though. 35:42 [LAUGH] I mean. 35:44 Maybe you weren't, but 35:45 it'll be okay because [LAUGH] it's mostly just a couple classes here and there. 35:46 So in the case of the modal that I wanna demonstrate I want to 35:52 trigger a modal when a button is clicked. 35:55 You could have the modal if you wanted to just show up on page load, 35:57 but I wanna trigger it. 36:00 So we can set up a button, I've hidden the container and the rows and 36:01 stuff for this demo. 36:05 Set up a button that has some styles on it. 36:07 And the key thing I wanna make sure I add is the data toggle modal. 36:11 So this is what tells the JavaScript when this button gets toggled, 36:16 I'm gonna run the modal. 36:20 I think as Dave mentioned, this is way smarter that the JavaScript is 36:22 looking at a data attribute and trying to reach off and 36:27 doing in the jQuery it like in line that are looking at hidden classes. 36:31 So I definitely I, I won’t get into too much JavaScript, but 36:36 it's good practice that this is on the data attribute. 36:40 I think it’s clear as you read this that this is associated with JavaScript and 36:44 not just for the CSS. 36:49 So yeah, so you set up your data toggle and tell it to be in modal. 36:51 And then you have a target. 36:54 And so target is the ID of the [INAUDIBLE] watch. 36:56 This is similar to nature, and anchor. 36:59 So the second we have the modal itself which will be hidden by default. 37:02 We give that class and modal. 37:08 And the second class here it's pretty fancy cuz it's 37:10 the CSS transition that the JavaScript runs. 37:13 I believe it still runs through the transitions.js Bootstrap helper. 37:18 It's not just a stream but CSS transition but I think 37:23 the JavaScript just aids in the transition of the ending of the Chrome everything. 37:27 Then we have the idea of modal which corresponds to the button. 37:32 Rest of the attributes are for accessibility. 37:35 So those are optional, but I recommend having them. 37:40 And they are mentioned in the documentation. 37:43 Next we have some wrapper classes and this just sets up the positioning, 37:46 the modal dialog, and the modal content, which sets up the styling. 37:50 And then we have some optional modal classes in header. 37:55 And within the header we have another button that has a close. 37:59 And so we have a data-dismiss attribute similar to the tab role. 38:04 And this will automatically dismiss the modal when clicked. 38:08 This'll have some screen with your only text, which is good for 38:11 accessibility and a title and then we have modal body. 38:17 And in the modal body you can see we have a row again and columns. 38:24 And this is just to sort of point out that even though we're in the modal we can 38:29 still use Bootstrap, anything else we want to So no worries 38:33 there and kind of nice that you can pull that all off without a lot of hassle. 38:39 And then we have a modal footer that can close this. 38:44 Again, the data dismiss is setup, and we have some styles on the button. 38:47 So that's kind of a lot, I've been talking a lot, so let's see. 38:52 And maybe while we run this. 38:55 I would've if I was [UNKNOWN] but [LAUGH] So, we have a modal, or 38:56 not yet, we have this button which will launch the modal. 39:01 I click it. 39:06 Boom. 39:06 Nice, it fades in as we instructed it to. 39:07 We have our title. 39:10 We have our Close. 39:12 We have our column center in the row, and we have our additional buttons. 39:14 When this closes on data dismiss here or data dismiss here. 39:18 It's really quite handy. 39:23 You just have to sort of know and look at the docks to make sure you include 39:25 the correct data toggling or attributes rather, the data attributes for the modal. 39:31 And you'll be pretty much good to go. 39:37 We've initialized this modal through HTML just by associating these 39:39 data toggle attributes, but you can also instantiate and 39:45 set up the modals Their new job is to class themselves. 39:49 And there are a ton of options that could pass into, well, 39:53 I don't really roll into all of them obviously. 39:57 But if you are having little problems. 40:00 [LAUGH] I don't know why that sounds funny to me. 40:03 Or your just wanting to play around, definitely look that up. 40:07 So models, simple, flexible, smart [INAUDIBLE]. 40:11 Okay, Affix. 40:14 Another fun thing we can do is have an affixed element that 40:16 follows your scrolling. 40:20 You probably often seen this in sites either with headers being affixed or 40:23 side bars. 40:28 In the case of this demo, I'm going to affix a sidebar now. 40:29 So we're gonna contain it about an unusual jumbotron. 40:34 Just something mentioned earlier which is sort of header areas. 40:39 So this is kind of like a stand out sort of header and then we have our row, and 40:43 in that we have a nine and a three spanned row. 40:48 We're gonna have a nav in this first one. 40:54 again, we've talked about that and 40:58 this is a nav stat as opposed to a [UNKNOWN] tab, hav nav. 41:01 And this just stacks the navs on top of each other. 41:05 Oh, here's where the affix comes in. 41:08 We have a data spy attribute. 41:10 And this initializes the affix to be spied on and 41:13 then you can set, more data attributes top, 41:19 bottom, all sorts of upsets for the affix to stick to. 41:23 In this case more of the affixed always stick up to the top, 41:28 at it's opposite tap of zero so it doesn't go beyond where the start is. 41:33 Then I just have some normal links, forward navigation here. 41:38 And then the second row I have corresponding section right, so 41:41 each anchor in this link corresponds by ID to each of these headers. 41:46 So, there's a lot of content there. 41:52 But you run it. 41:54 It's pretty sweet, 41:56 because whoo, it's affixing itself in this left hand column here. 41:57 And because I set up the target to be you know, 42:01 corresponding to the ID, if I click this it jumps down. 42:05 So, I would say this is probably the first functional fully 42:09 functional Bootstrap download when we're actually using something for a webpage. 42:13 Almost like it's totally use but Affix can be very handy and 42:18 something that I've used quite a bit. 42:24 And this is just using straight HTML. 42:28 It's a little bit of data spy fix. 42:31 And things are looking pretty good. 42:35 And again, because it's a JavaScript component, 42:36 you can instantiate this in the JavaScript documents instead of HTML. 42:38 And there are quite a lot of options for this, and 42:44 different offsets as I mentioned. 42:46 So I'll play with that tool tips. 42:48 Lovely, lovely tool tips. 42:53 again, this might be something you would try to pull off in CSS, but 42:55 if you have some really crazy tool tips with tons of options this is a good bat. 42:58 And this is also worth repeating or 43:04 I guess I didn't say it, but I will say it now. 43:09 [LAUGH] The tool tip as opposed to other JavaScript plugins need to be, 43:11 needs to be instantiated in JavaScript. 43:17 That is for performance reasons. 43:19 You could have like hundreds of tool tips and if that, 43:21 if all those try to get instantiated on page load well that won't be good. 43:23 So in the case of this I'm instantiating the button class with tool tip 43:27 cuz it's a jQuery plugin obviously I can run that off as a jQuery. 43:34 Dollar here, and obviously I would not run the script in the middle of the range. 43:38 But so we have a container a row. 43:44 A full spanned column, a header of the paragraph and the button. 43:48 And this is where I want the tool tip. 43:53 So I'm going to have to data toggle to the tip again with the data attribute. 43:55 You're saying when this gets clicked basically, 43:59 make sure the tool tip gets run. 44:02 You can choose your placement for the tool tip and the title. 44:05 And this is nice cuz this is also fully accessible. 44:09 So even people that don't have JavaScript enabled, or if for 44:12 some reason someone's screen reader for 44:15 accessibility didn't have [UNKNOWN] the title would still have semantic meaning. 44:17 So this tells the tooltip to place the tooltip at the top and use this text. 44:24 Pretty fancy. 44:30 So when I run this, you can see the tooltip. 44:31 Submitting is what do I want to do, I don't know. 44:35 I don't know maybe, oh yeah it's usually fun. 44:37 That tool tip was helpful. 44:39 [LAUGH] I crack my own self up. 44:41 Okay so tool tips have a ton of options as well. 44:44 So look into them, if you need to use them, they're quite easy to setup but 44:49 do remember that you need to instantiate those in your JavaScript. 44:52 Just a couple more things to cover here. 44:58 Next we have Accordions. 45:01 That's more than just for jams, you know? 45:03 Since we already talked about panels I thought it would be good to sort of 45:06 show an example where we highlighted in the next step what we might be able to do 45:09 with the panel. 45:13 So basically an accordion is just an, a panel that opens and closes. 45:15 I'm sure we've all seen those from time to time. 45:21 We have a container class, we have a closs of panel group, 45:23 which just sets up the panel. 45:27 And then the groupings of the panels, if there are multiples. 45:31 We have a div class of panel-heading. 45:35 And then a title within that panel. 45:38 The, the key here is the data toggle collapse again. 45:41 So we're telling basically JavaScript is 45:44 associating the toggling of this anchor with collapsing the accordion. 45:48 We're setting the parent here of the accordion, 45:54 which you wanna make sure you have a reference to. 45:56 And this is just so the JavaScript keeps track of what its parent is. 46:00 You could have multiple panel groups. 46:05 And part of this is performance-related I believe, but this is good to know. 46:07 So you have your toggle collapse, which is sending the target. 46:12 And the href, much like an anchor before is what 46:20 started that is what's at the target, is the collapse one. 46:24 So collapse one in this case is this first div. 46:26 And in that div we have a panel body, this might seem really complex, but 46:29 once I run the demo hopefully it will make a little more sense. 46:34 We have a collapsed item here. 46:37 A collapsed toggle and it's open by default. 46:42 And then, when we click it, it closes. 46:44 That's pretty nice, right? 46:46 And yeah. 46:50 All you really want to make sure you do is set up your panel classes. 46:51 You associate a toggle which is set to collapse. 46:58 You and then you reference which item you want to collapse and you click. 47:03 If you set the collapse class of that item to hidden it starts with that one open, 47:07 which is pretty nice. 47:13 so, hopefully, accor, this accordion makes so much sense. 47:16 I think this might not be as widely used as some of the other 47:19 JavaScript, components here. 47:22 But I do think this is a nice extension of using panels. 47:26 So if you're already using the panel, and 47:30 you're, like, man I wish that panel would just open and close. 47:32 Well, easy, all you have to do is add couple of data attributes, 47:36 make sure you have your collapse classes set up, and you're good to go. 47:41 All right, this is my last JavaScript component, the lovely Carousel. 47:46 carousels, you might have strong opinions on them. 47:52 But if you want to or 47:55 need to build one, you can quite easily do that with construct. 47:56 Much like the previous example, 48:00 there are quite a lot of classes being thrown around here. 48:03 But there's only a few really. 48:06 Since you really need to [UNKNOWN] 48:08 one is that you're wrapping div needs to have a d. 48:11 This is to associate, for 48:15 the JavaScript to be able to associate which carousel is being, so when you 48:20 click on various points of the carousel, it's in reference to the current carousel. 48:24 You could have your aerials for 48:29 the carousel outside of this div for example, and you want it to still work. 48:32 So you want to make sure you give that carousel an ID and 48:36 then give your carousel a class of carousel and 48:40 this is the transition you would want for your carousel. 48:43 And CSS transition you would want slide. 48:45 A data ride carousel is a, this is an attribute so 48:49 that it will start animating on page load, so it's optional. 48:53 So, with every Carousel comes indicators usually. 48:57 So just have a class of carousel indicators for this ordered list. 49:02 And the target that these carousel-indicators are tied to are the ID 49:08 of parent. 49:13 And then the data-slide-to, which is, 49:14 when you click on this guy, which data do you wanna slide to? 49:16 So this would be the first, cuz it's a zero base index, the first slide. 49:19 And this is set to active by default, just because. 49:25 You know, that it's gonna start with this one because of data ride carousel. 49:29 And then we set up the items themselves. 49:35 So we have a carousel inner class and an item class. 49:37 The first one is active so 49:40 that's why we have those first active classes associated. 49:41 We have an image. 49:45 I'm using the responsive image class and a carousel caption which is also optional. 49:46 And then just another item, 49:54 this is only two item carousel and then we have some controls and the controls. 49:55 Just have a carousel control class with a left or 50:00 a right which I believe are just loaders, right? 50:03 So left and right in the case of bootstrap I 50:07 think are disploding these I don't think they're associated with the carousel. 50:12 I've had to look that up because bootstrap has a lot going on. 50:16 And then we say data slide for the previous or next, so again kinda a lot. 50:20 On this guy, oh my gosh so much coffee so awesome. 50:26 You can see that these are the previous and next arrows. 50:31 And if I scroll down, these are the indicators. 50:34 So, if I click an indicator, there's my happy coffee. 50:36 Did I click these? 50:40 It's working, that looks great. 50:44 There's only two, but you can see that I. 50:46 I don't know what's going on here, I got images that are responsive. 50:51 I got these errors that go previous and that, that sorry cycles through. 50:58 See I'm playing back, it's infinite. 51:04 And we have indicators and captions. 51:07 All without a lick of JavaScript. 51:09 To write yourself, I mean JavaScript is happening. 51:11 So carousels are quite lovely. 51:14 And can be used when needed. 51:17 And again, you can instantiate this yourself with JavaScript in there, 51:21 there are a ton of options with this I just used 51:26 an example that was fairly straightforward. 51:31 I would like to show the examples using the HTML because I 51:34 think it's pretty powerful that you can get this set up 51:37 without having to crack open the JavaScript file. 51:40 All right, and of course there's more. 51:44 So I just covered a couple of the JavaScript components. 51:46 there's, for example, Scrollspy for those fixed headers while scrolling. 51:50 That's a little helper kind of for fixed and 51:55 you might think it helps an element just stick up to the top. 51:58 While you're scrolling popovers. 52:04 Those are like more like small overlays rather than tooltips, alerts and 52:05 tabs as I mentioned before. 52:10 You can check these out, play with them. 52:12 There's a lot of examples on the Bootstrap site. 52:14 And you put it all together and what have you got? 52:18 Fun. 52:21 Features. 52:23 [LAUGH] I thought this was funny this morning and now I'm laughing at myself. 52:24 Cuz it's kind of ridiculous, but it's true. 52:28 Bootstrap offers a lot of fun, and 52:30 a lot of features, hence a lot of fun features for you to play with, for 52:32 you to experiment with, I would say you know, go crazy. 52:37 and, you know, read the documentation and build things out as you go. 52:43 That's how I learn, maybe that's how you learn, maybe not. 52:48 If you have a different technique, I want to hear about it. 52:51 So there you have it, Bootstrap in a nutshell. 52:52 I hope you enjoyed the overview and while framework is never perfect,. 52:56 Then might not always split the bill. 53:01 I hope this presentation at least gave you some information to help you 53:02 make some informed decisions and some motivation to experiment. 53:06 Even if you're learning Ja, let's say you're learning JavaScript. 53:09 You might not want to pick up Bootstrap as a way to learn it, but 53:13 at least you can play with it and get to know JavaScript a little better. 53:16 And that's it. 53:21 Thank you all for listening, and I hope you enjoyed the talk. 53:22 >> Thanks Bess [COUGH] Couple, couple quick questions. 53:26 I probably only have time for one or two here. 53:30 But there's, I see a few more in the chat. 53:33 So if you don't mind staying, staying a little later, and 53:35 just answering some of those questions. 53:38 The first one, what is a regular download size bootstrap. 53:41 >> Well, I kind of mentioned this, but 53:46 I know some folks might be a little turned off by the classes. 53:48 There's quite a lot of classes which can be 53:54 a little overwhelming when you read the code, 53:58 especially if you have your own classes mixed in with the Bootstrap classes. 54:00 I find that it can be confusing to know what classes are Bootstrap and 54:05 what are yours at a glance. 54:08 So you might wanna keep that in mind when building the other things if 54:10 you already have a legacy site, like something that's been around forever. 54:14 And you try to just put Bootstrap on top of it to, to like pretty some things up. 54:17 You could end up with a pretty big headache because I'm sure as you 54:22 can imagine a framework can't fix everything right? 54:26 So that's why I mentioned Bootstrap as being helpful when you are more likely 54:28 starting out with a site or you can scrap your CSS and have a baseline setup. 54:33 So, that would kind of be my first full thoughts on that. 54:39 >> Second question. 54:44 This will be the last question, and then we'll take a quick break. 54:45 [UNKNOWN] asks on site. 54:48 He asked this question when you were on site 25, 54:51 I don't think it really matters though. 54:53 >> Oh, okay. 54:55 >> But could you quickly cover what the area-attribute do for the modal. 54:56 I think he's just looking for 55:01 an explanation of what the what area attributes actually do. 55:03 >> Oh, so area attributes are helpful for screen routers because they 55:08 designate certain parts of the HTML as having semantic meaning. 55:14 So when like a screen reader is what helps people with assistive disabilities, 55:19 usually blind folks. 55:23 And that'll read the page to them. 55:25 It'll say you are in a modal. 55:26 It is open. 55:30 And so those attributes are actually what tells us the state of the current item. 55:31 And in some cases, if you saw the role attribute, 55:36 that's just like the screen will say you are in [UNKNOWN] or this is a [UNKNOWN]. 55:39 I can't remember exactly what was on the Moodle, but 55:44 it's basically just signifiers so that the screen readers can help people 55:48 figure out where they are in a page if they can't visualize where they are. 55:53 Hopefully, that's helpful. 56:00 It can often help with SEO, too. 56:01 But that's. 56:03 I'm gonna join you pretty soon on [UNKNOWN] 56:07