Bootstrap - An Overview

let's take a look at bootstrap this will be a highlevel overview of what is touted as being one of the most popular front-end Frameworks and it's one that I use for building websites particularly in WordPress but also static websites this tool was started by two guys at Twitter at the time they were making little campaign Pages or event pages and they found that they were Reinventing the wheel for every one of these and so just to make a starting point they started a product they called Twitter bootstrap that name is still reflected in their GitHub repository for this and basically this is a set of defaults that allow you to build a website kind of like building something out of Lego rather than Reinventing everything from scratch and when you do that you end up creating code that could be recycled from one one project to another it's code that could be quickly learned by new people that join the team within weeks you'll all be writing code the exact same way which is so amazing it reduces the eort of testing so things like putting something besides something else in CSS has not always been straightforward we used to have to do things with floats which was a really abstract idea that was hard to visualize in your mind but uh as times have changed so it's bootstrap and you get these tools it's all been tested so thing goes beside other thing how does that look on a large screen how does it look on mobile you don't have to test that all the time uh back in the day you know uh 10 15 years ago that was the stuff that QA was always finding bugs on oh on this device this looks messed up at this particular size and you'd always be going in there and fixing that with bootstrap you're inheriting I'm I don't think it's an exaggeration to say a million hours of development and testing time and effort and so I think this is a really good tool there are other tools um let's just jump in here here's get bootstrap.css account look at this 1,377 contributors these would be like you know the San Francisco kind of developer that would have a baseball card if we collected cards like that for nerds uh these are some of the most gifted uh people that have ever you know work worked on the internet so it's pretty awesome now when you compare it to other tools Tailwind Foundation I am confident that whatever you are building and I don't know what that is but I I know you could get it done with these tools and these tools will have different uh pros and cons I've never worked with Tailwind but like I see they have a class called MD colon Flex I mean that that'll take me a minute to rep my head around and I'm not saying minute in the way that cool people do I mean a literal 60 seconds of like what is this in the documentation and then be like oh okay I get it and like I can sort of like in it that that would be on medium sized screens and up I'm guessing it's mobile first uh Foundation is another one that uh I know that they've done some pretty cool tools that allow you to build uh emails pretty interestingly I don't know the pros and cons of these I imagine there's incremental differences you're going to prefer one over the other but that this is outside the scope of this video uh you would want to choose one of these apart from instead of bootstrap if it was going to make something at least twice as good for you maybe you know makes twice the quality or Cuts your time in half on something but uh for this video we're going to talk about bootstrap because this is a part of a series looking at how to do themes in uh uh WordPress and Page building and stuff so okay so uh bootstrap oh let let's go back here and we're going to go to the docks so when you download bootstrap you're getting well-considered uh components and layout tools and content tools and utility classes and so let's dive into one of these I'll just go to accordion as an example I believe we already looked at this one in another thing but like here's an accordion item one item two it it collapses it expands maybe you'll do your frequently asked questions this way um it is problematic at uh often to hide content uh but sometimes you just need to do it so let's look at the code here so you've got the class name of accordion it's got an ID just for this example and then in here we've got a series of buttons so this one's called it has the content name of accordion item one that's this guy here then we have another div uh with a class of accordion collapse and on default state is load uh it loads with show there's the content inside there inside accordion body well-considered class names you know there's this old adage naming things as hard and they've already put some thought into this stuff and uh all the JavaScript happen happens on uh data attributes like data BS toggle collapse um and then I love that these code examples have your ARA expanded equals true um you know they wrote that and they wrote the show those things both to make it actually be open when it loads that's what show is doing and then the ARA control to let screen readers and search engines know as well pretty great uh then you'll also see ARA controls collapse one is the ID of this guy here so that ARA name on the button and the ID of the content those are working in harmony together sometimes the JavaScript will actually work on that stuff but here it might just be for screen readers and search engines anyway so this is like hopefully even if you've never seen HTML before as you look at this you're like okay I kind of get this you could just click this copy to clipboard thing and hopefully modify this change this to question one put your stuff in here you're good to go like that's half of web development it's just finding a working example copy pasting it but there is so much more to bootstrap and my like getting started advice to you is start a page put in a little bit of every one of these so you're going to go into drop downs you're going to look at their examples you're going to play with it you're going to mix and match you might put one of these into a header and you might try and change this color and sort of mix and match these things and just start to like recreate whatever it is you're trying to build or something that you've built in the past and just start to get to know these Lego bricks uh it's a pretty powerful tool um this is also what we call objectoriented that's a term Nicole Sullivan coined uh and and it's playfully borrowing from object-oriented programming and it's just making it more about front end Harry Roberts has written a lot about this sometimes misspeak and call him Harry Styles because CSS is Styles anyway um so let's uh take take one more example um spacing so spacing is the amount of space around something so you got a button how how much color is around the text or you know you're going to have a paragraph how much space is below it before the next thing maybe it's a box of content so that's where you get your margin and padding classes and so they they've made these class names that takes a minute to wrap your mind around but once you sort of get it and work with it a bit it becomes quite intuitive so mt0 I know without even reading the CSS that the margin at the top will be zero the only time you would do that would be if you're unsetting uh an element that already has margin and so M is for margin so that's the you know it's like using the force to push the thing away from it the previous thing away from it or the next thing pushing it down uh you also have P for padding which is like the uh you know the comfortable area round button um then the next letter we have a number of letter uh another number of options so we have top and bottom t&b then we used to have left and right but now we have start and end so if you're in a left to right language like English start will be left end will be right the amazing thing about this is uh now you can switch the the language to Arabic and that's a right to left language your start and end will switch whereas back in the day you'd have to switch your left and rights or you'd have to like undo it with CSS and just like imagine left is always right now like it would just be crazy the reason I want to bring this up is when a framework has thought about this and has start and end and they have light mode dark mode toggles like bootstrap does then you know that they've thought about the basics as well like this is a very mature system if it's going to have that stuff I'm not saying it's perfect uh but I am saying it is well thought out and considered and has obviously been tested on thousands of websites so I I love that I love that little detail um then we have X and Y AIS X is your horizontal Y is your vertical then the numbers come so we have m-t now you don't need the numbers you could just say oh can you no no no you you you don't need these things so you could have m-5 or M p-2 or whatever um yeah the numbers so zero is is literally nothing and then the other ones are increasing in in your padding or or margin so M1 is going to have a little bit of margin M5 is going to have quite a bit um now the amount is it's multiplying by a spacer which is defined in your variables I forget what it is by default I think it's like 12 or 16 pixels or something and uh yeah so multipli to make it a quarter of that or half that or just whatever the space is or one and a half or three times that um and it's pretty good I this is a good system this is a good set of tools um and like oh if you look at a Photoshop document will there be times where you wish you had a 2X probably if you're going to make it Pixel Perfect but the reality is um I've always been able to make it feel correct with this I'm going to take a side rant here and say like often when I'm working with a designer I will tell them not to fuss about making it Pixel Perfect I want to make it feel right using these presets if we have to maybe we end up changing the spacer value so it multiplies correctly also if we had to we could create like a I wouldn't do another number I would make one like called brand or something like that uh you know like brand padding and I would want to separate from this kind of naming scheme but um I've never needed to do that making something Pixel Perfect in Photoshop is super timec consuming and is trivially easy in code so I I uh I do like to tell designers and clients like the Photoshop document you know don't hold us to 11 pixels or whatever we will make it feel right and we'll be using tools like this that'll keep your CSS slim and make it really easy to manage the website um yeah this approach broad Strokes has just always worked for me um yeah so my advice is if you're going to get get started with this uh just start building with a little bit of everything now to get started I'm here on the homepage I think we have a get started section um you can just use the CDN so you could just click copy on that CSS copy on this JavaScript and you've got the defaults and you're ready to go like you could just uh I'll make a new document um I'm going to save it to my desktop thing. HTML and I'm in Sublime Text I'm just I hit typed exclamation mark in Tab and then I get the starting point now I can just paste this here which one is that that's the JavaScript uh go back to this page here copy the uh CSS boom now we could even move the JavaScript to the bottom of the document if we wanted but basically now we could just like start working with the stuff so let's go get uh not containers let's start with an accordion and copy that paste that in there you will see that I have this working accordion stuff in here going full width uh maybe I don't want it full width I'm just going to do a container uh a div called container here oh boy let's spell it right even okay um select that line go up here can I'm just going to tab everything that that doesn't matter but uh for me right now it does there you go so I'm already beginning to play with it I happen to know the class container uh makes things not go full width um if I'm going to show my work I bet you it's in layouts containers and there's there's even variations for small medium large size screens uh yeah it's a pretty cool system this going to take you some time you get you know to get to know this this is time well spent uh yeah so that that's where to get started now they don't leave you on your own either um oh uh I'm GNA do this one last okay up at the top here we have examples so they have starters you can you know download some code um yeah webpack is a way to like sort of compile your SAS we're going to look at that in a bit um but here some Heroes some headers some features sidebars there's so many things in here so here's an example of headers and you know obviously you don't want this many headers but like you can just rightclick view source and you're looking at the code so what do they got in here um yeah so here's a like an example of one they they've used the semantic tag header and we have container so oh we have example divider too so you can just like quickly see where those are and uh begin to copy paste uh if you're not familiar with the web inspector I can also right click on any one of these um this is opened on the side I could also make that go to the bottom I like to have it on the side when I'm testing things responsively oh I went and changed to the wrong side um yeah here I have it at the bottom now I could click this little arrow guy and like start moving around um yeah and and pick something very specific I'll click that whole thing and I get this header and I could right click on that edit as HTML copy paste it what have you um yeah yeah so these examples are really awesome and you could also go to other websites that are built with bootstrap you sort of get a sense of some of that feel sometimes but it can also be uh themed quite a bit to not look and feel like bootstrap in terms of working with bootstrap I really like code pen as a place to quickly just start working with you know the HTML CSS JavaScript being able to share it with others really quick so working with that as HTML is all well and good esec especially when you want to focus on the custom things that are only going to be unique to your site that won't be a part of bootstrap or you want to focus on the HTML markup but there does come a time where you want to start working on you know those default variables you want to change those bootstrap colors to something else and on their website they have some tutorials and guides on how to do that with um modern workflows of having your command line running and compiling all your stas I've done this one with webpack before I literally went through this tutorial um you know setting up files creating a spot where your Javas JavaScript is going to be and having something watching your code and uh compiling your sassin and all this stuff um I actually created a repo for myself uh I call it the bloop static site and basically that just allows me to just start up really quick I get my one page and I tended to just develop one page first like here's a little bit of everything that's going to make this site unique and I'll have my custom SAS and off we go let's take a look at what that ends up looking like so here I am in bloop static site can I change the font size of that sorry about the sidebar if it's kind of small to read um so I've got my index.html and I put some starter stuff in there on the sidebar this drives some some people crazy but I like a lot of white space and then these giant asky comments so I can just read it in the sidebar like here's a hero I could see a Jumbotron I could see a blog post things like that and it's just a little bit of everything that I can mix and match just as a nice starting point inside styles. sccss I see that I'm in I'm importing a variable reset and I'm importing the bootstrap index so here's there must be a variable in bootstrap called primary and I've changed it uh to a different color and here I have my bootstrap index so instead of importing it all from the uh the npm thing I'm not going to go too deep onto the the web pack side of things but um hey if you want me too that should be ask me in a comment and I'll I'll make it another one for this series but uh here you could see I've just commented out things that I don't use very much modals popovers carousels um maybe that's an opinionated thing for me should I use a carousel carousel.com is is another good example of people arguing against carousels but uh you can actually just turn that stuff off and um so if you've always felt the bootstrap is too big you do have a lot of control over that uh I can also see that an Imports here bootstrap scss variables that is where a list of the variables will be that I'm overwriting uh in this document here and so I'm not going to go any deeper on that in this video uh I will just show my my JavaScript thing it's importing some stuff this is just the way webpack asked me to set it up um and then I might have added this from HTML 5 boilerplate but uh yeah anyway I could just write my JavaScript here and it's going to be all working just the way that you think it should and so yeah this is all the stuff from that tutorial Yeah so basically that allows me to develop things uh just locally before I get it into my WordPress but I could also just develop a static site in that way um yeah moving on so uh bootstrap also has some open source icons which are actually kind of nice so I just come here I type A search like I'll type Instagram and it does that fuzzy search thing and it just pops up if I click on this I have options I can download the SVG I could use their icon font there are big accessibility issues with this um in particular this should probably have a span with the screen reader only text that would tell you what it is but uh we could skip all through that and just use the HTML and I love I could just copy it right here bam icon fonts end up being large assets that are hard to colorize hard to you know it's extra steps to make it accessible and so uh I tend to just lean towards the uh SVG approach so that's pretty cool um bootstrap also offers themes now I came here and the whole header is different which I always find jarring but it's it's here under themes under the main site and here you find some pretty cool stuff uh I'm not a huge fan which one did I buy bought one of these once um I'm not seeing it at a glance it doesn't matter so if I just click into this one randomly um I can see the standard price 49 bucks for a single site now just the way I'm doing this I I just approach that from like open source standpoint I am not going to just take this and plug this into a site I'm going to dig into what they've got and just like add to my you know static site starting point or WordPress starting point and sort of extend it from there the problem that I had was they wanted to extend the number of spacing classes that there were so um typing spacing here now you may recall it goes 0 to five I believe they added it to go to 0 to 10 and the result of doing that was taking my compiled CSS from 40 kilobytes to 130 or something like that it was It was kind of an extraordinary leap in about and like At first I was flabbergasted like you're just add you're you're like what wouldn't it just be like doubling the amount of CSS that this is but it actually it does a lot more I now this is where you'd want to fact check me I guess but like uh there are other places where th those uh these these spacing multiplications happen uh like your buttons I believe it was affecting this so inside buttons we have button large and button small I believe that was getting multiplied as well um I'm not 100% sure of that but I I know for sure that the spacing thing that they did was bloating the CSS drastically and you know if you want a little bit more spacing you could just have a couple more divs like there's there's other ways around it or in the past I will also just create a DI called like brand spacer and that just empty div will just add the space that I want like I think there's other ways around it you just create your own Lego brick um anyway so your mileage may vary on these themes just um if you're G to get one budget a couple hours to just dig into what it's doing understanding how it's impacting your end you know your footprint of how fast and Performing your site can be but I also do have to give a shout out to ninja bootstrap I don't know if I love this yet um but the makers of live canvas which is what this series is about they develop this as well and you know I I I am interested to see what they do with this so inside of this they are adding some of those margin and padding classes you could be sure that I'm going to be digging into that in the coming weeks and um they've added some other classes that they think are valid Lego bricks that are going to make building stuff easier so they have new stuff with sizing and colors and spacing um what I'm kind of really interested in though I believe they're taking inspiration from Tailwind because they have something called Tailwind Grays but they're adding all these tints and tones so instead of just having like the default primary be like that one blue color um they're adding like from 25 to 900 as like a scale and these uh Tailwind Grays background Grays they're interesting to me they it's not just gray but they've got a little bit of saturation in there a little bit of slate even the gray is a little bit warm uh zinc neutral Stone I even kind of like the naming so I don't know it's going to be in live canvas uh I imagine that is a you know I can I can uh comment out a line of CSS and it's probably going to be gone um yeah anyway I wanted to shout that one out it's a little different than a theme it's still objectoriented okay uh the last thing I wanted to show you is I just came here to uh chat gp.com and I did not sign in I'm just using the free account and I said I need a set of tabs written in bootstrap 5 please write the HTML I want three tabs details specifications reviews uh have the content of the tab be right aligned sure and um yeah it's done something and so here is what has done now it did not R align this text actually it right aligned the tabs so this is classic AI like maybe I should have written the prompt different um all I did was copy paste sa save it in HTML and open it here for you um to show you what it did uh could I work with this for sure 100% I don't need it to do anything else I can make these Tabs go to the uh right or be centered I can change the content like really all my My Philosophy with uh chat GPT is it's draft zero you're using it like the fanciest stack Overflow or you know a bootstrap documentation thing that's going to give you a way better starting point so um I I love like this is the code that it made uh the button for that that that tab has the ID and the AR labeled by and so it has those considerations um it has this justify content end that's what's pushing all the tabs to the end I believe um and it was missing this so I wrote this I put this Emoji here just to flag it for myself I wrote more content and I put text end and that fixed it so chat GPT wrote draft to zero and then I start finagling it and editing it um that's my workflow I didn't need chat GPT to make it perfect for me first try it also wrote this stuff which is kind of nice it it went and got the uh the CDN 5.3.0 that's pretty good um that is the current version so I have this isn't my first time demoing this for someone uh I've asked it to do 5.3 and it just gave me 5.0 um and at that point it was 100% fine the other thing that was interesting the previous time I did it when I asked for like I can't remember what all the tabs were but I said specifications for sure and it was calling it specs Tab and I just loved that it shortened specifications to Specs which is like a common short form that you might see so chat GPT it might be different from one time that you try it to the next even if you ask for the same thing but uh as a pair programmer hey that's pretty helpful so that's just a high level overview of bootstrap what it is possibly what it isn't uh it's a tool that the more you get to know it the faster and better it becomes and so I can build something that I see in Photoshop kind of at the speed of thought some of these classes they just become in intuitive over time so you're container to put things in the middle of the screen your text aligning your padding your spacing all that stuff's going to be intuitive you can also use tools like text expanders or Snippets in your code Editor to to speed it up even more it's just a really great tool to create well tested uh stable code that is just going to do what your website needs it to

Channel: Arley McBlain

Views: 105

Keywords: wordpress, livecanvas, bootstrap

Id: T8wgDQkxx7s

Length: 27min 33sec (1653 seconds)

Published: Tue Jun 11 2024