OPTIONS

Do's and Don'ts . . .

Do's Example
Follow the BEM Naming convention BEM
Use classes to assign styles .block__element {color: #FFFF00;}
Create new .scss files for specificity based on a page. Make sure it is prepended with an underscore.
EG: _pagename.scss
Start your new page specific .scss file with the body class
Every page has a custom class assigned to the body, based on the page file structure		 <body class="index">
Ask yourself if this will be used constantly. It may be part of the common library already or it could be put into it.
Don'ts Example
Use ID's to assign a style #idName {color:blue;}
Name classes by specificity .main__header-blue {background: $primary-silk;}
Avoid inline styles
Dynamic inline styles by JS is fine, but it would still be more benificial to dynamically add a new class.
This cant be done for JS based dynamic numbers though e.g. height or width
 <div style="padding: 500px; color: #fff;">
Assign styles to DOM elements div{ border: 1px solid #f00; }
Use !important
This should not be used if possible. It is best to solve the issue rather than put a plaster on it.
It is only to be used to override JS pasted styles i.e. for the jQuery UI Datepicker		 color: #ff0000 !important;
Use tables for structural elements. Build with the correct DOM.
i.e. DIV's, SECTION's, HEADER's 		Tables should be used for Tabular data only.
Avoid setting a z-index on constantly static components.
It should only be used on dynamic elements such as modals or dropdowns which are hidden again once interaction has ceased.		 .main__header{z-index: 999}
If you are using a bundler to publish your code, dont use the native CSS calc() function. Use the mixin instead: @include calc(width, 100%, +, 40px)

The <body> class!

On the <body> of each page, it will have a specific class assigned to it. This is set at in the header or layout level, depending on language.

The class is set based on the Folder structure of the page you are currently looking at.

For example:
[URL]/page/subpage - the class on the body of this page, will be class="page__subpage"

The first part of the class is taken from the directory, and the 2nd part is taken from the file name.

This allows you to create custom styles for specific pages. - see #pageStyles

Form Elements

These form elements can all be styled dependent on the branding, but the base DOM structure will stay the same.

// Standard input
<div class="input__container">
    <label for="name" class="input__label">Basic input</label>
    <input type="text" id="name" class="input__field" placeholder="input__field">
</div>
// Input field with Icon
<div class="input__container contains-icon">
    <label for="date" class="input__label">Input with icon</label>
    <input type="text" id="date" class="input__field" placeholder="input__field">
    <div class="input__icon datepicker-toggle">
        <i class="icon-svg-calendarpicker"></i>
    </div>
</div>
// Basic dropdown - this contains a label
<div class="select__container-default contains-label">
    <label class="input__label" for="dropdown">Select field - contains label</label>
    <select id="dropdown">
        <option value="">Dropdown</option>
    </select>
</div>
// Basic dropdown - this contains a label
<div class="select__container-default">
    <select id="dropdown">
        <option value="">Dropdown - no label</option>
    </select>
</div>
// Checkbox
<div class="checkbox__container">
    <input data-val="true" id="checkbox" type="checkbox" value="true">
    <label class="input__label" for="checkbox">Checkbox</label>
</div>
// Radio buttons
<div class="radio__container">
    <input data-val="true" id="radio1" type="radio" name="radioGroup" value="true" checked>
    <label class="input__label" for="radio1">Radio 1</label>
</div>
<div class="radio__container">
    <input data-val="true" id="radio2" type="radio" name="radioGroup" value="true">
    <label class="input__label" for="radio2">Radio 2</label>
</div>
<div class="radio__container">
    <input data-val="true" id="radio3" type="radio" name="radioGroup" value="true">
    <label class="input__label" for="radio3">Radio 3</label>
</div>
Plain Button
// Buttons
<button class="btn__plain">Plain Button</button>
<button class="btn__primary">Primary Button</button>
<button class="btn__secondary">Secondary Button</button>
<button class="btn__alternative">Alternative Button</button>

Calendar (jQuery UI)

// CLASSES
.first-cal-toggle // to be used in conjuntion with a 2nd calendar
.second-cal-toggle // to be used with the 1st calendar
.single-cal-toggle // to be used its own
// CUSTOM VARIABLES
@data_calto="idOfTarget" // this is used to auto-toggle to the secondary calendar. i.e. From/To dates
@data_maxdate="365" // this sets the max date of the calendar
@data_mindate="-30" // this sets the minimin date of the calendar (note: This is overridden if you use the secondary calendar)
// MVC
@Html.TextBoxFor(m => m.calendar, "{0:dd/MM/yyyy}", new {@class="input__field  first-cal-toggle", @data_calto="Expiry", @data_maxdate="365", @data_mindate="-30"})
// HTML
<input type="text" id="singleId" class="input__field first-cal-toggle" data-mindate="-3" data-maxdate="-3" data-calto="calendarSecond" >

<input type="text" id="singleId" class="input__field second-cal-toggle" data-mindate="-3" data-maxdate="-3" >

<input type="text" id="singleId" class="input__field single-cal-toggle" data-mindate="-3" data-maxdate="-3" >

Typography

Font family: Open Sans - 200, 400, 500, 700, 800

Class Size Weight Usage
Base font -- 14px 400 This is the base font set on the body
All fonts will be set from this using em's

Main Heading

 <h1> 2em 400 H1 - To be used on banners

H2

 <h2> 1.4em 400 Standard h2

Panel Title

 .panel__title 1.4em 400 this h2 has class of .panel__title - This is to be used at the top of any panel (the white box thingys). It removes the top margin

Body Text

 <p> Base 400 Standard Paragraph
.input__label 1.07em 400 Input Label - Larger for legability with lighter grey colour
Anchor Tag <a> base 600 Default Anchor Tag
.btn__[type] 0.95em 600
Table Header <th> base 400 Table header
Table Label .table__label base 400 Placed on the TD to display a label segment of a <table>

Mixins

Mixin Code variables required
SVG Icon svg-icon($svg-id) ID Relates to the SVG Id in the icons.svg sprite file
Border radius borderRadius($radius) px related variables.
EG: 3px
Border Radius Custom borderRadiusCustom($topRight, $bottomRight, $topLeft, $bottomLeft) px related variables.
EG: 3px, 5px, 12px, 14px
Box Shadow boxShadow($boxShadow) h-offset, v-offset, blur, spread, colour
EG: 0 12px 10px 6px rgba(0,0,0,0.3);
Opacity opacity($opacity) 0 - 1 number. EG 0.3
Word Wrap wordWrap($wordWrap: break-word)
Center Margin central()
Transition transition($transition: all 0.3s ease)
Text Overflow Ellipse text-overflow()
Rotate -90 degrees rotate()
Flexbox Container flexbox()
Flexbox Align Items flex-align-items($align: stretch)
Flexbox align self flex-align-self($align: stretch)
Flexbox Flow Items flex-flow-items($flow: row wrap, $justify: flex-start)
Banner Image Gradient imageGradient($grad-height: 70%)
calc() override calc($param, $val1, $equation, $val2) $param, $val1, $equation, $val2
EG: width, 100%, "+", 40px

LESS Colour Variables

Note: These base colour variables - they can be customised and added too for your brand

Variable Code
$primary rgb(152, 29, 151)
$secondary rgb(236, 214, 186)
$alternative rgb(163, 169, 172)

Icons

Icons are built using an SVG sprite. These are compiled via the icon mixin

you then use the icons.scss file to create the classes which populates the icon

Note: All icons are build using the <i class="[class]"></i> DOM to signfy an icon is used. the <i> tag will not italicize your text

icon-svg-download icon-svg-unchecked icon-svg-checked
icon-svg-sort icon-svg-alert icon-svg-preferred
icon-svg-lcc icon-svg-ndc icon-svg-briefcase
// uses
.icon-# // # = a number based on width+height. 
@include svg-url(iconName); // this is to be put in the class. The iconName gets appaended to the svg file as an ID which will pick out the icons.
// pros
you can easily put an SVG icon anywhere
// cons
They are what they are, no colour customisation.