CSS Frameworks like Bootstrap and Foundation

Introduction

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.

Learning Outcomes

  • 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?

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.

HTML5 and CSS3

CSS Frameworks like Bootstrap and Foundation

View Course Login to track progress Next Lesson

Got questions?

Chat with our friendly Odin community in our Gitter chatrooms!

Open Gitter

Are you interested in accelerating your web development learning experience?

Get started

Thinkful

  • 5-6 months

    5-6 months

  • Job Guarantee

    Job Guarantee

  • 1-on-1 Mentorship

    1-on-1 Mentorship