Welcome back in this unit I'm going to introduce a new tool called Bootstrap and I'm on the bootstrap
home page get bootstrapped dotcom.
And I just want to take a few minutes in this intro video to explain what bootstrap is and why we're
using it.
And then also to show you a few examples of sites that use bootstrap.
So let's begin just by reading the official bootstrap blurb.
Bootstrap is the most popular TMLC SS in javascript framework for developing responsive mobile first
projects on the Web.
Let's break that down a little bit.
Bootstrap is extremely popular.
In fact it's the most starred and forked repository on get hub which basically means that it has the
most people using it the most people favor adding it on get help and all that bootstrap is is actually
a single file of success and a single file of javascript.
Now there's a lot of C S S and a lot of javascript in those files but they're just two files and we
can include them in our own application.
Basically we take someone else's code and from Bootstrap we added into our own application and it helps
us make good looking sites that are responsive and it helps us make them fast without having to write
a ton of our own code.
There are two main reasons that I'm showing it to you in this course.
The first is that it's very popular.
Lots of places use it.
Lots of companies lots of developers use it and it's just worth knowing.
But the second is that it's going to help us make good looking Web sites pretty quickly in this course
.
So when we're learning back and stuff when we're focusing on Node and express and Mongo and mongoose
and knee deep and all of this complex back and logic we can still make something that looks good without
having to devote an hour or two hour video to styling something we can plug bootstrap in and we can
get things going in 10 15 minutes and we'll look pretty good.
The next thing I'll do is give you a quick tour of the docks but bootstrap has famously good documentation
lots of good examples and they actually use bootstrap on this website which makes sense.
So let's start by clicking on C Ss and that's it mentioned bootstrap is just a single CSSA file a single
javascript file inside that CSSA file.
There's a bunch of stuff that we get for free.
So let's take a look at Buttons.
So if we want to make a button and we have bootstrapped included in our application we can add this
class to class is actually Beati and PTEN default and we get these buttons.
We can do different colors.
Let's take a look at forms.
We get nice inputs here.
And it's also really important to note everything is responsive on the site so you can see we get things
that respond to the width of the screen.
We also have different types of forms.
You can combine the different pieces.
So here they're using a button with a form.
So it's like Lego pieces bootstrap and a lot of ways it's just have been of Lego pieces that you can
put together and add to your site as you see fit.
We'll be going over most of these components.
Most of these big pieces once we start working with it and writing bootstrap code ourself.
So for now we'll move on and when to show you the next tab which is components components contain some
of the bigger pieces of bootstrap that we can use and that includes things like nav bars.
And this is probably one of the most popular aspects of bootstrap that lots and lots of sites use as
you can see with a little bit of code.
It does look like a lot but I assure you it's a lot less than it would be if we were writing an NAV
bar from scratch.
And this comes with drop downs form and there are multiple types of bars different colors some that
are fixed to the top of the page some that will scroll.
There's other components like the Jumbotron which is a way of showcasing some content on your Web site
progress bars.
And these all come with bootstrap.
So you might be wondering right now if bootstrap comes to all these pieces and they're already pre styled
what every site that uses bootstrap looked the same.
And the answer is yes and no.
It depends on how the site uses bootstrap.
I would argue that a company or a project that uses bootstrap well makes it hard to tell that they're
actually using bootstrap because they use those main components and then you can go in and write your
own styles on top.
Change the colors change the fonts change some of the hover effects.
You don't have to use the exact same colors and everything that come with bootstrap but that doesn't
mean that there's anything inherently bad in using the built in Bootstrap styles either.
And we'll definitely be doing both.
So when we're making a site and a focus is not really on the front end we just want to make something
that looks presentable quickly.
Basically prototype front end will use bootstrap and we won't really modify many pieces.
But then if we're working on something a little larger something that we don't want to look like we
use bootstrap without changing anything at all then we'll go in and add some of our own styles basically
add a coat of spray paint on top of bootstrap.
The next thing I want to do is show you some of the sites that are built with bootstrap and Buddh trip
actually has an official Web site where they showcase some of those sites.
If you click on Expo I have it open already.
You can see that they showcase beautiful and inspiring uses a bootstrap so we can open some of these
to open them and new tabs.
And these are just the most recent ones.
There's hundreds on this site.
You can see tons and tons of them and you can keep scrolling and scrolling and then we can go to a few
older and there there's so many different sites that are using it.
And they don't really all look the same.
Yes maybe a lot of them have a nav bar.
Maybe a lot of them have this full screen large image layout but that's more of a design trend than
something that bootstrapped it purely responsible for.
So let's take a look at some of these.
This one is creative Tim which is a company that makes Web site templates actually.
And you can see we have this nice grid of images.
It's very responsive.
If I shrink this down we get our little nav bar here.
So this is a bootstrap component the way that everything is laid out in this grid.
Bootstrap is partially responsible for that but you can also see that they're not using the default
built in Bootstrap buttons.
They've changed them.
Things look different.
So I think this is a really nice use of bootstrap that's a really nice looking site.
It works well and it uses bootstrap but it doesn't rely on bootstrap 100 percent.
Let's take a look at one or two more.
So this one is called Indicus or indices something like that.
Apparently they design and build digital products that people enjoy using.
So let's scroll down here.
Take a look at what we have.
So there's some content that's probably built with the bootstrap grid system which helps organize and
lay things out lay out as I've mentioned before is notoriously difficult in Pearcey SS.
It's getting better but bootstrap is really really useful to help us lay things out on our application
.
And we have a little footer bar there's a nav bar up here so it's really fun to go to bootstrap Expo
take some time to explore some of the projects that used to bootstrap and see how they use it and all
the different ways that companies are modifying it adding in their own fonts their own colors and really
figure out what are the core components that lots and lots of sites are using and why decide to use
bootstrap.
And in my opinion it really comes down to the grid system which we'll be devoting a video in this unit
to and the nav bars and the responsiveness of everything.
OK.
So to wrap up I'm going to show you a simple site that we'll be making.
This is our startup called heavy petting.
It helps you find your perfect feline soulmate and it uses bootstrap.
You can see we have a nav bar up here just like that we have sign up Morgan buttons.
We get these little icons then we have our text here and the little tag line and then our button.
And then as I resize things everything is responsive you can see things are moving around shifting around
.
And most importantly we get that little hamburger and we have a mobile friendly nav bar.
So at the end of this unit we'll be working on creating this fake startup landing page that matches
people and pets in romantic relationships