Get started

1. Create a folder for LESS files

Begin with sh.imports.less. Import all styles in one shot:

// import all from shut
@import "sh.less";

Or be specific and include only the styles you need. Here are all individual imports used to create sh.less

// ***********CUSTOM**************

// shut vars
@import "sh.vars.less";

/* resetting */
@import "css.Reset";

// include if used
@import "utilities/arrow";
@import "utilities/border";
@import "utilities/gradient";
@import "utilities/functions";
@import "utilities/media";
@import "utilities/scroll";

// icon functions
@import "css.Icon";

// all other styles
@import "css.General";
@import "css.Layout";
@import "css.Card";
@import "css.Lists";
@import "css.Table";

// uses utitilites/media
@import "css.Grid";

// uses utitilites/border and utilities/functions
@import "css.Button";
@import "css.Box";
@import "css.Label";

// uses utitilites/scroll
@import "css.Modal";

// uses utitilites/media and utilities/functions
@import "css.Type";

/* Print */
@import "media.print.less";

// overriders all the way at the bottom, after all the other styles
@import "css.Override.less";

Add the following, begin with overriding with your variables file, then Gulp task indicators. The task hints to inject and create css files in development environment If you do not wish to use the gulp tasks included in Shut Framework, you can remove them.

// you vars, overwrites shut vars
@import "sh._vars.less";

/************GULP RELATED*************/
// inject:uiless
// endinject

// inject:medialess
// endinject

// overriders kept at last
@import "css.Override.less";

2. Create the variables overrides

Add a file sh._vars.less (or anything). Add the variables you want to overrdie from the list of variables in Shut. Import the file into your sh.imports.less created above.

3. Optional: Create an Icons file

Shut framework is basic, it does not have icons out of the box (nor will it ever). But it, however, includes basic functions to make dealing with custom icons easy. If you have a font icon to use, first, set the @enable-icon-font to true, to include icon related rules.

1. Create a font using IcoMoon, with settings:
   • Generate preprocessor variables for LESS
   • Class prefix: icon-
   • Add ligatures (optional but wonderful)
   • Name your font, and use that name to update @icon-font variable.
2. Download the font file into root folder: fontfiles, and extract.
3. Change gulpfile.js/config to point to folder location iconfontspath: './fontfiles/'
4. Add a file ui.icons.less with gulpinject comments like this:

   // inject:icons
   // endinject
   

5. run gulp createicons
6. run gulp rawless to build the main css file
7. you can browse the icons generated in dummy/iconset.html file.

Now the icons are ready. You can see the generated icons in ui.icons.less

4. Add ui. prefixed less styles

In order to make use of the gulp tasks included, the files of different styles, should be prefixed with ui.. Like for example, ui.header.less.

// ui.header.less:
header {
	position: fixed;
	background-color: @white;
	top: 0;
	width: 100%;
	z-index: 1000;
}

Now you are ready to use gulp in development, to generate the output css file, the RTL version (if required), and the minified versios of them.