A Beginner's Guide to CSS Frameworks
An introduction to some of the most popular ways to get your website looking good, fast.
A Beginner’s Guide to CSS Frameworks
An introduction to some of the most popular ways to get your website looking good, fast.
CSS frameworks are an extremely popular front-end development tool. They can allow developers without vast CSS and JavaScript experience to create beautiful, interactive websites. However, when decided to use a CSS framework for the first time, it is easy to become overwhelmed by the number of options out there. This article will provide an introduction to CSS frameworks in general, as well as a few of the most popular options available.
What is a CSS Framework?
A CSS framework is a combination of design best-practices and standardized class systems that provide a basic structure for styling a web page. Practically, they are usually an external stylesheet that you link to, giving you a grid system to layout content and a collection of CSS classes to style elements with. Often, frameworks will also provide whole components, which are chunks of HTML that come pre-styled with CSS. These can range from simple buttons to entire forms or navigation bars. Some frameworks also come with font and icon libraries, as well as JavaScript files for animations and interactivity.
Popular Frameworks
1. Bootstrap
| Bootstrap home page | Boostrap sample template |
|---|---|
 |
 |
Originally developed at Twitter to create consistency among internal projects, Bootstrap has grown to become one of the most popular CSS frameworks, often being the default choice for many developers. It offers a wide variety of page templates and UI components(chunks of HTML you can add to your code), and tons of styling options for everything. Bootstrap also offers templates which include JavaScript for interactivity and animations. While relatively simple to get started on, the massive amount of options can make it easy to get lost in as a beginner. Bootstrap has also become so ubiquitous that some developers worry websites styled with it won’t stand out.
2. Foundation
| Foundation home page | Foundation sample template |
|---|---|
 |
 |
Foundation is an industrial grade CSS framework favored by large companies such as Ebay, Disney, and Mozilla. While some think it isn’t as aesthetically pleasing as Bootstrap out of the box, it is one of the most powerful frameworks available. This is because it takes a minimalist approach to styling pre-built components, allowing designers more room to customize the final product. Foundation is the most complex framework on this list, and I wouldn’t recommend it for beginners. However, Foundation does offer certification courses(at a cost), if you have some prior front-end experience and are looking to dive into something more sophisticated.
3. Materialize CSS
| Materialize CSS home page | Materialize CSS sample template |
|---|---|
 |
 |
Materialize CSS is built on Google’s Material design principles. Material is one of the most popular design languages, with most of Google’s applications, including YouTube and Google Drive, being built on its principles. If you are going for the look and feel of google and android, this is likely the framework for you.
4. Bulma
| Bulma home page | Bulma sample template |
|---|---|
 |
 |
Bulma is an up-and-coming lightweight CSS-only framework. Bulma is extremely beginner-friendly, with intuitive class names and easy-to-follow startup tutorial. I also think Bulma is one of the most beautiful CSS frameworks straight out of the box, with a clean and colorful aesthetic. Additionally, the community is very passionate, so you can find a lot of helpful guides and code snippets to guide you along the way. Since Bulma is CSS only, you will need to provide your own JavaScript if needed.
5. Skeleton
Skeleton is most lightweight CSS framework I know of, so much so that it doesn’t actually call itself a framework, rather a boilerplate. Skeleton’s codebase comes in at ~400 lines, and is meant to be more of a starting point than a complete UI toolkit. It is designed to be used for smaller projects that don’t require the utility of larger frameworks, and includes a basic grid layout and and a handful of HTML elements to get your project on its feet. Skeleton is great for a first css framework, or for experienced developers who are looking to maximize efficiency and want to eliminate every line of excess code.
Getting started
Once you have decided on a framework, it is time to get started. I would recommend building a practice project to familiarize yourself with the framework’s various classes, templates, and workflows. Each framework’s respective website usually has a guide to installation and getting started, and once you are up and running, feel free to check out some of the tutorials below. Have fun creating beautiful, interactive websites with your newfound CSS framework skills!
Further Resources
- Bootsrap Beginner Crash Course - Traversy Media (not up to date for Bootsrap 4)
- Bootsrap 4 Tutorial - Boostrap Dash
- Make Material design websites with the material CSS framework - Narayan Prusty
- Learn Bulma CSS for free - Scrimba
