Course List >> HTML5 and CSS3 >> Responsive Design and CSS Frameworks >> 3: CSS Frameworks like Bootstrap and Foundation
Scroll up or hover over the breadcrumbs to view the navigation bar

CSS Frameworks

You've spent plenty of time building up a great base of knowledge of HTML and CSS and even design. But it's still a pain in the butt to lay out everything manually and keep repeating yourself all the time when writing your code. If only there was a way to save yourself all kinds of effort...

Frameworks to the rescue! Frameworks like Twitter Bootstrap and Zurb Foundation have done all the heavy lifting of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you. All you have to do is understand how they expect you to lay out your site and which classes they use to designate particular batches of styles.

Frameworks let you focus more on building great sites and less on how they are actually coded up on the front end. They are great for learning and great for rapidly producing sites. Once you've taken a tour through Bootstrap, you'll start looking at every site you see (especially startup ones) and notice an awful lot of similarities... one of the downsides of the frameworks.

Points to Ponder

  • What are CSS frameworks?
  • How do frameworks actually work?
  • How do you interact with the framework to get the look you want?
  • What is Twitter Bootstrap?
  • What is Zurb Foundation?
  • What other frameworks can you find out there?
  • What are the disadvantages of using frameworks?

Your Assignment

  1. Read From A List Apart, Frameworks for Designers
  2. Read From A List Apart, Building Twitter Bootstrap
  3. Choosing Bootstrap or Foundation
  4. Browse through Getting Started with Foundation for an idea of how that framework operates. Observe the similarities and differences between that and Bootstrap.

Additional Resources

This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something

From the creators of The Odin Project...

The Viking Code School
Viking ad 180x150