CSS Frameworks like Bootstrap and Foundation Copy

Introduction

Up until now you have learned an amount of stuff in HTML, CSS and even design. However when you want to build something you still have to lay out everything manually and keep repeating yourself when writing your code.

Frameworks are here to save yourself all this effort. To be more specific frameworks like Twitter Bootstrap and Zurb Foundation have done all the work of packaging up commonly used CSS code and even icons and interactions (like menu dropdowns) for you.

So 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 are great for learning and great for rapidly producing sites. One of the downsides of the frameworks is that when you start looking at every site you see you will notice a lot of similarities.

Learning Objectives

  • What CSS frameworks are
  • How frameworks actually work
  • How to interact with the framework to get the look you want
  • Twitter Bootstrap
  • Zurb Foundation
  • TailwindCSS
  • Other frameworks we can find out there
  • The disadvantages of using frameworks

Study

Let’s get rolling with this recorded session:

  1. Read From A List Apart, Frameworks for Designers

  2. Read From A List Apart, Building Twitter Bootstrap

  3. Watch this next video on Bootstrap 5 and learn all about the framework and its practical uses:

Duration: 85 minutes

  1. Choosing Bootstrap or Foundation

  2. Browse through Getting Started with Foundation. Observe the similarities and differences between that and Bootstrap.

  3. Take a brief look at TailwindCSS for a more unique and modern approach to CSS frameworks.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Exercise

Download this HTML template and try to make it look like the screenshot below, just by using Bootstrap 5 classes.

Once finished, upload the code in a private GitHub repository named sha-quiz-css-bootstrap5 and submit the URL in the Quiz below.

Leave a Reply