1
00:00:00,270 --> 00:00:05,730
Welcome back in this unit I'm going to introduce a new tool called Bootstrap and I'm on the bootstrap

2
00:00:05,730 --> 00:00:08,110
home page get bootstrapped dotcom.

3
00:00:08,330 --> 00:00:12,570
And I just want to take a few minutes in this intro video to explain what bootstrap is and why we're

4
00:00:12,570 --> 00:00:13,180
using it.

5
00:00:13,230 --> 00:00:17,100
And then also to show you a few examples of sites that use bootstrap.

6
00:00:17,100 --> 00:00:20,350
So let's begin just by reading the official bootstrap blurb.

7
00:00:20,610 --> 00:00:26,550
Bootstrap is the most popular TMLC SS in javascript framework for developing responsive mobile first

8
00:00:26,550 --> 00:00:28,310
projects on the Web.

9
00:00:28,710 --> 00:00:30,460
Let's break that down a little bit.

10
00:00:30,480 --> 00:00:32,540
Bootstrap is extremely popular.

11
00:00:32,580 --> 00:00:37,830
In fact it's the most starred and forked repository on get hub which basically means that it has the

12
00:00:37,830 --> 00:00:43,410
most people using it the most people favor adding it on get help and all that bootstrap is is actually

13
00:00:43,410 --> 00:00:47,550
a single file of success and a single file of javascript.

14
00:00:47,550 --> 00:00:52,080
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

15
00:00:52,080 --> 00:00:54,180
can include them in our own application.

16
00:00:54,180 --> 00:00:59,280
Basically we take someone else's code and from Bootstrap we added into our own application and it helps

17
00:00:59,280 --> 00:01:04,320
us make good looking sites that are responsive and it helps us make them fast without having to write

18
00:01:04,320 --> 00:01:05,950
a ton of our own code.

19
00:01:05,970 --> 00:01:08,760
There are two main reasons that I'm showing it to you in this course.

20
00:01:08,760 --> 00:01:10,890
The first is that it's very popular.

21
00:01:10,890 --> 00:01:11,850
Lots of places use it.

22
00:01:11,850 --> 00:01:15,560
Lots of companies lots of developers use it and it's just worth knowing.

23
00:01:15,690 --> 00:01:20,250
But the second is that it's going to help us make good looking Web sites pretty quickly in this course

24
00:01:20,250 --> 00:01:20,640
.

25
00:01:20,640 --> 00:01:25,080
So when we're learning back and stuff when we're focusing on Node and express and Mongo and mongoose

26
00:01:25,250 --> 00:01:30,750
and knee deep and all of this complex back and logic we can still make something that looks good without

27
00:01:30,750 --> 00:01:36,480
having to devote an hour or two hour video to styling something we can plug bootstrap in and we can

28
00:01:36,480 --> 00:01:40,020
get things going in 10 15 minutes and we'll look pretty good.

29
00:01:40,020 --> 00:01:45,360
The next thing I'll do is give you a quick tour of the docks but bootstrap has famously good documentation

30
00:01:45,660 --> 00:01:50,840
lots of good examples and they actually use bootstrap on this website which makes sense.

31
00:01:51,060 --> 00:01:57,090
So let's start by clicking on C Ss and that's it mentioned bootstrap is just a single CSSA file a single

32
00:01:57,090 --> 00:02:00,250
javascript file inside that CSSA file.

33
00:02:00,300 --> 00:02:02,560
There's a bunch of stuff that we get for free.

34
00:02:02,610 --> 00:02:05,420
So let's take a look at Buttons.

35
00:02:05,460 --> 00:02:10,890
So if we want to make a button and we have bootstrapped included in our application we can add this

36
00:02:10,890 --> 00:02:16,680
class to class is actually Beati and PTEN default and we get these buttons.

37
00:02:17,010 --> 00:02:18,840
We can do different colors.

38
00:02:19,470 --> 00:02:21,260
Let's take a look at forms.

39
00:02:21,360 --> 00:02:22,870
We get nice inputs here.

40
00:02:23,310 --> 00:02:29,310
And it's also really important to note everything is responsive on the site so you can see we get things

41
00:02:29,310 --> 00:02:31,890
that respond to the width of the screen.

42
00:02:32,250 --> 00:02:34,060
We also have different types of forms.

43
00:02:34,080 --> 00:02:35,680
You can combine the different pieces.

