Banshee Studio Dev Guide

General Best Practices:

Sass

Specificity

When writing Sass, use 1 selector (element or class, not both). Follow a BEM naming convention for all class names and elements.

Architecture

Abstracts – refers to all variables, mixins and functions.
Base – Top level theme styles such as font sizes, grid and the basic style guide.
Global – Globle components: forms, menu, header and footer etc.
Components – Atoms/components. Buttons, cards, things that appear within layouts across multiple blocks
Utilities – Utility classes.

Measurements

All measurements are on a base 16 system, with 1 Grid Unit being 0.25rem. Throughout the code you may see utility classes like u-marginBottom8gu. This means add a margin-bottom of 8 grid units (0.25rem * 8 = 2rem = 32px). Use rems. Do not use px values for spacing.

Colors:

Utility classes, CSS, SCSS variables are generated with every project and are theme specific.

      swatch('color');

      in action:

      .u-bgColorPink {
        background-color: swatch('Pink');
      }
    

Full List:

• Green
• Blue
• Pink
• Orange
• Yellow
• Gray
• Neutral
• Black
• White
• Error
• Success

Fonts and Type Scale:

This site follows a Minor Third on a base size of 16px or 1rem. This means that each step up is 1.2^step size power, and each step down is 0.833^step size. For more on this see type-scale.com and select the minor third scale.

That's a lot of math, so rather than calculating use the 2 functions where the number you enter is the step away from the baseline.

      typeScalePlus($number)
      typeScaleMinus($number)
    
For example, the copyright in the footer is 2 steps below the baseline so the scss for that could be written like so:
    
      .copyright {
        font-size: typeScaleMinus(2);
      }
    
      
There are also utility classes where this can be applied:
      
.u-textSizePlus5 = 39.81px
      
.u-textSizePlus2 = 23.04px
      
.u-textSizePlus1 = 19.20px
      
.u-textSizeMinus1 = 13.33px
    

Layouts:

All layouts are to be built on a consistent layout with blocks, containers, then columns if needed. For code reference see

assets/src/sass/base/_grid.scss

The basics

The basic structure is this:

      <section class="block block--modifier">
        <div class="container container--modifier">
          Contents
        </div><!--.container-->
      </section><!--.block-->
    

Or for a multi-column layout:

      <section class="block block--modifier">
        <div class="container container--modifier grid grid--modifier">
          <div class="grid__col">
            Content
          </div><!--.grid__col-->

          <div class="grid__col">
            Content
          </div><!--.grid__col-->
        </div><!--.container-->
      </section><!--.block-->
    

Containers

There are a number of container widths that can be added as class modifiers. The base container class is 85% mobile/95% tablet and up, with a max width to keep it centered. Modifiers will change the max-width or the overall width percentage

Multi-column Layouts

As mentioned this is a flexbox grid, based on 12 columns. There are 2 main styles, standard or gutters. In a standard layout all columns are flush, gutters adds gutters.

Note: you can overlay a basic guide over any page of the site by adding ?guides=standard or ?guides=gutters to the url.

Utility Classes

This theme has a large number of premade Utility Classes that are available for use. You do not need to use them, but know that they do exist and you're welcome to them. The goal of having them is so you can make small style changes to elements without having to write additional Sass.

All follow the same naming convention, u-camalcasePropertyValue Some examples are below:

Text Color

• u-textColorPrimary
• u-textColorPrimary300
• u-textColorSecondary
• u-textColorSecondary300
• u-textColorNeutral900

Background Color

• u-bgColorBlack, u-textColorWhite
• u-bgColorNeutral900, u-textColorPrimary100
• u-bgColorSecondary

Padding/margin

These behave the same, so they're grouped. These also accept breakpoint modifiers: u-{sm, md, lg, xl}-marginBottom12gu for example.

Others

There are others, check the Sass directory for more.

/assets/src/sass/utilities/