DEV Community: Akshay Rajput

How I made my own CSS framework akin to TailwindCSS?

Akshay Rajput — Fri, 30 Jul 2021 07:30:58 +0000

What is tailwind?

It is a utility first framework. It provides thousands of utility classes that can be used together to build complex components, directly in your markup. You'll rarely end up writing actual CSS.

Why make my own framework?

I decided to make my own framework to gain a better understanding of how it all works and test my CSS skills. I also used it in some of my react projects to test its usability, check this project where I ended up using it.

How it works?

In Utility-based CSS frameworks, you style elements by applying pre-existing classes directly in your HTML. Check below example card that is made with MintUI

The above card can be created with a bunch of useful utility classes as shown in the below code snippet. No need to write any CSS.

<div class="displayFlex p2 bgWhite rounded border borderGray2 shadowMdGray2">
      <img src="./joey.jpg" class="w24 roundedFull mr3" alt="user"/>
      <div class="displayFlex flexCol">
          <p class='fontBold lineHeightMd'>Joey Tribbiani</p>
          <small class='mb1 fontSemiBold'>Actor</small>
          <em class="mb2 textXs textGray5">Previously: Cologne sampler, Acting Teacher, Waiter</em>
          <small class=''>Email: joeytribbiani@joey.com</small>
      </div>
</div>

Let's get started

Before starting out I'd like to point out some important points to keep in mind when making a utility class framework:

Make sure each utility class does only one thing.
Class names should be explicit and follow some convention whereby it's easier to predict other classes. Example: I followed camelCase to name classes (displayFlex, textSm, borderNone, etc).
use a CSS pre-processor like SASS which allows you to use loops so you can easily generate classes.

With that out of the way, let's start:
Create a main.scss file - this file will be compiled to CSS in the end. Import any partials (which I'll create later) in this file so that it all compiles together and you get a single CSS file with all classes.

1) Reset browser defaults
The goal here is to reduce cross-browser inconsistencies in things like box-sizing, margins and font sizes, and so on.

/*main.scss*/
*, *::after, *::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 16px;
    /* reduce base fontsize for mobile*/
    @media(max-width: 767px){
        font-size: 14px;
    }
}

2) Come up with your color palette:
You need to decide on all the colors that you will provide in your framework. These colors can be used to generate classes to color the background, text, border, etc. If you are going to add shades of a particular color, it's better to differentiate between two shade classes by some numeric value.

Example: In MintUI I've added 10 colors with each color having 5 shades. See the below image for reference.

// _colors.scss (a sass partial file)
// all colors in this sass map, loop through it later to generate classes
$colors: (
    White: white,
    Black: black,
    Transparent: transparent,

    Gray1: #f9fafb,
    Gray2: #e4e7eb,
    Gray3: #d1d5db,
    Gray4: #64748b,
    Gray5: #334155

    Red1: #fef2f2,
    Red2: #fecaca,
    ....
);

3) Create classes based on your colors:
Once you have your color palette in place, you can start creating classes for background, text color, border color, etc based on this palette.
Below you can see I'm using @each of SASS to map key value pairs to generate classes.

// colors is a map which contains key:value pairs
@each $colorName, $colorValue in $colors {
    // this will generate classes like bgGray2, bgBlue4, etc
    .bg#{$colorName}{
        background-color: $colorValue;
    }

    // generate border color classes like borderOrange3, borderPurple1, etc
    .border#{$colorName}{
        border-color: $colorValue;
    }

    // generate text color classes like textBlack, textGreen5, etc
    .text#{$colorName}{
        color: $colorValue;
    }
}

4) Add spacing units and margin/padding classes:

