Get started

Get started immidiately with the default CSS, by including it in the header:

<link rel="stylesheet" href="" />

And here is the simplest starting template:

<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="">
	<title>Shut template</title>
	<div class="page">
		<div class="container">
			Responsive content

Let's open the box

In order to create your own css, based on the basic rules of SHUT, you need to have at least LESS installed, or a LESS task running plugin. I use Gulp, and Gulp-less.

Variables and functions

See the list of variables, and the list of functions inside Shut framework.


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.

The framework loops through the following collections to produce .box-, .label-, .font-weight- and .box-shadow, and basic color-named styles: @color, @shadows, @font-weight-set Removing elements, removes output rules.

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.

The following method depends on IcoMoon generated files, and sekrab-gulpbin gulp tasks.
  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.

The files are included in alphebetical order, a good CSS design, should not be bothered by this.
// 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.


Gulp tasks for assets are document in sekrab-gulpbin