Skip to main content

Styles

Welcome to Styles, the pattern library for iambacon websites.

Yay! v1.0 launched

Styles is very much a work in progress. The goal of version 1.0 was to have a documentation site up and running explaining all the parts that make up the current pattern library for https://iambacon.co.uk.

Pattern library guidelines

This guide lays out common patterns, structure and naming conventions. The goal is to help create an understandable and maintainable CSS architecture.

General style format and naming conventions

Example:

// this is a comment

.style-format {
color: #000000;
background-color: rgba(0,0,0,0.5);
}

File structure

CSS files should be structured as follows:

sass

+-- base
| +-- functions
| | +-- _functions.scss
| +-- mixins
| | +-- _breakpoints.scss
| +-- _normalize.scss
| +-- _variables.scss
+-- components
| +-- _buttons.scss
| +-- _footer.scss
+-- objects
| +-- _lists.scss
+-- utilities
| +-- _grid.scss
| +-- _spacing.scss

Base

Base styles are default global styles for elements. Base styles are classless. Typically base will include your css reset file and element defaults for the particular project.

A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.

// Example typography file

html {
font-size: 62.5%;
}

body {
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 1.2;
}

Mixins

Mixins are reusable classes that do not output any CSS unless used in another class.

// Example mixin

@mixin visually-hidden() {
position: absolute !important;
overflow: hidden !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
}

.visuallyHidden {
@include visually-hidden;
}

Objects

Objects are universal abstractions. Objects define the layout and/or behaviour of a particular repeatable object. Objects should not have knowledge of their height or width, they should fill their container.

Naming convention

For Objects use BEM (Block, Element, Modifier) notation.

// BEM notation pattern

.block {
&__element {
}

&--modifier {
}
}

CSS should be constructed as follows.

Example:

// Example BEM notation

.o-vertical-menu {
&__list {
position: absolute;
top: 100%;
right: 0;
}
&__item {
float: left;
line-height: 1;

&--large { // Modifier
line-height: 2;
}
}
}

// Example html
<menu class="o-vertical-menu">
<ul class="o-vertical-menu__list">
<li class="o-vertical-menu__item"></li>
<li class="o-vertical-menu__item--large"></li>
</ul>
</menu>

Components

Components are one off modules such as banner/header/footer etc. This layer can make use of utilities, objects and base styles and extends them for its own use. Here the design can be more flexible. Components can be made up of other components.

Naming conventions

For components use kebab case.

Example:

// Example section

.c-site-header {
position: relative;

&-logo {
float: left;
margin-top: 20px;
margin-left: 5%
}
}

Utilities

Utilities are global classes, mixins and state classes to be used throughout the project.

Global classes

Typically these are helper classes such as heading sizes. These are commonly used styles that can be applied to elements where required. This avoids repetition in components.

// Example global classes

.h1 { font-size: 20px; }
.h2 { font-size: 17px; }
.h3 { font-size: 14px; }
.h4 { font-size: 13px; }
.h5 { font-size: 13px; }
.h6 { font-size: 11px; }

State

State is something that overrides all other styles. These are typically used to represent if an element is active, hidden, expanded etc.

Example:

// Example state classes

.is-error { background-color: #FF0000; }
.is-hidden { display: none; }