Projects, ideas and resources from style:Cymru

CSS Framework

CSS Framework - Introduction

What is a CSS Framework?

From Wikipedia:

A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid.

Know Your Framework

There are a large number of CSS Frameworks available to download as a starting point to develop your website. These can range from a very basic setup to those with extensive features which contain many additional modules. Some are so extensive they require in-depth study to get the most out of them.

Problems arise when users install a CSS Framework without first knowing its facilities. Time is then spent discovering what it can do, even overiding parts in order to undo some of the built-in characteristics.

DIY - The Way To Understanding

The purpose of these tutorials is to provide a guide to making your own basic CSS Framework and helping to understand the design decisions that have gone into the larger published and supported frameworks out there.

Initial Starting Point

All website development begins with the content.

The html that is used to hold the content in document form for presentation on the internet is styled by the CSS to present it to the user.

ammonite css framework logo

Given the ever growing number of screen sizes accessing the internet, it would be silly to limit the website to being a fixed width. A responsive approach that caters for a wide range of screens is required.

As Adam Kaplan says, "we want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation."

Begin With Mobile First

... start with mobile styles and layer on styles optimized for larger screens only as needed.
In other words, your mobile styles become the default and you no longer have to override them later. It’s much simpler!

Let's Go!

We've established some principles for creating our CSS Framework:

  • Content comes first
  • Use a responsive design
  • Begin with a mobile-first approach.

The next step is to set up a logical structure of files and folders for the CSS Framework.

Start Here


CSS Framework

CSS Framework