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
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.
$primary-font: 'Source Sans Pro', sans-serif;
$secondary-font: "Gentium Basic", serif;
Avoid setting important, talk to a college before setting something important.
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
Font awesome is also used.
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.
When making styles write
the specific styles that get applied to #thediv are written first
we then write the media queries for the elements
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
We write our classes cascading with more details being added at the end.
When we update a class we append an other class example
would get update with
<div class="my_accordian_element my_accordian_element--open">
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.
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.
We have a few classes that we keep with almost all of our projects, and just guides in general.
These do as you'd expect, using block and inline block respectively
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
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.