And also that you are capable of doing Have you ever wonder how can I optimize my website a little bit? You probably use Bootstrap or Foundation but not really all of the classes. You might be thinking: how hard would it be to build my own framework? And how could I, a simple human being be able to achieve such a task? In this post, I’m going to show you how I wrote a 4-thousand-lines CSS framework in less than 2 working days. You want to see it for yourself? Go to my Github . repo Okay, I didn’t do it all by myself, I had a very helpful coding . But still, after you are done with this you’ll be able to do it alone and even faster. partner This framework is based on Bootstrap which is a CSS framework. A lot of the classes’ names are the same or similar to Bootstrap. It also has the 5 breakpoints used by this famous framework for responsiveness. Here are the most important things we took into account for this process: Base it on a page (and don’t be afraid) This is going to help for specific styling like colors, font type, font size, etc.. Or your own website. This framework was done for the ionos page (your welcome!) Later on, I’ll explain what I mean with don’t be afraid, but you’ll probably figure it out soon enough. Preprocessors (or should I say lifesavers) There are plenty of preprocessors out there for CSS coding, we use for this framework. SASS But what are Preprocessors and why should I use ? you’d be asking… to keep it simple, Preprocessors are used to generate CSS code and well, make the web page layering enjoyable this means that you’ll be able to use variables, loops and a lot of useful functions to create repetitive CSS code. And if you check out, any Framework out there has tons of repetitive rules. them This is what is going to make you achieve writing lots of code with only a few lines. article it’s pretty straight forward on how to use them This Keep it organized If you’re a costume to layout web pages at this point, you already know that having only one CSS file on your website its a good practice, but you can have as many SCSS files as you need to. Take advantage of this and put your reset and variables (at least) outside the main SCSS file. This is how we imported all the SCSS files to the main.SCSS file: @ ; @ ; @ ; @ ; @ ; @ ; //import.scss import "reset" import "variables" import "spacing" import "display" import "width-height" import "font-color" these were the files: Grid and gutters The most important part of the framework, the backbone if you will. We followed Bootstrap and kept the 12 column grid, but you can create more or less it’s up to you. There are many ways to achieve this, I think our gutters (the space between the columns) were a little bit too thick but again it’s up to you to decide these factors. We used percentages to calculate the width of the columns and the formula is pretty straight forward: $column-width: (100%-$gutter-width*12)/12 I must share with you the code applying this formula we used to create the responsive 12 column grid and all the responsive breakpoints: $xs: xs; $sm: sm; $md: md; $lg: lg; $xl: xl; $breakpoint-xs: px; $breakpoint-sm: px; $breakpoint-md: px; $breakpoint-lg: px; $breakpoint-xl: px; $ ; $gutter-width: %; $column-width: %; @mixin grid-unit-normal($span) { : left; margin-right: $gutter-width; width: ($column-width * $span) + ($gutter-width * ($span - )); } @mixin grid-unit($span) { : left; margin-right: $gutter-width; width: ($column-width * $span) + ($gutter-width * ($span - )) !important; } @ $i through { .#{$ {$i} { @include grid-unit-normal($i); } } @ $i through { @media screen and (max-width: $breakpoint-xs) { .#{$ {$xs}-#{$i} { @include grid-unit($i); } } } @ $i through { @media screen and (min-width: $breakpoint-sm) { .#{$ {$sm}-#{$i} { @include grid-unit($i); } } } @ $i through { @media screen and (min-width: $breakpoint-md) { .#{$ {$md}-#{$i} { @include grid-unit($i); } } } @ $i through { @media screen and (min-width: $breakpoint-lg) { .#{$ {$lg}-#{$i} { @include grid-unit($i); } } } @ $i through { @media screen and (min-width: $breakpoint-xl) { .#{$ {$xl}-#{$i} { @include grid-unit($i); } } } //SCSS code for 12 column grid //VARIABLES 575 576 768 992 1200 - : class col col 1 7.33 //MAIN float 1 float 1 for from 1 12 - }-# class col for from 1 12 - }-# class col for from 1 12 - }-# class col for from 1 12 - }-# class col for from 1 12 - }-# class col for from 1 12 - }-# class col .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } .col { : left; margin-right: %; width: %; } @media screen and (max-width: px) { .col-xs { : left; margin-right: %; width: % !important; } } @media screen and (min-width: px) { .col-sm { : left; margin-right: %; width: % !important; } } @media screen and (min-width: px) { .col-md { : left; margin-right: %; width: % !important; } } @media screen and (min-width: px) { .col-lg { : left; margin-right: %; width: % !important; } } @media screen and (min-width: px) { .col-xl { : left; margin-right: %; width: % !important; } } //12 column grid CSS code result /*Result*/ -1 float 1 7.3333333333 -2 float 1 15.6666666667 -3 float 1 24 -4 float 1 32.3333333333 -5 float 1 40.6666666667 -6 float 1 49 -7 float 1 57.3333333333 -8 float 1 65.6666666667 -9 float 1 74 -10 float 1 82.3333333333 -11 float 1 90.6666666667 -12 float 1 99 //Breakpoints for col-1 575 -1 float 1 7.3333333333 576 -1 float 1 7.3333333333 768 -1 float 1 7.3333333333 992 -1 float 1 7.3333333333 1200 -1 float 1 7.3333333333 In the result above I’m only showing you the 12 column grid and all of the breakpoints for the first column. With less than 75 lines we were able to create 72 classes equivalent to 378 lines of code! Yeah yeah… you would say 75 lines it’s a bit much, maybe you could’ve done it with a lot less, Maru… And you are right! In fact, this was the first section we built and we were still getting the hang of SASS. But for something we code in 2 days I think we did a good job. After all, the goal is to make your life easier, and if you are too focused on doing it perfectly, you’ll probably end up complicating your work even more. But the sections to come are a little bit more optimized I promise! Sizing and spacing Just as Bootstrap, this framework has classes for margins and paddings (left, right, top and bottom), and they are also responsive; Bootstrap only has up to 6 levels of margin and padding, from 0 to 3rem but in this framework, we added 5 more to make our lives easier. $sizes: 0, 0.5rem, 1rem, 1.5rem, 2rem, 2.5rem, 3rem, 3.5rem, 4rem, 4.5rem, 5rem; Also, Bootstrap only includes 4 levels of sizing classes for 25%, 50%, 75% and 100% width and height, in our framework, we use 10 (from 10% to 100%)and again you can add as many as you need or want to. Here is the code we use to create the classes for width and height: $breakpoints: $sm, $md, $lg, $xl; $breakpoint-xs: px; $breakpoint-sm: px; $breakpoint-md: px; $breakpoint-lg: px; $breakpoint-xl: px; $breaks: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl; $wh-options: ; @ $i through { .h-#{$wh-options * $i}{ : ($wh-options * $i)#{ }; } .w-#{$wh-options * $i}{ : ($wh-options * $i)#{ }; } } $j: ; @each $ $breaks { @media screen and (min-width: $ ) { @ $i through { .h-#{nth($breakpoints,$j)}-#{$wh-options * $i}{ : ($wh-options * $i)#{ }; } .w-#{nth($breakpoints,$j)}-#{$wh-options * $i}{ : ($wh-options * $i)#{ }; } } } $j: $j + } //VARIABLES 575 576 768 992 1200 10 // Width and Height for from 1 10 height "% !important" width "% !important" 1 break in break for from 1 10 height "% !important" width "% !important" 1 With the lines above we generated more than 400 lines of ; 10 classes for each: width and height, and we repeated the same 20 classes for each of the 4 responsive breaks. CSS code Wich translates to 100 classes… now we are talking! Positioning the elements Now that you have all your columns and rows, and also are happy with the size of your elements, you have to decide how the content is going to be displayed or aligned: you could use flexbox or grid, (or ) to create the main layout. In this framework, we used flexbox. both? And this is is the good stuff right here: $xs: xs; $sm: sm; $md: md; $lg: lg; $xl: xl; $breakpoints: $sm, $md, $lg, $xl; $breakpoint-xs: px; $breakpoint-sm: px; $breakpoint-md: px; $breakpoint-lg: px; $breakpoint-xl: px; $breaks: $breakpoint-sm, $breakpoint-md, $breakpoint-lg, $breakpoint-xl; $display-flex: justify-content, align-content; $flex-name: start, end, around, between, center; $flex-options: flex-start, flex-end, space-around, space-between, center; $align-flex: align-items, align-self; $align-names: start, end, center, stretch, baseline; $align-options: flex-start, flex-end, center, stretch, baseline; @each $display $display-flex { : ; @each $option $flex-options { .#{$display}-#{nth($flex-name, $i)} { #{$display}: #{$option} !important; } $i: $i + ; } } $j: ; @each $ $breaks { @media screen and (min-width: $ ) { @each $display $display-flex { : ; @each $option $flex-options { .#{$display}-#{nth($breakpoints,$j)}-#{nth($flex-name, $i)} { #{$display}: #{$option} !important; } $i: $i + ; } } } $j: $j + } @each $align $align-flex { : ; @each $option $align-options { .#{$align}-#{nth($align-names, $i)} { #{$align}: #{$option} !important; } $i: $i + ; } } $j: ; @each $ $breaks { @media screen and (min-width: $ ) { @each $align $align-flex { : ; @each $option $align-options { .#{$align}-#{nth($breakpoints,$j)}-#{nth($align-names, $i)} { #{$align}: #{$option} !important; } $i: $i + ; } } } $j: $j + } @each $direction $flex-direction { .flex-#{$direction} { flex-direction: #{$direction} !important; } } @each $ $breaks { @media screen and (min-width: $ ) { @each $direction $flex-direction { : ; .flex-#{$direction}-#{nth($breakpoints,$j)} { flex-direction: #{$direction} !important; } } } $j: $j + } //VARIABLES 575 576 768 992 1200 //DISPLAY-FLEX OPTIONS in $i 1 in 1 1 break in break in $i 1 in 1 1 //ALIGN-FLEX OPTIONS in $i 1 in 1 1 break in break in $i 1 in 1 1 in break in break in $j 1 1 Now is your turn to test it out! But you can always check it out in my repo. With only 90 lines we were able to create 200 classes! And last but not least: Don’t be afraid! You are probably tired of me repeating it again and again and probably by now you realized this: Add as many classes as you need or want! Remember this is not Bootstrap or Foundation, this is your own Framework and you are doing this to make your work of layering pages easier. Not only we added variables for the palette of colors of the website this framework was created for (just like Bootstrap), we also added classes to set color to each side of the borders, unlike Bootstrap. $main: # b41; $secondary: # a75; $main-blue: # d8f; $light-blue: # b9dcc; $soft-blue: # cce8; $secondary-blue: # a5; $light: #fff; $light-gray: #f6f7f8; $article-blue: # a0; $footer-blue: # b2863; $colors: $main, $secondary, $main-blue, $light-blue, $soft-blue, $secondary-blue, $light, $light-gray, $article-blue, $footer-blue; $color-names: main, secondary, main-blue, light-blue, soft-blue, secondary-blue, light, light-gray, article-blue, footer-blue; $side-name: , , , ; $i: ; @each $color $colors { .bg-#{nth($color-names, $i)} { background-color: $color; } .border-#{nth($color-names, $i)} { : solid px $color; } .#{nth($color-names, $i)} { : $color; } $i: $i + ; } @each $side $side-name { @ $k through { .border-#{$side}-#{nth($color-names, $k)} { border-#{$side}: solid px #{nth($colors, $k)}; } } } .border-none{ : none !important; } //Variables 001 465 003 0 28 3364 0357 0 // change _font-color file if more colors are added "left" "right" "top" "bottom" //Background & Border Colors 1 in border 1 color 1 // change if more colors are added in for from 1 10 1 border The result for the code above is right here This is what’s going to make the difference: you are not only saving your website from loading unused classes, you are also creating useful classes that weren’t in the framework you were using in the first place, and you won’t have to repeat them on every CSS file of your website never again! ta-da! That’s it! Congratulations! If you follow this article to the end, you have successfully created your own framework and survived in the process. What’s next? you’d be asking… Well, you can keep adding classes or modifying the ones that already exist but you have created the main core of a very useful framework you can call your own. If you want to see this framework up and running it’s right . here I’d like to hear from you! Was this article helpful? Tell me all about your experience in the process of creating your own framework! claps to you!
