On today’s episode, we are going to talk about the framework BootStrap right here on Your Website Engineer podcast, Episode No. 296. Hello, everybody. Welcome back to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. Today we’re going to be talking about a thing called BootStrap, what it is, how to use it, and what are the benefits of using it. But first I’ve got a couple announcements, as always, to start off the top of the show.

The first one is I want to let you know about the WordPress 4.6 release candidate is now available. That means we’re just about two to two and a half weeks away from the brand new version of WordPress, WordPress 4.6. There’s been a few refinements made to get to this release candidate and now they’re only looking for bugs to squash before the release on August 16. So if you haven’t had a chance to test 4.6, now is the time. And in just a couple weeks I’ll be able to go through and share all of the important details of what has come out in WordPress 4.6.

One of them though that I’d like to share with you today is WordPress 4.6 will detect broken links inside the editor. This is kind of dubbed the name “Spellcheck for URLs.” And it basically will allow a notification to come up to let you know that the link does not work in the editor as you are adding links to your posts and pages. So it’s really kind of a cool thing. You won’t need the broken link checker anymore. You can have the broken link checker to do a scan of previous posts and pages within your website but this will basically just let you know right away that, hey, there’s something wrong and you need to take a look at that link.

Another thing in the news, coming from WooCommerce is that WooCommerce now works with Square, it works with integration for Square. So if you want to use Square as your payment processor, if you’ve already got that set up, now you can take online orders through WooCommerce with Square. One of the coolest parts about Square is that it adjusts inventory on the fly. And so if you have somebody buy something, it will automatically reduce the inventory like most payment gateways will.

But when you go ahead and refund an item, you have the ability to say, yes, I want this item back in inventory which is really nice. And some of the other payment gateways don’t have that capability and that functionality quite yet. WooCommerce Square is a paid-for extension for WooCommerce. It starts at $79.00 and goes up to $179.00 for up to five sites. So if you’re interested in that, head on over to woocommerce.com/products/square.

And one last thing that I want to share with you today is just an idea that somebody, a listener, wrote in and I just don’t have time to implement anything like this but it’d be really cool. And he was talking about building a launch plugin. And this would be a plugin that you could create that kind of went through the steps from a couple weeks ago, the WordPress checklist from Episode No. 294. It’d be a neat plugin that you could go in and you could allow people to make a custom list and then they could just go through it and check all the boxes when they’ve done certain things.

When they’ve made sure their site’s public, when they’ve done this, that, and the other thing to get ready for a launch. So that’s kind of a neat idea for a plugin. You could build that and then as you did those things inside the dashboard, you could just check them off and say, yep, I’ve done this, yes, I’ve done that, yes, I’ve done that. So that’s a neat idea for a plugin if somebody wants to run with that and build something for the WordPress community. That is an idea.

All right. In the “Is there a plugin for that?” today, I want to tell you about a plugin called Gym Studio Membership Management. And this is a plugin that will add a class calendar, a schedule of your classes, and membership checkout to your posts and pages. And so this is a nice plugin if you’re running something along those lines. I can see it also working for not just a gym, a yoga studio, things like that, but you could also use it for a lot of different other things that you have. Some sort of daily class schedule, maybe even like a library that has a class schedule for a book club or whatever that looks like or whatever that is.

So that is something to think about as well. If you need a plugin along those, it’s fully responsive. It looks like it integrates really well with different themes. And it’s just something that, in case you need that kind of functionality, that is a good plugin to look at. So check out Gym Studio Membership Management.

All right. One last thing before we get going is I want to share with you one more resource for learning and this one is called FreeCodeCamp.com. And this is a great way to become a frontend or backend developer. It’s like a ton and ton of free video lessons online. I’ve went through the first kind of module. It’s a couple hours’ worth of content and it has been really, really cool. It’s been teaching me a lot of things that, yes, I knew but some of the things it’s like, oh, well, that’s why that works that way. And not just necessarily like, oh, you just guessed and that’s the way the things work.

And so I’m working through that. It’s really nice. I’ve went through a few of the sections on – the getting started section, so HTML 5 and CSS. So I’m doing some responsive design with BootStrap and we’ll talk about in just a little bit. And then a little bit of jQuery. And then there’s a project that I’m working on right now and then it goes into basic JavaScript and it’s got a bunch of lessons about basic JavaScript. It talks about object-oriented and functional programming, basic algorithms, scripting.

And some of these courses and sections will take 50 hours or 100 hours of time to kind of work through all of the videos in the module. I’ve found that those estimates are a little on the high side. That something that said it would take five hours, I took maybe an hour and a half or two hours. But that’s because I have some programming background and I was just going through the exercises and the motions to do all of the parts of the Free Code Camp.

And it goes into JSON, APIs, and Ajax. It’s got more projects. We’ve got algorithm scripting. It’s just got a lot of information in there. It talks about data visualization and react projects. And essentially it’s got a huge amount of information in there and it’s set to allow you to be a full-time programmer by the time it’s all said and done, going through all of the exercises. You’ll have enough knowledge to go out and start creating either your own website projects or start building projects for clients or look for jobs in the web development space.

