DEV Community

Vosidiy M.
Vosidiy M.

Posted on

I made my CSS grid system that made my life much easy (No framework, no build process)

#css #webdev #sass #scss

I was using Bootstrap CSS before, but I was never happy because of its lack of utility classes for margins, padding, and other sizings.
I tried to extend it by digging into its SCSS (Sass) files, but it was too complicated. Sass mixins and functions were dependent on each other; a small mistake might take hours to fix.

So, last year, I decided to build my own CSS framework for my products - Ecommerce Templates. (ecommerce-ui.com)

I used to create and sell e-commerce templates. My templates were built on Bootstrap 5. After creating my own CSS framework, I never looked back at Bootstrap. Also, I hate Tailwind due to its messy, long class names and its requirement for build processes. I don't like using the terminal for small changes on HTML.
So, I created a framework that combines elements of Tailwind and Bootstrap.

Here is my breakpoint configuration in scss (sass)

$breakpoints: (
  'sm': 'min-width: 641px',  // not mobile, - small tablet and up
  'md': 'min-width: 921px', // medium and up - larger tablet and up
  'lg': 'min-width: 1201px', // large and up - desktop and any widescreen
);
Enter fullscreen mode Exit fullscreen mode

There's no need for too many breakpoints. Since most users browse on desktops or mobile devices. Even tablet users are not too many. we can streamline our code by targeting these key screen sizes.
First thing to create default classes for grid, without breakpoints

.row {
  --flex-gap-rows: 0px; // default gap // gap.scss file
  --flex-gap-cols: 20px; // default gap // gap.scss file
  gap:0!important; // css gap breaks flex column, it is good for css grid only
  row-gap:0!important; // css gap breaks flex column, it is good for css grid only
  column-gap: 0!important; // css gap breaks flex column, it is good for css grid only
  display: flex;
  flex-wrap: wrap;
  margin-left: calc( -0.5 * var(--flex-gap-cols));
  margin-right: calc( -0.5 * var(--flex-gap-cols));
  margin-top: calc(-1 * var(--flex-gap-rows));
}

.row > * { 
  flex: 0 0 auto;
  max-width: 100%;
  width: 100%;
  padding-right: calc(var(--flex-gap-cols)* 0.5);
  padding-left: calc(var(--flex-gap-cols)* 0.5);
  margin-top: var(--flex-gap-rows);
}

//////////// ROW COLS
.row-cols-auto > * {width: auto; flex: 0 0 auto!important; }
.row-cols-1 > * { width: 100%; flex: 0 0 auto!important; }
.row-cols-2 > * { width: 50%; flex: 0 0 auto!important;}
.row-cols-3 > * { width: 33.33333333%; flex: 0 0 auto!important; }
.row-cols-4 > * { width: 25%; flex: 0 0 auto!important;}
.row-cols-5 > * { width: 20%; flex: 0 0 auto!important;}
.row-cols-6 > * { width: 16.66666667%; flex: 0 0 auto!important;}
.row-cols-7 > * { width: 14.285714%; flex: 0 0 auto!important;}
.row-cols-8 > * { width: 12.5%; flex: 0 0 auto!important;}
.row-cols-9 > * { width: 11.111111%; flex: 0 0 auto!important;}
.row-cols-10 > * { width: 10%; flex: 0 0 auto!important;}
.row-cols-11 > * { width: 9.09090909%; flex: 0 0 auto!important;}
.row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important;}
Enter fullscreen mode Exit fullscreen mode

Based on above configuration, we create loop to create grid system based on each breakpoint.
So it will iterate all classes for sm, md, lg

@each $breakpoint, $size in $breakpoints {

  @media ($size){
    // breakpoinst styles
    .#{$breakpoint}\:row-cols-auto > * { width: auto; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-1 > * {  width: 100%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-2 > * {  width: 50%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-3 > * {  width: 33.3333333333%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-4 > * {  width: 25%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-5 > * {  width: 20%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-6 > * {  width: 16.6666666667%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-7 > * {  width: 14.285714%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-8 > * {  width: 12.5%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-9 > * {  width: 11.111111%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-10 > * { width: 10%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-11 > * { width: 9.09090909%; flex: 0 0 auto!important;}
    .#{$breakpoint}\:row-cols-12 > * { width: 8.33333333%; flex: 0 0 auto!important;}
    // end breakpoint
  }
}
Enter fullscreen mode Exit fullscreen mode

So how you can use it?
You can easily create columns upto 12.
For example:
(On large screens, there will be 5 items in a row, on medium screens 4 items per row, and on mobile (default) 2 items per row)

<div class="row lg:row-cols-5 md:row-cols-4 row-cols-2">
  <div> Column 1 </div>
  <div> Column 2 </div>
  <div> Column 3 </div>  
  <div> Column 4 </div>  
  <div> Column 5 </div>
  <div> Column 1 </div>
  <div> Column 2 </div>
  <div> Column 3 </div>
  <div> Column 4 </div>
  <div> Column 5 </div>
</div>
Enter fullscreen mode Exit fullscreen mode

You can create 7 column or 9 column very easily. Just by adding classes into parent element.

I made all of my components and utility classes using Sass. There's no build process and no dependency management. I love Codekit and Prepros; they convert any Sass (SCSS) file into CSS easily. Check out how I created all my other utility classes and components for eCommerce Templates You can Download here

On the next lesson, I'll share how I created other utility classes. Please follow me on Medium
vosidiy.medium.com

Ecommerce templates

Top comments (0)