CSS and SCSS

Some rules and methodologies for writing css.


We use Grunt

We use a file structure

All files are combined in the style.scss file.

a-z for files that are used in all project, these are usually generic styles and the settetings file

01-99 for files that are relate to specific pages

001-999 for component style files, this is for elements of html that are reused through out the site


Global scss

We have a global file that contains all of the properties.

b_settings.scss contains a bunch of settings and global variables that should be change project to project.



$blue:#0B2C5D;$blue_light:#DCE5F2;$red:#ef3d42;$red_light:#E7D6DE;$yellow:#7D7E0F;$yellow_light:#E4E3C9;
$primary-font: 'Source Sans Pro', sans-serif;$secondary-font: "Gentium Basic", serif;   


Avoid setting important, talk to a college before setting something important


Functions


font-size($size)opacity($opacity)at-queryvendorize  




Css Framework

PureCss

We use pure, this allows us to quickly get a base grid down.

We also use pure responsive, this makes it mobile friendly, one quark is the way the 

responsive works. 


Font Awesome

Font awesome is also used.

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css


Spacing and Alignment

Add padding/margin to bottom of elements, try to avoid top.

Avoid floats, and grids or modern css due to backwards compatibility, use inline-block elements in stead.

To vertically align middle an element try vertically align middle on the current element and the element you want to align it with.

If you are vertically aligning middle with a space use the table trick.


Structure of the css

When making styles write


#thediv{    the specific styles that get applied to #thediv are written first    we then write the media queries for the elements    #subdivs{we then write all the other styles relating to the sub elements    }}


Inline elements must not have their font-size, margin, display be set at a global level


Class and Id Names

We write our classes cascading with more details being added at the end.

When we update a class we append an other class example


<div class="my_accordian_element">

would get update with


<div class="my_accordian_element my_accordian_element--open">


CSS for editable content

When adding css to editable elements on the page make sure the user will not be restricted by the styles you are adding. No nth children or having to have <br> tags, the user can't control these things so don't force your self to control it.


Try to be as global with your styles as possible, and keep those global styles on the global page. Every page after that has a .page_class_name so use the name space of the page for page specific styles.


Before starting a project write out all the global css in the global file.


Buttons vs Hyperlinks

If the hyperlink goes no where it should be a button, to sum it up.

If the button brings you to a new page and is not submitting, it should probably be a hyperlink.


Querks

We have a few classes that we keep with almost all of our projects, and just guides in general.


Hiding element

These do as you'd expect, using block and inline block respectively

.mobile_show.mobile_hide.mobile_show_inline.mobile_hide_inline


Colours

You should never be writing new colours in your scss, only add new colours to the settings file and reference it from there.

When using colours, make sure the contrast is there 

https://webaim.org/resources/contrastchecker/

Fonts

Fonts like colours should only be variables. 

For font-size please use the function font-size($size in px), eg @include font-size(20px);

To use font-awesome as a font add the class fa.