How to Design A Personalised Grid-Based Framework [A Step by Step Guide]

You may be new to CSS Grid or be someone that wants to take on a new challenge. It is still hard to get hold of premium resources online that give you the practical sense of how to leverage Grid’s best features for your awesome front-end projects.

I have had an awesome journey building front-end projects with CSS Grid and later on, bootstrap. I have to admit that frameworks can at times be limiting and so, there comes a time wherewith our creativeness, we will always love it when we explore new things; like building our own framework from scratch, Bootstrap-style, for instance.

I am going to walk you through a step by step, building and designing of our own CSS framework in this article. Our choice framework will span a responsive, 12 column grid template for our project-based UIs.
The tools we will be using are; the CSS Grid, a simple semantic HTML and SASS. By the end of this process, we will be placing our template to the test by recreating the fedora.org front page with it, buckle up!

First things first.

Before we get our hands dirty, we are going to think about the major elements that are required of a framework. This will have to include a CSS reset, a fixed number of grids separated by “gutters”, a way to make new rows, and default values for the font properties of elements.

Next,

After which we are going to write the CSS necessary to create a basic 12-column grid framework. For this, we are going to draw inspiration from 960 Grid System documentation, for a look at how they do it. We are not going to go too crazy with details (we won’t be trying to rebuild Bootstrap).

Our Framework

We are going to be using a 970 grid system, with columns of size 68 pixels wide.

The specifications for our grid will be as follows:

12 columns68 pixels column width14 pixels gutter width.

STEPS TO FOLLOW:

1. Create a directory and give it a unique name.

2. Install sass; follow these guidelines well on how to do it neatly.

2. Create a directory called src, and inside it create two sass files with the names framework.scss and style.scss, respectively for the sake of this tutorial.

3. In the root of our file structure, create an empty index.html. (We will later link our resultant output CSS inside this markup)The HTML

Below is our written markup that we will use as a skeleton of the page we are to clone.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./src/styles/reset.css">
    <link rel="stylesheet" href="./src/styles/framework.css">
    <title>Fedora Clone Homepage</title>
</head>
<body>
    <header class="container-fluid ">
      <div class="container row "></div>
    </header>
    <main>
        <div class="row container-fluid ">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 "></div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-7 col-xl-7 "></div>
        </div>
        <div class="row container-fluid ">
            <div class="col-lg-4 col-xl-4 "></div>
            <div class="col-lg-4 col-xl-4 "></div>
        </div>
        <div>
            <div class="col-lg-12 col-xl-12 "></div>
        </div>
        <div>
            <div class="row container-fluid ">
                <div class="col-lg-4 col-xl-4 "></div>
                <div class="col-lg-8 col-xl-8 "></div>
            </div>
            <div>
                <div class="col-lg-4 col-xl-4 "></div>
                <div class="col-lg-4 col-xl-4 "></div>
                <div class="col-lg-4 col-xl-4 "></div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-xl-12 "></div>
            </div>
        </div>
        <div class="row">
            <div class="row container-fluid ">
                <div class="col-lg-12 col-xl-12 "></div>
            </div>
            <div class="row ">
                <div class="col-lg-4 col-xl-4 "></div>
                <div class="col-lg-4 col-xl-4 "></div>
                <div class="col-lg-4 col-xl-4 "></div>
            </div>
            <div class="row">
                <div class="col-lg-6 col-xl-6 "></div>
                <div class="col-lg-6 col-xl-6 "></div>
            </div>
        </div>
    <footer>
    </footer>
  </main> 
</body>
</html>

In this markdown layout of our HTML, we have given our div-tags classes that shape how our front end page will look like. Notable classes are the cols, rows, container and container-fluid.

Next, we are going to define these classes in our sass framework file.

Steps to consider:

1. First, we went ahead and defined our container and container-fluid classes.

2. Next, we went ahead to define the breakpoints as illustrated in the code, followed by rows and columns.

3. We then declared a function that would help us automatically detect the width of our screens and also help us assign the declared breakpoints classes with respect to the size containers.

3. The container and container- fluid classes declared above will be responsible for:

- Giving our markup, a maximum width of 95% of all the viewports our markups will span and centre them.

- Giving the contents of our markup a maximum width of 100% of the viewport.

Moving On:

Our ‘skeleton’ markup is now ready and we have defined all the major classes our framework requires. The work is not yet over. However, we have tackled the most crucial of parts, designing our framework. For the final work, I have shared a link to a Github repo that have full implementation of the entire project.

Note: You will always be in need to compile the sass files to output the corresponding CSS file. websites are pretty dumb and they can not properly read a sass file. It is the corresponding CSS file that we will link to our final markup file and get it to work.

The compiled CSS has a characteristics of being small and clean as well.

In conclusion…

Having built our framework from scratch, the only work remaining is to fill up our ‘skeleton’ markup with content and some additional styling.

What to keep in mind is that anyone can learn their way around CSS Grid and as we have demonstrated here, it is possible to come up with unique, personalised and customised frameworks for our respective projects.

Link to Github repo.

This repo aims to fill in the gaps in areas that were not so clear or missed in this article. The repository contains the full work done. Feel free to fork it and play around with the features.