CSS Framework and Sass
In this article, we will compare the CSS frameworks and see the interest of a CSS preprocessor.

Introduction
Although HTML/CSS is standardized, web browsers do not interpret all the code in the same way and do not always include all instructions. Also, a browser may still have some bugs with certain instructions.
Thus, a web page without error HTML/CSS code may appear differently depending on the browser used.
This greatly complicates the task of web designers who generally want their site to be readable by the greatest number of Internet users.
Another difficulty is added, since the search engines recommend that webmasters make their pages responsive so that they adapt to all resolutions.
It is now possible to modify properties of objects as soon as a change in window size or orientation occurs with the @media statement. But again, we can note some differences in the implementation of media queries from one browser to the other.
To facilitate the task, customizable and responsive CSS frameworks have been developed.
The most complete ones offer responsive/fluid grids, sets of buttons, forms and include fonts of characters.
Another problem is the use of JavaScript. Loading some JavaScript libraries like JQuery slows down the loading of web pages and this can be detrimental to SEO.
Some frameworks are limited to CSS only, which has the advantage of not requiring the web designer to include some JavaScript libraries.
It is a fact that we cannot always avoid the use of JavaScript to handle certain events, such as closing a menu when the
user clicks next to it or to make a text area visible by pressing on a button.
CSS Frameworks
Many of these frameworks are free, but if you just use them without customizing them, you risk getting a site of the same appearance as thousands of other websites.
Framework |
Browser version |
Stylesheet lang. |
JS lib. |
responsiveness |
IE: version >= 8 |
Sass/Less |
JQuery |
Responsive, |
|
IE: version >= 9 |
Sass |
modernizr.js |
Responsive, |
|
IE: version >= 9 |
Sass/Less |
JQuery |
Responsive, |
|
IE: version >= 8 |
CSS |
None |
Responsive |
|
IE: version >= 8 |
Less |
JQuery |
Adaptive, |
|
IE: version >= 8 |
CSS |
None |
Adaptive |
|
IE: version >= 8 |
Sass |
None |
Responsive |
License:
Kube open source, UIKit YOOtheme (under MIT license) and the others MIT.
Which framework to choose?
This depends essentially on the type of site you want to achieve.
The best known are currently Bootstrap and Foundation.? It is difficult
to designate the best of both.
UIkit is great for its animations, effects.
The following in the table are much lighter and will suit better if you prefer
the speed of your site.
Here is an example of a button that can be obtained with skeleton and the code:
<a
class="button button-primary" href="#">Anchor
button</a>
Sass and Less are style sheet language that interpret into Cascading Style Sheets (CSS).
I will not compare Less and Sass which are similar, but I will say how to use them under Visual Studio and I will give some examples of using Sass.
Installation of Less and Sass.
In Visual Studio 2015, I installed
and tried Web compiler which allows to compile the less
and scss files by right clicking on a file directly in Visual Studio.
On the other hand, to work or test scss files, I prefer to install Koala on Windows.
You can find the documentation of Sass
here here
and that of Less there.
Less is much more documented than Sass.
Example with Sass
To start download Skeleton Sass and decompress the file into a working
directory skeleton-sass-master.
Here is the directory structure:
skeleton-sass-master
| skeleton.css
| skeleton.css.map
| skeleton.scss
|
+---core
| _config.scss
| _dependencies.scss
| _functions.scss
| _mixins.scss
|
+---normalizesass
| | _normalize.scss
| |
| \---normalize
| _import-now.scss
| _normalize-mixin.scss
| _variables.scss
| _vertical-rhythm.scss
|
\---themes
+---fresh
| | _base.scss
| | _skeleton.scss
| | _vars.scss
| |
| \---marrow
| _mixins.scss
|
\---sphenoid
| _base.scss
|?? _skeleton.scss
| _vars.scss
|
\---marrow
_private.scss
_public.scss
If the skeleton.scss file does not exist, it is necessary to create it with one of the two themes provided.
@import "normalizesass/normalize/import-now" //import normalize-scss
@import "core/config"; //Skeleton Sass core loader
// import default theme variables
@import "themes/sphenoid/vars"; //theme variable overrides
// import default theme styles
@import "themes/sphenoid/base"; //theme base styles
@import "themes/sphenoid/skeleton"; // theme grid styles
It only remains to compile it to get a CSS file. After compiling, you
will get a single file named Skeleton.css.
To customize a theme, it is better to clone an already existing theme and modify ?_base.scss , _vars.scss, etc.
For example, in the fresh theme, you can
edit the file _vars.scss and modify the color button:
$button-color: #555;
