Build Your Own CSS Microframework

Initially, we thought about adding a complete set of instructions on how to build each part of our micro framework in SCSS, including the steps to compile it. Instead, we are keeping it more beginner-friendly.

Before we begin building our CSS microframework, we’ll talk about the structure of what we’d like to build.

The structure of our CSS microframework

Here are the different sections that our CSS microframework needs to have:

• A CSS reset
• Simple layout classes
• Widths, heights, margins, and paddings
• Typography
• Effects (such as colors, shadows, or opacity)
• Column-grid

Why do we need a separate CSS structure?