LESS variables

Here is a list of variables used to define SHUT. Copy the file into your own space, and redefine the values. It is always a good idea to copy all of the variables, not just the ones you want to overwrite, to be always aware of what is available.


// enable rem, if false, the font sizes generated in px.
@rem-enabled: true;

// if false, the radius will be ignored anywhere it is used
@enable-rounded: true;

// if true, the icon font face, and font styles are included
// if you do not yet have a font for icons, set this to false
@enable-icon-font: false;

// if true, the font-size scales by @resFontFactor when using .res-font-size(size) function
@enable-res-fonts: true;
Note: the html tag font-size is scaled for md screen width by @resFontFactor, using the res-font-size() function.


// icon font folder
@font-url: '../fonts/';

// icon font file name (.ttf, .woff, .svg are expected)
@icon-font: 'vpicons';

// margin-right of .icon-inline 
@icon-inline-margin: @space;

// main font-family
@fontface: -apple-system, BlinkMacSystemFont,  "Roboto", "Segoe UI", "Fira Sans", "Helvetica Neue", Arial, sans-serif;

// rtl font-family
@fontface-ar: Traditional Arabic, tahoma, sans-serif;

// html font-size
@htmlFontBase: 62.5%;

// how much to increase size used in .res-font-size() (read in functions)
@resFontFactor: 1.2;

// main font-size multiplier used in .font-size() (read in functions)
@font-size: 1.4;

// font-size in print media
@font-size-print: 80%;

