Feb. 6, 2017 | Lesson 4 (CSS Fundamentals)

When beginning to develop websites, you’ll find that you often do the same things over and over again when writing CSS. Browser inconsistencies, what type of layout styles to use, and what kind of typographic treatment will be used for the site are the minimum that needs to be dealt with. It would be advantageous to have a templating system in place to speed up  the process  of generating those styles.

This is where CSS frameworks comes into play.


There are a lot of different CSS frameworks available with a wide variety of features. The general rule of how CSS frameworks is most come with a style sheet that contains a base level set of styles. These will typically contain a CSS reset to account for browser styling, baseline rules for common elements, basic rules for structural elements,  and rules that help with browser inconsistencies.

From there, the framework might include styles for four and table-styling, styles to control the site’s typography, and a CSS grid for layout.


The below images show some important points that CSS grids can be used for:


Now, the choice to use a CSS framework is entirely up to you and your team. There are, of course, both pros and cons to using them. Below are some of the pros:


Basically, if you use them correctly, a quality framework can lower the amount of time that it takes to create sites and insure that you’re using styles that you know are gonna work.

But using CSS frameworks also has it’s drawbacks:


Now the last bullet point mentions that CSS framework relies on class styles, and those often look like this:


While this means something to the framework, it has no semantic bearing on your site. If you use a framework, be prepared to have class heavy, non-semantic markup throughout your site.

Here are some additional considerations that you should have before using CSS frameworks:


While you shouldn’t use CSS framework as a beginner, it can be a great way of learning how to write efficient cross-browser CSS. One of the best ways to see whether a CSS framework is right for you is to try it out.

Once you’ve developed a site or two with a framework, you’ll have a good feel for when they are appropriate and when they’re not. One of the more popular CSS frameworks is Bootstrap, which is probably the most popular framework available.

Screen Shot 2017-02-17 at 3.25.14 PM.png

It was developed by Twitter and then open-sourced as a front-end development tool. It’s responsive and contains a mixture of HTML, CSS and JavaScript files and resources.

Foundation is another powerful front-end development framework. It is full of features, responsive, mobile focused, has a powerful grid system and feature support for SaaS.

Screen Shot 2017-02-21 at 12.35.19 PM.png

Looking for something a little bit more minimal? check out Pure CSS from Yahoo. Pure is CSS only. It’s incredibly small and is modular.

Screen Shot 2017-02-21 at 12.40.20 PM.png

So you can take only the bits that you need. It features sample layouts, forms, buttons, tables and other popular components.

Base is another small HTML/CSS framework with and emphasis on responsive design and modular styles. Base requires you to use some command line tools to install and confiture. Being unfamiliar with those, it might take a little longer to get up and running.


Normalize.css isn’t exactly a framework per se, but it is an indispensable tool for most web designers. Normalize is a very robust CSS reset with an emphasis on cross-browser compliance.


It targets specific HTML elements that need cross-browser normalization and contains styles that ensure a consistent baseline experience for those elements.

Many frameworks use normalize.css as the starting point for their frameworks. So it’s something you should be aware of for your own projects regardless of whether you’re gonna use a framework or not. There are many other frameworks to research and experiment with as you explore whether CSS frameworks are right for projects or not.






One thought on “Feb. 6, 2017 | Lesson 4 (CSS Fundamentals)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s