1
00:00:00,000 --> 00:00:03,990
As you begin to develop web sites, you'll find that you often do the same

2
00:00:04,000 --> 00:00:06,990
things over and over again when writing CSS.

3
00:00:07,000 --> 00:00:09,990
At a minimum, you'll have to figure out how you want to deal with browser

4
00:00:10,000 --> 00:00:14,990
inconsistencies, what type of layout styles to use, and what kind of typographic

5
00:00:15,000 --> 00:00:16,990
treatment you'll use for your site.

6
00:00:17,000 --> 00:00:20,990
Over time you'll find that you begin to develop a consistent way of handling

7
00:00:21,000 --> 00:00:22,990
these issues thorough your styles.

8
00:00:23,000 --> 00:00:26,990
In many ways, it would be advantageous to have a templating system in place to

9
00:00:27,000 --> 00:00:29,990
speed up the process of generating those styles.

10
00:00:30,000 --> 00:00:32,990
Well, that's where CSS frameworks come in.

11
00:00:33,000 --> 00:00:37,990
CSS frameworks are pre-existing CSS libraries that are designed to give you a

12
00:00:38,000 --> 00:00:42,990
starting point for your site's CSS, as well as to give you tools to make page

13
00:00:43,000 --> 00:00:44,990
layout and typography faster to implement.

14
00:00:45,000 --> 00:00:49,990
There are a lot of different CSS frameworks available, with a wide variety of

15
00:00:50,000 --> 00:00:53,990
features, but as a general rule, here's how they work.

16
00:00:54,000 --> 00:00:58,990
Most of the frameworks come with a style sheet that contains a base level set of styles.

17
00:00:59,000 --> 00:01:04,990
These will typically contain a CSS reset to account for browser default styling,

18
00:01:05,000 --> 00:01:09,990
baseline rules for common elements, basic rules for structural elements, and

19
00:01:10,000 --> 00:01:13,990
rules that help with browser inconsistencies.

20
00:01:14,000 --> 00:01:18,990
From there, the framework might include styles for form and table styling, styles

21
00:01:19,000 --> 00:01:24,990
to control the site's typography, and a CSS grid for layout.

22
00:01:25,000 --> 00:01:29,990
CSS grids allow you to quickly build multi-column layouts based on a specific grid.

23
00:01:30,000 --> 00:01:36,990
The grids themselves might be based on a fixed size, a specific aspect ratio, or fluid columns.

24
00:01:37,000 --> 00:01:40,990
Basically, they work by having pre-built classes that you can assign to

25
00:01:41,000 --> 00:01:42,990
structural elements.

26
00:01:43,000 --> 00:01:46,990
Those classes will control the width and layout of containers, making the

27
00:01:47,000 --> 00:01:52,990
process of building your layout as simple as applying classes to the containing elements.

28
00:01:53,000 --> 00:01:56,990
Developers will often build CSS grids as part of a larger framework, although

29
00:01:57,000 --> 00:01:59,990
it's not uncommon to see them as stand-alone tools.

30
00:02:00,000 --> 00:02:06,990
Now the choice to use or not use a CSS framework is entirely up to you or your team.

31
00:02:07,000 --> 00:02:08,990
There are both pros and cons to using them,

32
00:02:09,000 --> 00:02:13,990
so let's take a look at how to determine if a CSS framework is right for your project.

33
00:02:14,000 --> 00:02:19,990
On the plus side, CSS frameworks can save you a lot of work, especially if

34
00:02:20,000 --> 00:02:23,990
you're working on a larger site that requires multiple styling options.

35
00:02:24,000 --> 00:02:28,990
They can also take the worry away about generating cross-browser compliant code.

36
00:02:29,000 --> 00:02:33,990
In the most cases, this headache will be taken care of for you by the framework.

37
00:02:34,000 --> 00:02:39,990
For frameworks that have grids built in, the process of generating layouts is much faster.

38
00:02:40,000 --> 00:02:43,990
Many of the grids are designed to be extremely flexible and give you multiple

