Siruss D7 Boilerplate

Drupal 7 Biolerplate, incorporating a custom, responsive grid theme, built using SASS.

  • Username:  Administrator
  • Password:  qazwsx123

Using SASS

All edits and/or additional styles should be written in SASS and preprocessed into the single included css/styles.css file. DO NOT edit style.css directly.
There are many SASS preprocessors available, but I recommend a node.js build tool like 'gulp.js'.
SASS uses a sustem of variables and mixins. A variable sets a reusable value (ie if $brand-color: #f3f3f3; then $brand-color will be #f3f3f3 wherever used.) A mixin is a style rule or set of style rules that can be called byother style rules by including. (ie if @mixin blackbox {background-color: block; padding: 10px}; then @include blackbox; will include both background-color and padding rules into the rule where included.)

Mobile First and 'DRY'.

The theme is a 'MOBILE FIRST' theme based on the 'add' principal to keep the ooutput 'DRY' (reduce the amount of CSS overrides required) for modification in response to screen width. We start with a reset and a set of base styles and editable SASS variables and mixins that set styles common to all screen sizes, then override at defined breakpoint to add required styles for larger screens and layouts. 

The Grid System

A 12 column grid, based on the Bootstrap princilple of adding col- classes to elements.
The col- class are built using the existing media query mixins set in the theme files and can be stacked to provide different layout at different breakpoints. All columns are 100% wide at 'mobile first as default. 

<div class=''col-xs-6 col-4 col-lg-2'> Will be styled to be 6 cols wide at 0px and up, 4 cols at 768px and up and 2 cols at 1024px and up. (As 768px and above is the most common breakpoint for most changes, it's classes are simply col- and number for conveience.) *NOTE col-xs and col-s classes are seldom needed and only when we want more than one column at mobile sizes, however each column needs to have atleast one col- class declared to receive correct layout padding and floats. (Even if column is always 100% across all breakpoints it should have class of col-12)

  • col-xs-  0px and up 
  • col-s-  480px and up
  • col- 768px and up
  • col-lg- 1024px and up
  • col-xl- 1280px and up