This toolkit is a project to bring both consistancy to the designs I create and to also extend my knowledge in front end technologies, especially SASS.
The Toolkit itself is focused around two main files:
<link rel="stylesheet" media="screen" href="https://toolkit.chris-shaw.com/css/scaffolding.css" />
Basic Layout of the page, it provides utilities to add padding, margins, alignments and widths along with a flexbox based grid. This is the basis for all the toolkit and is intended soly to position items on the screen and does not apply any design to the content.
<link rel="stylesheet" media="screen" href="https://toolkit.chris-shaw.com/css/toolkit.css" />
This contains all the objects and components relating to design, and will contain items such as navigation, boxes, inputs, buttons and any other reusable compontent as they are created. Its intended to be a quick option for adding predesigned features to a website.
Components are reusable chunks of code and css to give consistency to a project and reduce reinventing features.
Layout
The layouts are built using the o-layout object, this is a display flex container and contains the elements of the layout. This is combined with the Utility Class Width, which allows assigning widths based on a 12 column occupation. See Width.
.u-width--1-12 occupies one of twelve available columns up to .u-width--12-12 which occupies all, or the equivalent of 100% width.
Table
| Item | Due Date | Amount |
|---|---|---|
| system1 | 04/01/2016 | £1,190 |
| system2 | 03/01/2016 | £2,443 |
| system3 | 07/01/2016 | £1,181 |
Tabs
Utilities are single use classes to be attacthed directly to an element to add specific behaviour, such as adding a colour, padding, width.
Align
Alter the alignment of content within the page.
Font
Apply common font sizes to content
Margin
Adjust content positioning through spacing outside of the element (margin)
Padding
Adjust content positioning through spacing within of the element (padding)