39
00:02:44,000 --> 00:02:45,990
options for creating multi-column layouts.

40
00:02:46,000 --> 00:02:50,990
Using a framework in the team environment also gives you a consistent code base

41
00:02:51,000 --> 00:02:52,990
to work from, from the beginning.

42
00:02:53,000 --> 00:02:56,990
This makes it easier to make sure that everyone's on the same page and that code

43
00:02:57,000 --> 00:02:59,990
conventions are already in place.

44
00:03:00,000 --> 00:03:03,990
Basically, if you use them correctly, a quality framework can lower the amount of

45
00:03:04,000 --> 00:03:07,990
time that it takes you to create sites and ensure that you're using styles that

46
00:03:08,000 --> 00:03:09,990
you know are going to work.

47
00:03:10,000 --> 00:03:12,990
That doesn't mean, however, that they're not without their drawbacks.

48
00:03:13,000 --> 00:03:16,990
Unless you're working on a really, really complex site, it's doubtful that you'll

49
00:03:17,000 --> 00:03:20,990
use all of the features that a framework has to offer.

50
00:03:21,000 --> 00:03:25,990
That means that often you have a lot of code in your styles that you're simply not using.

51
00:03:26,000 --> 00:03:29,990
Many frameworks also come structured with multiple CSS files.

52
00:03:30,000 --> 00:03:33,990
Now, this means that you either have to combine them yourself or be committed to

53
00:03:34,000 --> 00:03:38,990
having links to multiple external style resources on every single page.

54
00:03:39,000 --> 00:03:44,990
Another consideration is that most frameworks make heavy use of class styles, and

55
00:03:45,000 --> 00:03:48,990
their classes often look something like this.

56
00:03:49,000 --> 00:03:51,990
Now, while this means something to the framework,

57
00:03:52,000 --> 00:03:54,990
it has no semantic bearing on your site,

58
00:03:55,000 --> 00:03:59,990
so if you use a framework, be prepared to have class-heavy, non-semantic markup

59
00:04:00,000 --> 00:04:01,990
throughout your site.

60
00:04:02,000 --> 00:04:05,990
Frameworks can also be difficult to update, modify, and maintain.

61
00:04:06,000 --> 00:04:09,990
Since you didn't write the code, finding specific styles that you want to modify

62
00:04:10,000 --> 00:04:11,990
or overwrite can be a kind of difficult.

63
00:04:12,000 --> 00:04:16,990
It can also be hard to add functionality not contained within the framework, as

64
00:04:17,000 --> 00:04:21,990
the complex nature of the styles may cause conflicts with your custom styles.

65
00:04:22,000 --> 00:04:25,990
Also, just because frameworks are designed to speed up site development, doesn't

66
00:04:26,000 --> 00:04:27,990
mean that they're simple to use.

67
00:04:28,000 --> 00:04:32,990
The more features a framework has, the more you're going to need to know exactly

68
00:04:33,000 --> 00:04:35,990
what's going on in order to make it work efficiently.

69
00:04:36,000 --> 00:04:39,990
In fact, I am going so far as to say that if you're a beginner, a framework

70
00:04:40,000 --> 00:04:41,990
isn't necessarily a good idea.

71
00:04:42,000 --> 00:04:46,990
You need to understand how the underlying CSS works in order to use them correctly.

72
00:04:47,000 --> 00:04:51,990
However, they are great teaching tools. If you find a well-documented CSS

73
00:04:52,000 --> 00:04:55,990
framework, learning to use it can be a great way of learning how to write

74
00:04:56,000 --> 00:04:57,990
efficient cross-browser CSS.

75
00:04:58,000 --> 00:05:01,990
I think one of the best ways is to decide whether a CSS framework is right for

76
00:05:02,000 --> 00:05:03,990
you is to simply try one out,

77
00:05:04,000 --> 00:05:07,990
so in our next movie I'll introduce you to some of the more popular CSS

78
00:05:08,000 --> 00:05:18,000
frameworks to give you a starting point for your own research.