44
00:02:35,700 --> 00:02:38,330
So here they're using a button with a form.

45
00:02:38,400 --> 00:02:43,230
So it's like Lego pieces bootstrap and a lot of ways it's just have been of Lego pieces that you can

46
00:02:43,230 --> 00:02:46,660
put together and add to your site as you see fit.

47
00:02:46,740 --> 00:02:48,690
We'll be going over most of these components.

48
00:02:48,720 --> 00:02:53,800
Most of these big pieces once we start working with it and writing bootstrap code ourself.

49
00:02:54,270 --> 00:03:00,420
So for now we'll move on and when to show you the next tab which is components components contain some

50
00:03:00,420 --> 00:03:05,750
of the bigger pieces of bootstrap that we can use and that includes things like nav bars.

51
00:03:05,940 --> 00:03:11,520
And this is probably one of the most popular aspects of bootstrap that lots and lots of sites use as

52
00:03:11,520 --> 00:03:13,680
you can see with a little bit of code.

53
00:03:13,710 --> 00:03:18,450
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

54
00:03:18,450 --> 00:03:19,680
bar from scratch.

55
00:03:19,680 --> 00:03:26,880
And this comes with drop downs form and there are multiple types of bars different colors some that

56
00:03:26,880 --> 00:03:30,660
are fixed to the top of the page some that will scroll.

57
00:03:30,690 --> 00:03:36,200
There's other components like the Jumbotron which is a way of showcasing some content on your Web site

58
00:03:37,110 --> 00:03:38,390
progress bars.

59
00:03:38,670 --> 00:03:40,330
And these all come with bootstrap.

60
00:03:40,680 --> 00:03:45,750
So you might be wondering right now if bootstrap comes to all these pieces and they're already pre styled

61
00:03:46,040 --> 00:03:48,970
what every site that uses bootstrap looked the same.

62
00:03:49,320 --> 00:03:50,760
And the answer is yes and no.

63
00:03:50,760 --> 00:03:53,240
It depends on how the site uses bootstrap.

64
00:03:53,760 --> 00:03:58,440
I would argue that a company or a project that uses bootstrap well makes it hard to tell that they're

65
00:03:58,440 --> 00:04:03,390
actually using bootstrap because they use those main components and then you can go in and write your

66
00:04:03,390 --> 00:04:04,490
own styles on top.

67
00:04:04,500 --> 00:04:07,860
Change the colors change the fonts change some of the hover effects.

68
00:04:07,920 --> 00:04:13,290
You don't have to use the exact same colors and everything that come with bootstrap but that doesn't

69
00:04:13,290 --> 00:04:17,670
mean that there's anything inherently bad in using the built in Bootstrap styles either.

70
00:04:17,670 --> 00:04:19,080
And we'll definitely be doing both.

71
00:04:19,200 --> 00:04:23,580
So when we're making a site and a focus is not really on the front end we just want to make something

72
00:04:23,580 --> 00:04:25,290
that looks presentable quickly.

73
00:04:25,290 --> 00:04:30,310
Basically prototype front end will use bootstrap and we won't really modify many pieces.

74
00:04:30,780 --> 00:04:34,530
But then if we're working on something a little larger something that we don't want to look like we

75
00:04:34,530 --> 00:04:39,930
use bootstrap without changing anything at all then we'll go in and add some of our own styles basically

76
00:04:39,930 --> 00:04:42,580
add a coat of spray paint on top of bootstrap.

77
00:04:42,600 --> 00:04:47,250
The next thing I want to do is show you some of the sites that are built with bootstrap and Buddh trip

78
00:04:47,250 --> 00:04:50,740
actually has an official Web site where they showcase some of those sites.

79
00:04:50,970 --> 00:04:54,330
If you click on Expo I have it open already.

80
00:04:54,330 --> 00:04:59,730
You can see that they showcase beautiful and inspiring uses a bootstrap so we can open some of these

81
00:04:59,970 --> 00:05:01,890
to open them and new tabs.

82
00:05:02,270 --> 00:05:03,870
And these are just the most recent ones.

83
00:05:03,870 --> 00:05:05,390
There's hundreds on this site.

84
00:05:05,420 --> 00:05:11,400
You can see tons and tons of them and you can keep scrolling and scrolling and then we can go to a few

85
00:05:11,400 --> 00:05:14,660
older and there there's so many different sites that are using it.