They also have a section at the end that is preparation for an interview for a coding type of interview. And so that’s like 70 hours’ worth of content as well and a couple mock interviews if you get through all of the certifications for frontend, data visualization, backend, and full stack. If you get through all of those sections then you can unlock the power of having mock interviews with somebody from the Free Code Camp team. It’s a nonprofit organization and it’s just kind of a really neat platform.

And I’ve been finding I’m having a lot of fun doing it. I think it says in general it’s 2,000 hours in time from the beginning to the end. And so if you want challenges and just a neat way to learn and understand the different elements of building websites then that would be a great course to go through. So it’s over at FreeCodeCamp.com. And, like I said, one of the sections that I went through already was responsive design with BootStrap. And I’m like, huh, I’ve heard about BootStrap, I’ve used it in some things before just because it’s been built into things before but I never really had a good understanding of what it was.

And so today I just want to spend some time talking about BootStrap and what it is and how to use and what are some of the benefits of using BootStrap. So let’s go ahead and just dive right in. BootStrap is the most popular HTML CSS and JavaScript framework for developing responsive and mobile first projects on the web. So that means there’s so many themes that are using BootStrap, there’s so many people that use BootStrap out of the box as a template or a framework for what they actually do online and what they’re actually building. And it’s really pretty nice. It’s – let’s see. It’s like a framework.

When you think about WordPress, if you think about – Genesis is a good idea of a framework. Like Studio Press is Genesis, that’s a framework. You think about the underscores theme by Automatic, that’s a framework. And BootStrap can be used in the exact same way. Now granted it’s not gonna be in a WordPress theme. It’s just an HTML site that you can build into a WordPress theme but it’s a great framework and a great layout for getting started without having to come up with all kinds of styling pieces for every single element that you need on the web.

So it’s a great thing. It’s also always responsive. It gives you very, very easy entrance into building a website that’s fully responsive by using some of their special classes and whatnot. And so that is one of the benefits of using BootStrap. Let’s see. Another thing is that it also has built-in Less and Sass. And so if you want to use some sort of compiler for your CSS, that’s built in as well.

And so, in general, BootStrap can be boiled down to three main files. There’s a BootStrap that’s CSS which is the CSS framework. There’s a BootStrap.js which is a JavaScript and jQuery framework. And there’s gylphicons which is an icon set and there’s a few hundred icons that are just built in that you can use and you can scale and make bigger and smaller and customize them with CSS colors and whatnot. So BootStrap requires jQuery to function, which is pretty popular and widely used with JavaScript library. So that simplifies and adds cross-browser compatibility to your JavaScript.

So the framework is important because it will allow you to create websites more quickly. It will prevent repetition between projects. You’ll be able to quickly adapt your website for various screen sizes via mobile, desktop, everything in between. You can add consistency to your design and your code by using the JavaScript framework and make it so all of your websites are very, very consistent. It allows you to quickly and easily prototype new designs and it ensures browser compatibility. And so those are just some basics because it’s been tested to work with the different big name browsers.

The grid is probably one of the most essential and the best aspects of the framework. And so if you ever try to lay out things in columns on a website, maybe you want a left column that’s your main column, that’s 66 percent of the width of the page, and then the other 33 percent is your side bar. You can build that by these special classes. And BootStrap is set up to be 12 columns wide. And so if you say you want a class that’s 12 across, that’s going to give you the entire width, a full width page. If you want to say you have two classes, a six column and a six column, then you have two columns that are exactly the same size.

So it makes it really, really easy if you want to even have columns inside of your webpage itself. You know, maybe a left and right column for whatever, or three columns or four columns, like if you want to put products in different columns or whatever. You can do that with BootStrap. So BootStrap is – I’ve been finding it’s been a lot of fun. It allows you to easily add classes. Say you want to add a button class, you add BTN. You add that class to a link and it turns it into a button. Like it’s just that easy. Then you can customize it and you can style it and so then all of your buttons across your site will be the exact same color.

The glyphicons are really nice as well. Like I said, there’s hundreds and hundreds and hundreds of these glyphicons that you can use to create images on your website which will be fully responsive so they’ll get bigger and smaller depending on their size. They’ll be crystal clear. They’ll be exactly – they’ll scale and they won’t be pixelated. You can customize with them colors and you can put them everywhere that you want it to be.

More things that come with BootStrap is its automatically built-in buttons. We’ve got dropdowns that are very nice and stylized. You can align things whether left align or right align. You can do that. You can have dividers inside your menu items. You can do button groups and so there’s different colors of buttons by default. You can have green for success messages and red for notices or warnings. You could do so many things that are just built in with BootStrap and you just have to add simple classes. So looking at adding single buttons, for example. You could add a button and you just put in what color that you want the button and it automatically just adds that color right to the button.

