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.

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>

Anchor button

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;