Add all the units of spacing that you'd like to support. I've added 24 units for spacing where each unit would represent 0.25rem i.e. my spacing scale ranges from 0rem to 6rem. You can change this scale depending on your use case. The more units you have, the more classes will be created.
To create classes for each side i.e. margin-top or padding-bottom you'll need to map sides as well.

 // _spacing.scss
 $spacers : (
      0,1,2,3,4,
      5,6,7,8,
      9,10,11,12,
      13,14,15,16,
      17,18,19,20,
      21,22,23,24
 );
 $sides: (
      'Top','Right','Bottom','Left'
 );
 // generate margin and padding classes
    @each $space in $spacers{
         // for each side
         @each $side in $sides {
            // creates classes like mRight6, mLeft1, etc
            .m#{$side}#{$space} {
                margin-#{$side}: #{$space/4}rem;
            }
            // creates classes like pTop4, pBottom3, etc
            .p#{$side}#{$space} {
                padding-#{$side}: #{$space/4}rem;
            }
        }
    }

5) Add grid layout support:
I've added a 12 column grid - which is the standard across multiple CSS frameworks. To use grids you'll have to use displayGrid class to declare the display property as grid and then specify the number of columns using one of the gridCols* classes. You can add more classes depending on your use case.

// main.scss
    .displayGrid{
        display:grid;
    }
    // grid column list
    $gridColumns : (
        1,2,3,4,5,6,7,8,9,10,11,12
    );
    // grid-template-columns to divide grid into number of columns
    @each $cols in $gridColumns {
        .gridCols#{$cols} {
            grid-template-columns: repeat($cols, minmax(0, 1fr));
        }

        // span a div across multiple columns
        .gridColSpan#{$cols} {
            grid-column-start: span $cols;
        }
    }

6) Add flex layout support: Adding flex layout support is easier than grids as you only need to add a few classes. To make an element flex, use displayFlex class. Add other specific classes to adjust the behavior of flex accordingly.

// main.scss
    .displayFlex{
        display: flex;
    }
    .flexWrap{
       flex-wrap: wrap;
    }
    .flexCol{
        flex-direction: column;
    }
    .flexGrow{
        flex-grow: 1;
    }

    // use to align content inside flex container
    .justifyBetween{
        justify-content: space-between;
    }
    .justifyCenter{
        justify-content: center;
    }
    .itemsCenter{
        align-items: center;
    }

7) Add support for responsive breakpoints: To add a utility that will only take effect at a certain breakpoint, you'll need to add responsive variants of that utility. So when you have a responsive variant added along with a normal one, at the specified breakpoint the responsive variant will take priority and apply those styles.

In MintUI I've only added a single breakpoint(md) at 768px, but here for a better explanation, I'll add 2 breakpoints(one at 768px and another at 1024px) - md and lg respectively.

// main.scss - where you have specified grid utilities
...
$gridColumns : (
    1,2,3,4,5,6,7,8,9,10,11,12
);
@each $cols in $gridColumns {
    .gridCols#{$cols} {
        grid-template-columns: repeat($cols, minmax(0, 1fr));
    }

    // responsive variants below
    // creates classes like md:gridCols3, md:gridCols5, etc
    .md\:gridCols#{$cols} {
        @media(min-width: 768px){
            grid-template-columns: repeat($cols, minmax(0, 1fr)) !important;
        }
    }

    // creates classes like lg:gridCols2, lg:gridCols3, etc
    .lg\:gridCols#{$cols} {
        @media(min-width: 1024px){
            grid-template-columns: repeat($cols, minmax(0, 1fr)) !important;
        }
    }
}
...

And in HTML you can chain these classes to achieve a different grid layout at different breakpoints. For example: below you can see that has a grid layout with 1 column when no breakpoint is specified, 2 columns at md and 3 columns at lg breakpoint.

    <main class="displayGrid gridCols1 md:gridCols2 lg:gridCols3" >
        ...
        ...
    </main>

8) Add other utility classes: You can add more utility classes related to font-size, font-weight, height, width, text-alignment, etc. It depends on how comprehensive you want to be.

9) Compile to a single CSS file: So far we have 3 different SASS files - main.scss and two partial files(_colors.scss and _spacing.scss). We need to import those partials into main.scss and compile this file to CSS. The compiled CSS file will have all the generated classes.
If you don't know how to compile scss to css, you can use this vscode extension to do it or follow this article.

// main.scss
// import those partials which are in a directory called _partials
// also no need to add _(underscore) to partial filename while importing
@import '_partials/colors';
@import '_partials/spacing';
//... other scss here