// main font-multipliers for re-use
@font-multiplier: {
	larger: 3.5;
	large: 3;
	f1: 2.5;
	f2:  2;
	f3: 1.75;
	f4: 1.5;
	f5: 1.25;
	f6: 1;
	small: 0.9;
	smaller: 0.8;

// add extra multipliers, this will generate class names with the correct font-size
@custom-font-multiplier: {
	newExample: 4.2;

// font weights used to create weight-* classes. 
// if font-variation-settings "wght" is not supported, the numbers are corrected to the nearest lowest 100
// for example 380 would round to 300 
@font-weight-light: 300;
@font-weight: 400;
@font-weight-medium: 500;
@font-weight-bold: 700;

@font-weight-set: {
	light: @font-weight-light;
	normal: @font-weight;
	medium: @font-weight-medium;
	bold: @font-weight-bold;
	mynewweight: 950;

Read more under Type


// basic grey colors according to use
@text-color: #202020; // basic text color
@text-light: #959595;
@text-lighter: #cccccc;
@text-dark: #202020;
@white:		#fff; // the inverse of basic text
@grey: 		#999999;
@grey-dark: #263238;
@black: 	#000;
@linkcolor: 	#0c00b4;
@visitedcolor:	#800080;
@altcolor: 		#048bca; // alt link color used for hover effect 
// main colors only, the rest should be by user definition
// note: these LESS variables are never used explicitly in the framework
@red: 	#f31109;
@green: #57b347;
@blue: 	#0097A7;

@red-light: lighten(@red, 20%);
@yellow-light: lighten(@yellow, 20%);
@green-light: lighten(@green, 20%);
@blue-light: lighten(@blue, 20%);
// the colors set, whatever you add or remove here will affect .box-*, and .label-* classes
// with background color set as you set it, and front color set using .fcolor function (see functions)
@colors: {
	red: 		@red;
	yellow: 	@yellow;
	green: 		@green;
	blue: 		@blue;
	red-light: 		@red-light;
	yellow-light: 	@yellow-light;
	green-light: 	@green-light;
	blue-light: 	@blue-light;
	light:  	@text-light;
	lighter: 	@text-lighter;
	grey: 		@grey;
	grey-light: @grey-light;
	grey-dark: 	@grey-dark;


// table colors and spaces
@table-th-border-color: @grey-dark;
@table-td-border-color: @grey-light;
@table-ft-border-color: @grey-dark;
@table-spaced: @space;
@table-half-spaced: @halfspace;
@table-striped-bg-color: @grey-light;
@table-th-bg-color: @grey-light;

Read more under Color


// .content padding
@mainpad: @space;

// rounded corner radius, including box radius
@radius: 3px;

/* spacing and layout */
@space: 		15px;
@halfspace: 	@space * 0.5;
@extraspace: 	@space * 1.5;
@doublespace: 	@space * 2;

@box-border: 1px; // for white boxes
@box-padding: 10px; // for all boxes
@label-padding: 0.25rem 0.8rem;
@label-radius: @radius;

// lists spacing (for margins and padding, thus the total amount of space is double)
@list-spacing: 0.7rem; 

// the border color between .rowlist items
@rowlist-border: @grey-light;

// grid base, 12 will produce 1 to 12 of columns (see Grid functions)
@wrapper: 12;

// the minimum factor for heights generated for .h-* and .hm-* (see Grid functions)
@grid-column-height: 60px; 

// breakpoints for responsive page behavior
// not all are used in the black box, and you can add more defintions
// new definitions can be used with .media() function 
@screen: {
	xs: 480px; // special cases
	sm: 600px; // mobile interface
	md: 720px; // tablet portrait (used in Shut)
	lg: 960px; // the usual desktop and landscape tablets (used in Shut)
	xl: 1280px; // more popular small desktop (used in Shut)
	ds: 1600px; // up above desktop

Read more under Grid.

Read more under Media functions.


// used in modal dialogs
// overlay backgroud color
@modal-bg: fade(@black, 60);

// modal window z-index, overlay is minus 10
@modal-zindex: 1040; 

// modal layout
@modal-margin: @space;
@modal-padding: @halfspace;
@modal-scrollbar-width: 5px;

// maximum width of modal in screen widths larger than md
@modal-md-width: 700px;

Read more under Modal.


// the btn-diff background color
@btn-diff-bg: @red;

// btn-* layout
@button-padding-h:  1.6rem;
@button-padding-v: 1.2rem;

// btn-sm padding
@button-sm-padding: 0.8rem;

// .bthick and .bthin border color
@b-color: @grey; 

// .bthick-dark and .bthin-dark border color
@b-dark-color: @grey-dark;

CSS Variables

Most of the LESS variables are also assigned css variables, in case you want to use the generated CSS instead. All variables are on :root level, and all are prefixed with --sh-

:root {
	--sh-fontface: @fontface;
	--sh-fontface-ar: @fontface-ar;
	--sh-font-size: @font-size;
	--sh-font-weight-light: @font-weight-light;
	--sh-font-weight: @font-weight;
	--sh-font-weight-bold: @font-weight-bold;
	--sh-text-color: @text-color;
	--sh-text-light: @text-light;
	--sh-text-lighter: @text-lighter;
	--sh-text-dark: @text-dark;
	--sh-white: @white;
	--sh-grey-light: @grey-light;
	--sh-grey: @grey;
	--sh-grey-dark: @grey-dark;
	--sh-black: @black;
	--sh-linkcolor: @linkcolor;
	--sh-visitedcolor: @visitedcolor;
	--sh-altcolor: @altcolor;
	--sh-red: @red;
	--sh-yellow: @yellow;
	--sh-green: @green;
	--sh-blue: @blue;
	--sh-red-light: @red-light;
	--sh-yellow-light: @yellow-light;
	--sh-green-light: @green-light;
	--sh-blue-light: @blue-light;
	--sh-space: @space;
	--sh-rowlist-border: @rowlist-border;
	--sh-b-color: @b-color;
	--sh-b-dark-color: @b-dark-color;

In progress

These variables are not solid, they always need a second look.

// color contrast threshold, where transition from light to dark is defined
@front-color-contrast: 43%;

// light labels on hover of a link by how much percentage
@lightLabel: 15;

// genereate .box-shadow-* out this set, with box-shadow set to the value
// no element is used in Shut, you can modify names and values
@shadows: {
	none: none;
	shallow: 0 0 5px 0 rgba(0,0,0,.1); 
	normal: 0 2px 2px 0 rgba(@black,0.14), 0 1px 5px 0 rgba(@black,0.12), 0 3px 1px -2px rgba(@black,0.2);
	deep: 0 6px 10px 0 rgba(@black,0.14), 0 1px 18px 0 rgba(@black,0.12), 0 3px 5px -1px rgba(@black,0.3);
	deeper: 0 16px 24px 2px rgba(@black,0.14), 0 6px 30px 5px rgba(@black,0.12), 0 8px 10px -5px rgba(@black,0.3);

// transition function used in modal animation
@trans-func: cubic-bezier(.4,0,.2,1);