CSS Frameworks

We can write CSS for our websites, but the longer we do so, the more a pattern emerges. You find yourself making the same kinds of styles over and over again. Tasks such as creating a header/footer, making a grid layout, or styling buttons according to their purpose are so common, programmers started writing frameworks to streamline these processes. You can think of these frameworks as libraries of CSS and JS that you can plug into your website and use automatically. Some front-end frameworks are maintained by large corporations, such as Google's Materialize or Twitter's Bootstrap.

Your task

Pick two front-end frameworks and answer the following questions for each of them.

Not sure where to start?

You can pick one of the popular frameworks such as Bootstrap, Materialize, Foundation, PureCSS, etc., or get adventurous and checkout some frameworks others enjoy.

CSS FRAMEWORK 1:

1. What is the name of this framework?

2. What company maintains this framework?

3. What does it advertise about itself to appeal to potential users?

4. How do you include this framework on your own site if you want to use it? Does it have a CDN?

5. Does it have a grid system? If yes, describe how that grid system works.

6. Find an example of a website that uses this framework. How much does it differ from the default appearance?

7. Does this framework have an icon set? If yes, include a code snippet of how you’d use one.

8. Take a look at the buttons section of the docs. How do this framework’s buttons compare to a plain HTML button?

9. Take a look at some of the default menu options (such as for page headers and footers) and pick one you think looks the best. How difficult are these to implement? Are they responsive? How difficult do you think something like this would be to implement without the help of the framework?

CSS FRAMEWORK 2:

1. What is the name of this framework?

2. What company maintains this framework?

3. What does it advertise about itself to appeal to potential users?

4. How do you include this framework on your own site if you want to use it? Does it have a CDN?

5. Does it have a grid system? If yes, describe how that grid system works.

6. Find an example of a website that uses this framework. How much does it differ from the default appearance?

7. Does this framework have an icon set? If yes, include a code snippet of how you’d use one.

8. Take a look at the buttons section of the docs. How do this framework’s buttons compare to a plain HTML button?

9. Take a look at some of the default menu options (such as for page headers and footers) and pick one you think looks the best. How difficult are these to implement? Are they responsive? How difficult do you think something like this would be to implement without the help of the framework?

COMPARE AND CONTRAST:

1. Which framework do you think looks nicer?

2. Which framework is easier to use?

3. Which of these two frameworks would you choose to use for a project and why?