Limitations?

I have created most of the basic classes needed for a utility-based framework but there's still a lot of use cases that I haven't covered. For example, more breakpoints can be added, hover/focus states can be added as well, purging of unused CSS isn't available, etc.

You can check out the project at MintUI

You can reach out to me at my Twitter or my Linkedin

Keep footer at bottom of page - using flexbox

Akshay Rajput — Sat, 19 Dec 2020 17:32:02 +0000

TLDR - at the end. But I urge you to read ahead if you'd like to understand the concept.

Have you run into this problem where the footer on your site does not stay at the bottom of the page, even if it is the last tag in your html body.

Especially if you are new to web development, you'll run into this problem. There are ways of making sure your footer stays at bottom, but most of those methods have some kind of caveat.

Position: absolute (doesn't work when there's more content, you'll realise footer is stuck and your content is scrolling behind it).
Position: fixed (use only if you want your footer to be always visible).

There's a way using flexbox which works on device of every size, doesn't require fixed height of navbar or footer, and works without any side-effects.

Reset browser defaults

If you are not using any css frameworks, you should reset some browser default css. Otherwise your browser will apply its own margin and padding to page.



  /* following style will be applied to every element */
  *, *::before, *::after{
     margin: 0;
     padding: 0;
     box-sizing: border-box; 
  }
  /* write your own css after this part */

Structure of page

Your html body should follow this kind of structure. You can use <div> instead of <main>.



<body>
  <div class="pagewrap">
    <nav>...</nav>
    <main>...</main>
    <footer>...<footer>
  </div>
</body>

basically wrap all content of your page inside a div, give it some classname

Using flexbox

Add display:flex and flex-direction:column to you main div (which contains all other elements of page). You also need to make that div take full height of viewport. see below code:



  .pagewrap{
    display: flex;

    /*vertically stack children*/
    flex-direction: column;

    /* expand to take full height of page */
    /* min-height overrides both height & max-height */
    min-height: 100vh; 

  }

Now all you need to do is stretch the element to take as much height as possible. Use flex-grow to do this.



  main{
    flex-grow: 1;
  }

TLDR :

Wrap all of your body elements inside a div.
Give that div a display: flex, flex-direction: column and min-height: 100vh;
Wrap elements other than navbar and footer inside a div/main tag.
Give that div/main tag a flex-grow: 1;

That's it! As you can see in above picture, it works even if you have less content or more content. You don't have to worry about making it responsive.

Fetch() - The Basics

Akshay Rajput — Sat, 19 Dec 2020 07:22:16 +0000

The Fetch API provides an interface for fetching resources (including across the network).

For making an request and fetching a response, you need to use the fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

Example: I'll demonstrate a basic fetch request using a dummy API from Json Placeholder. This dummy API fetches a list of users with associated data.

Have a look at the following code:

  fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data));

This will console log the data in following manner.

{
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  }
...more user data

Here we are fetching a JSON file across the network and printing it to the console. The simplest use of fetch() takes one argument — the path to the resource you want to fetch — and returns a promise containing the response (a Response object).
This is just an HTTP response, not the actual JSON. To extract the JSON body content from the response, we use the json() method.

Upload json data

Use fetch() to POST JSON-encoded data. Consider an example where you have updating their profile, you store that information in key:value pair in an object. You can send that post that object data.

const data = { 
  username: 'example',
  email: 'johndoe@example.com',
  worksAt: 'exampleCompany',
  position: 'Designer'
};

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json', // should match data you are posting
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Upload a file

Another common use case would be to upload a file. Files can be uploaded using an HTML input element, FormData() and fetch().

Example: You have an input field of type file which will be used to select a file to upload.

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData
})
.then(response => response.json())
.then(result => {
  console.log('Success:', result);
})
.catch(error => {
  console.error('Error:', error);
});

In above example we got the uploaded file using fileField.files[0], and appended that to formData object.
Finally in fetch's body key, we pass the formData object.

For more information on fetch API you can visit MDN docs