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;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;
};// 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-light:#f3f3f3;
@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;
@yellow:#ffc400;
@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;
// .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
};
// 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;// 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;
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;
}
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);