Let’s see what else there is. I’m on the getbootstrap.com/components page and if you look at it, it just has hundreds and hundreds and hundreds of things that are built right in. Not it’s cool because it is a framework that’s very lightweight. And so adding all of these features and all of this functionality – and since it’s all code, it’s not adding a lot of extra bloat. It’s not making your website slow. It’s all dynamically created and it’s just really, really fast and works really, really well. It has abilities to go in and you can change your input.

You can make your input look really nice. You can do checkboxes. You can do styling with buttons. You can do buttons with dropdowns. You can have multiple buttons in the same little window. You can do nav bars like if you want your navigation to go across the top and to stay fully across the top and not move when you scroll. This was one of the features that I was looking for in a WordPress theme a few years ago when I changed my theme. And this is built-in with BootStrap and all you have to do is add a couple lines of code and it just starts working which is really nice.

Let’s see what else there is. There’s just hundreds and hundreds and hundreds of things. They’ve got something built-in called a Jumbotron which is the full-width, kind of big area on the top of your website where a lot of people are now using a slider as an intro or just a nice picture, kind of a welcome to your website type of a thing. They’ve got all of that just built in to BootStrap itself. And so it’s called – a lot of the information you can get is over at getbootstrap.com.

And so basically what you would want to do and how you would use it is you would download it and you would use that as your beginning piece of the puzzle to start building a website. So it doesn’t come with any HTML. You just start adding the HTML and you can start adding classes to each of the components inside your website and it just works really, really well. I think that a good way to kind of just get an overarching idea of how it works is going through that Free Code Camp course.

And that just will kind of highlight and share and show exactly how BootStrap works and how each of those pieces of the puzzle work. I believe it was a 15 or 20 little section of courses or 15 or 20 little videos that I went through. And it just gave a really good understanding of how it is and how you can start using it and utilizing it to make websites much faster and much easier to use. I think you could probably, if you wanted to, you could go in and you could add BootStrap if you needed to make a site more responsive. You could add BootStrap. But it’s probably best to just start as a framework, as a brand new place to start building a website theme.

Now a few reasons why you might want to use this. I covered a few of these earlier but the speed of development is going to speed up tremendously. You’re always using the same framework so you’re always using the same classes when you’re building websites and it just makes it that much faster to get the ball rolling with the website going. Responsiveness, that’s another thing. It’s really great because your site is going to be responsive whether it’s on a mobile device or it’s going to be on a desktop. So that’s really nice as well.

The consistency is another thing. It was actually developed by a few of the Twitter employees. And it’s to encourage consistency across internal tools. And so that was the main reason that it was built. But if you want to have a consistent pattern over different websites, it’s going to be very easy to do that with BootStrap. It’s very customizable. You can actually go to the BootStrap customize page and you can say all of the features that you want and it will just download that specific version of BootStrap.

So say you need the print media styles, you need typography, you need grid systems, you need tables, you need breadcrumbs, you need input groups, you need popovers, you need modules, you need carousel, and you need basic utilities. You then say I want all those things, click a button and then it will just pull in all of those specific pieces, add those to your BootStrap framework or BootStrap starter kit, and it will go ahead and use that which is really nice.

Another thing is there’s hundreds of thousands of people that are using BootStrap so the support community is really big. There’s a lot of people using it if you ever have a question, you can reach out to people that are using the theme which is really nice. There’s a few other advantages besides those. It’s easy to use. Like once you get the hang of it, it makes it really, really easy. There’s not a lot of CSS that you need to write. Like all the main styling elements of a website are done with BootStrap which is nice.

It’s compatible with all browsers. It has been tested with Firefox and Chrome and Safari, Internet Explorer, Opera. So it’s guaranteed to work with that so you can spend less time testing those when you get ready to launch your website. And it’s open source. It’s completely free to download and use and people continually work on it, very much like WordPress. It’s a strong community of people that are building WordPress and making WordPress better. Same is with BootStrap and people going in and making BootStrap better, coming up with new classes.

I see that on the notification on the BootStrap website there, it looks like they’re getting ready to announce BootStrap 4. And so that’s another thing that – so I don’t know what that entails, like more features, more classes, more icons. I’m not sure what’s all in that but they’re continuing to work to improve it and make it better and make it easier to build websites. So that was the main thing. I just kind of wanted to give a broad overview of how BootStrap works and what that it is. And I think if you’re building websites, it’s a really neat thing to learn. A new kind of framework to take under your belt and try to learn so you can design and build websites faster.

One thing that I want to share before we get out of here was I got a note from a listener, Chris, and he just said that he wanted to send thanks and just say that he transferred his website from GoDaddy to Flywheel and he is just very impressed. He’s excited about how quickly his website is running and he’s looking at transitioning some of the other websites that he has in the future to Flywheel and to start using Hover as links. And those are some of the links that you can find over on YourWebsiteEngineer.com/resources.

Hover is my favorite hosting company by far. And if you are looking to get a better host, one that’s going to run better and work faster, I highly recommend checking out YourWebsiteEngineer.com/flywheel. All right. That’s all I’ve got for you this week. If you are interested in learning more about BootStrap, I highly recommend the course over at FreeCodeCamp.com. And until next week, we’ll talk again soon. Take care. Bye-bye.