Stingy Developer
Published in

Stingy Developer

Build It Yourself : Building your own CSS framework

Photo by Jamie Street on Unsplash

CSS frameworks are used to build a webpage by using grid layouts, some components and more. Generating some certain classes and using them in your projects show power of CSS classes. Using them is vey easily and useful. We have already used CSS frameworks such as Bootstrap and Material. They are great frameworks. However, in some situations, they are not enough for us. We need other small specific libraries and more. As a result, dependencies of our projects may be huge. In this case, we may need to build our own CSS framework. I will describe how to build your own CSS framework. Let’s build.

Photo by Pankaj Patel on Unsplash

Build your own CSS framework

To build a CSS framework, we need to using some useful technologies such as Sass, Scss or Less. They provide us a programmatic structure for writing CSS codes fast. They includes a lot of features that there are not in CSS such as for loops, if-else and more. I will use Scss in this article.

1. Get Started with Scss

If you are using VSCode as code editor, you can compile your files easily by using Sass/Less/Scss/Typescript/Javascript/Jade/Pug Compile Hero Pro that is an extension.

2. Creating first file

Now, create a scss file and write your first scss variables.

$columns:12;$col-tag:'','-sm','-md','-lg','-xl';// breakpoints$breakpoint-xs:0;$breakpoint-sm:576px;$breakpoint-md:768px;$breakpoint-lg:992px;$breakpoint-xl:1200px;

Or like that…

@use 'sass:list';@import "variables";@each $var in $breakpoints {//container-tag$index: list.index($breakpoints, $var);$tag: list.nth($col-tag, $index);$width: $var;@if $width == 0 {$width: 100%;}.container#{$tag} {width: $width;display: block;margin: 0 auto;padding: 0 15px;}// container tag - media@media (min-width: $var) {.container {width: $width;}
}
}

After writing something, click right and select compile files. You will create a css file in a “dist” directory. Also, you can create a minify CSS file by select “Create minify file” option in extension settings.

3. How to use Sass ( Learning )

I will publish a article series and I will put links.

4. What should a CSS framework include?

I can give some advices in this topic.

  • Firstly, a CSS framework has to include page layouts such as grid system. Nowadays, grid systems is very important for webpage design. Your grid system should be flexible and customizable.
  • Secondly, a CSS framework has to include a lot of components. Only grid system isn’t enough for your framework. It also should include some components such as alerts, buttons and more. In addition, they should be customizable.
  • Finally, a CSS framework should be minify. You know that size of a webpage effects loading time. Therefore, if size of your CSS file is bigger than 300–400KB, there is a problem here. You should try to separate your CSS file multiple file. You can use your advanced components as plugins. This may reduce size of your CSS files.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store