If you have been working in the field of web development for a long time, sooner or later the question arises of creating your own framework for quick layout. For example, you got a new project. You understand that you can not use new large libraries (bootstrap and the like) on this project, because immediately mark up the entire site. And the work needs to be done quickly, and you do not have to completely redesign the site. You just need to quickly build a couple of pages or a couple of blocks. And to write a bunch of identical styles that you used to use as standard in each of your projects, you simply do not have time. And here comes the idea: why not make your own framework that will quickly insert the necessary classes in html and in the process of layout it will not be necessary to enter the css file every 5 seconds and write new rules there. It is convenient, fast and very effective. For example, I use properties for these purposes, whose class names are taken from Emmet. Who else does not know (there are generally ..?), Emmet is the fastest way to write html and css using constructions like: .row>.col-md-6*2>(h3+p). In html after pressing a key Tab you get this kind of markup:
<div class="row">
<div class="col-md-6">
<h3></h3>
<p></p>
</div>
<div class="col-md-6">
<h3></h3>
<p></p>
</div>
</div>
Those. with the help of one line of Emmet, we can create a markup for the whole of our page in just one minute, which will simply need to be filled with content. In the example Emmet code above, we specify that we need a parent element <div> with the class .row, within which there will be 2 elements <div> with the class .col-md-6 and there will be 2 elements inside it (<h3> and <p>), on the same level.
Also with Emmet we write the rules of css. For example, like this: we write mt10 and click Tab. We get: margin-top: 10px; Styles thus can be written very quickly, and without any typos.
And I had a question: why not make css classes in which you can specify the basic rules of Emmet. For example, write:
<div class="p20"></div>
and get the item <div>, with indentations of 20 pixels.
Or use other Emmet rules for similar fast and understandable markup. To automate the work, I wrote a framework, and below I tell you how to do the same for your needs.
So, how to write your own framework for fast and efficient work
We need:
- Sass (Scss)
- Program Koala
To write styles was not a tedious task, we will use the Sass preprocessor. To be more precise, Scss is a "dialect" of Sass. It allows you to write styles using variables, functions, and mathematical rules. For example, we can write:
@for $i from 0 through 10 {
.mt#{$i*5} {margin-top: 5 * $i +px !important;}
}
and after the work of the interpreter we get the following set of rules:
.mt0{margin-top:0px !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt35{margin-top:35px !important}
.mt40{margin-top:40px !important}
.mt45{margin-top:45px !important}
.mt50{margin-top:50px !important}
Those. We create a variable $i in the loop and, starting from the zero value, we cycle 10 times. At each iteration of the loop, we create a class starting with .mt and with the value of the variable $i multiplied by 5. To this class, we assign a rule margin-top, in the value of which we specify the number of pixels equal to the value of the variable $i multiplied by 5. And add !important so that our style exactly interrupts all other styles of the site. In general, we all know that !important it is better not to use, but in our case it is permissible, because we do the framework and we need this rule to work for sure, otherwise our layout will not look like it should be.
The power of Scss is in this. In the rule above, we could write say let's make the cycle not 10, but 100 times. And we would get a hundred different styles in a split second, without using a copy-paste and a bunch of edits. Study Scss and you will see how much your productivity will grow and your value as a specialist.
Therefore, our task is to create different rules for margin , padding and other css rules using the template above. As an example, I made the basic rules, plus added a few of my own styles.
Result of css-file it turned out: https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.css
If you liked the idea of my framework, you can use it on your project. To do this, paste into the area <head> Your site the next line:
<link rel="stylesheet" href="https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.css">
Or go to the link, copy the styles and paste into the style file of your site.
Original file Scss: https://bitbucket.org/lisogorsky/dev/raw/1f43e26a2ff513970e97b143cda576e6cb2afbb4/cssFramework/my.scss
Download and edit the Scss file at your discretion, add your rules by analogy.
Next, we need a compiler program. We will use Koala. This is a very powerful, flexible and absolutely free program. It will translate your Scss files into the form of an ordinary css. Of course, we can configure all this on the server, but I'll tell you about it later, in other posts. Now our task is to learn how to quickly create your own frameworks and use them in your projects. Download the program on the official website: koala-app.com
After installation, create a folder in which we place our edited Scss file. Then drag this folder into the program window. The program will immediately see your file. Click on it. A menu will appear on the right. Put a tick: "Автокомпиляция", "Autoprefix" and output style "compact" or "compressed". With option "compact" All styles will be separately on each line, and when "compressed" all styles will be minimized in one line. Press a single button "compile". Your stylesheet will appear in the same folder as the Scss file.
Use and enjoy the result!