CPS

ToolKit

In Development
This toolkit is an ongoing development as part of an exercise for me to try different css tools and act as a resource for pulling premade components.
Menu

Summary

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:

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.

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.

Objects and Componenets

Objects are reusable unstyled html to allow quick design building, where as compontents work ontop of the objects to give a reusable design such as a alert box.

Accordion

TEST CONTENT FOR SLIDE 1
TEST CONTENT FOR SLIDE 2
TEST CONTENT FOR SLIDE 3

Blocks

TEST CONTENT FOR SLIDE 1
TEST CONTENT FOR SLIDE 2
TEST CONTENT FOR SLIDE 3

Box

Content

Button

Input

.c-input can be applied to add basic structure to inputs

Remember Me Radio

Image

Prevent image from overflowing and allow image sizing and tweaks.

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.

Item 1
Item 2
Item 2

Navigation

SiteName

Tabs

TEST CONTENT FOR SLIDE 1
TEST CONTENT FOR SLIDE 2
TEST CONTENT FOR SLIDE 3
TEST CONTENT FOR SLIDE 4

Utilities

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.

.u-align__text
.u-align__text--right
.u-align__text--center

Font

Apply common font sizes to content

.u-font-size--alpha
.u-font-size--bravo
.u-font-size--charlie
.u-font-size--delta

Margin

Adjust content positioning through spacing outside of the element (margin)

.u-margin--tiny
.u-margin--small
.u-margin--medium
.u-margin--large
.u-margin--huge
.u-margin-bottom--huge
.u-margin-right--huge

Padding

Adjust content positioning through spacing within of the element (padding)

.u-padding--tiny
.u-padding--small
.u-padding--medium
.u-padding--large
.u-padding--huge
.u-padding-bottom--huge
.u-padding-right--huge

Themes

Apply colour pallets to elements including border, font and background colours.

u-theme-grey
u-theme-green
u-theme-orange
u-theme-red
u-theme-blue
u-theme-eclipse
u-theme-sargasso

Width

The width utilities are meant to be used with the layout object for a simple grid system.

u-width--4-12
u-width--2-12
u-width--2-12
u-width--4-12
u-width--4-12
u-width--4-12
u-width--4-12
u-width--4-12
u-width--4-12
u-width--4-12
Copyright Christoper Shaw 2019