86
00:05:15,000 --> 00:05:17,050
And they don't really all look the same.

87
00:05:17,610 --> 00:05:20,190
Yes maybe a lot of them have a nav bar.

88
00:05:20,190 --> 00:05:25,470
Maybe a lot of them have this full screen large image layout but that's more of a design trend than

89
00:05:25,470 --> 00:05:28,450
something that bootstrapped it purely responsible for.

90
00:05:28,980 --> 00:05:30,890
So let's take a look at some of these.

91
00:05:30,930 --> 00:05:36,400
This one is creative Tim which is a company that makes Web site templates actually.

92
00:05:36,630 --> 00:05:40,330
And you can see we have this nice grid of images.

93
00:05:40,500 --> 00:05:41,600
It's very responsive.

94
00:05:41,610 --> 00:05:46,710
If I shrink this down we get our little nav bar here.

95
00:05:46,920 --> 00:05:52,660
So this is a bootstrap component the way that everything is laid out in this grid.

96
00:05:52,890 --> 00:05:57,960
Bootstrap is partially responsible for that but you can also see that they're not using the default

97
00:05:58,010 --> 00:05:59,540
built in Bootstrap buttons.

98
00:05:59,580 --> 00:06:00,710
They've changed them.

99
00:06:00,780 --> 00:06:01,960
Things look different.

100
00:06:02,190 --> 00:06:06,130
So I think this is a really nice use of bootstrap that's a really nice looking site.

101
00:06:06,180 --> 00:06:12,170
It works well and it uses bootstrap but it doesn't rely on bootstrap 100 percent.

102
00:06:13,080 --> 00:06:15,120
Let's take a look at one or two more.

103
00:06:15,480 --> 00:06:19,640
So this one is called Indicus or indices something like that.

104
00:06:19,710 --> 00:06:24,200
Apparently they design and build digital products that people enjoy using.

105
00:06:24,240 --> 00:06:25,520
So let's scroll down here.

106
00:06:25,680 --> 00:06:26,980
Take a look at what we have.

107
00:06:27,270 --> 00:06:31,950
So there's some content that's probably built with the bootstrap grid system which helps organize and

108
00:06:31,950 --> 00:06:37,500
lay things out lay out as I've mentioned before is notoriously difficult in Pearcey SS.

109
00:06:37,560 --> 00:06:42,420
It's getting better but bootstrap is really really useful to help us lay things out on our application

110
00:06:42,420 --> 00:06:42,910
.

111
00:06:43,260 --> 00:06:49,380
And we have a little footer bar there's a nav bar up here so it's really fun to go to bootstrap Expo

112
00:06:49,610 --> 00:06:54,620
take some time to explore some of the projects that used to bootstrap and see how they use it and all

113
00:06:54,640 --> 00:06:59,970
the different ways that companies are modifying it adding in their own fonts their own colors and really

114
00:06:59,970 --> 00:07:05,160
figure out what are the core components that lots and lots of sites are using and why decide to use

115
00:07:05,170 --> 00:07:05,930
bootstrap.

116
00:07:06,170 --> 00:07:10,950
And in my opinion it really comes down to the grid system which we'll be devoting a video in this unit

117
00:07:10,950 --> 00:07:14,970
to and the nav bars and the responsiveness of everything.

118
00:07:15,420 --> 00:07:15,710
OK.

119
00:07:15,720 --> 00:07:20,230
So to wrap up I'm going to show you a simple site that we'll be making.

120
00:07:20,280 --> 00:07:23,110
This is our startup called heavy petting.

121
00:07:23,190 --> 00:07:28,200
It helps you find your perfect feline soulmate and it uses bootstrap.

122
00:07:28,200 --> 00:07:33,610
You can see we have a nav bar up here just like that we have sign up Morgan buttons.

123
00:07:33,630 --> 00:07:39,970
We get these little icons then we have our text here and the little tag line and then our button.

124
00:07:40,290 --> 00:07:46,880
And then as I resize things everything is responsive you can see things are moving around shifting around

125
00:07:46,890 --> 00:07:47,060
.

126
00:07:47,190 --> 00:07:52,660
And most importantly we get that little hamburger and we have a mobile friendly nav bar.

127
00:07:52,710 --> 00:07:57,780
So at the end of this unit we'll be working on creating this fake startup landing page that matches

128
00:07:57,960 --> 00:08:00,540
people and pets in romantic relationships