Style Guide

SCL Internet

As designers at SCL we strive to deliver high quality, visually pleasing, bespoke websites built with the user experience of both the site owner and end-user in mind. We use a number of tools to achieve these goals. First and foremost is SASS (we use the SCSS variant). Sass is a powerful preprocessor for CSS; it has variables, mixins, functions and loops, not to mention the handy extensions to Compass, the SASS compiler, that we use. We make use of a few plugins for Sublime Text to ensure that our code is consistently well written, functional and easy to maintain.

General Business Elements

Logos

Colours

Style

Used for anything to do with Style.

Hex: #F27840
RGB: 242, 120, 64
Variable: $style

Code

Used for anything to do with Code.

Hex: #5BBB47
RGB: 91, 187, 71
Variable: $code

Logistics

Used for anything to do with Logistics.

Hex: #32AFE4
RGB: 50, 175, 228
Variable: $logistics

Threes

Used as a background-color in a lot of places across the site.

Hex: #333
RGB: 51, 51, 51
Variable: $threes

Twos

Used for body text.

Hex: #222
RGB: 34, 34, 34
Variable: $black

Fonts

Monofonto

Handgloves

This font is used for the SCL in the logo.

Roboto

Handgloves

This font is used for the Internet in the logo.

Lato

Handgloves

This easy to read font is used for the body text on every page.

Mario

Handgloves

Mario is a good looking sans-serif font, but is a little too skinny to be used for body text or titles. It would work well as a display font, it will be used when the time comes.

Mario-i

Handgloves

Just an italic version of Mario.

Mario-b

Handgloves

Mario-b was originally used as the body font for the whole site but we came to the conclusion that a slightly less weighty option was needed.

Mario-bi

Handgloves

This variant of Mario really draws the eye of the user, making it perfect for use for headings across the site.

Styled Elements on the site

Headings

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

Buttons

i

Read More

A simple button with a hover effect. Border color can be changed to fit element styles if needed.

i

Send

Button used for submitting forms.

i

Stripe Button Light

Used for portfolio entry navigation. Can be used anywhere on the site by adding class="stripeButton" to any element that can have children.

i

Stripe Button Dark

Used for blog post navigation. Can be used anywhere on the site by adding class="stripeButton" to any element that can have children.

i

Checklist Save

Used only on the Project Checklist page to save data at the moment.

i

Clicky button

Can be used anywhere on the site by adding class="button-circleClick" to any element that can have children. Inspired by Google's constant use of these buttons

Input Fields

The Grid System

The grid system we use is an extension to Compass called Singularity. The system works entirely in CSS, allowing custom grids to be set up on the fly. Once a grid layout and gutters have been defined, you can drop the child elements in at any position and stretch them to any size, allowing for flexible design layouts.

@include layout(12, 1 / 16)
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
1
This box spans 1/12 of the total width of the container
2
This box spans 1/6 of the total width of the container
2
This box spans 1/6 of the total width of the container
2
This box spans 1/6 of the total width of the container
2
This box spans 1/6 of the total width of the container
2
This box spans 1/6 of the total width of the container
2
This box spans 1/6 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
4
This box spans 1/3 of the total width of the container
4
This box spans 1/3 of the total width of the container
4
This box spans 1/3 of the total width of the container
6
This box spans 1/2 of the total width of the container
6
This box spans 1/2 of the total width of the container
12
This box spans the total width of the container
A few use cases of the 12 grid
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
9
This box spans 3/4 of the total width of the container
3
This box spans 1/4 of the total width of the container
6
This box spans 1/2 of the total width of the container
3
This box spans 1/4 of the total width of the container
5
This box spans 5/12 of the total width of the container
7
This box spans 7/12 of the total width of the container

Content Block Layout

On our site we use a simple content-layout system developed in-house. This system offers simple design layouts with customisation options available on any page or post. Below are the box types currently available.

Image Left

subhead

Image Left

The SCL logo in all its spinning glory

These boxes are available with or without read-more buttons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum purus in lectus eleifend, ac vestibulum quam ullamcorper. Etiam ultrices felis augue, non pulvinar odio lacinia ac. Phasellus quis aliquam ante, quis cursus erat. Ut eleifend at sapien a semper. Morbi ac ullamcorper ante. Proin ac porta massa. Sed tristique nunc mauris, id tristique lectus ultricies quis. Aliquam fringilla laoreet mi quis tristique.

Nulla in turpis mollis, rutrum orci in, euismod nisi. Pellentesque consectetur tortor at tellus lobortis consequat. Nam et rutrum nisl, non egestas lacus. Ut diam nulla, egestas a lectus vitae, dapibus posuere orci. Praesent pharetra metus eu enim pellentesque, in cursus ex pellentesque. Pellentesque eget aliquam magna. In quis cursus neque. Morbi vehicula purus tempor, interdum magna in, pulvinar orci. Praesent a laoreet velit. Suspendisse nibh mi, vestibulum sit amet velit sit amet, vulputate varius orci. Aliquam a faucibus mauris, eget pretium nunc. Fusce interdum vitae enim id lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Image Right

Image Right

Measuring value

A simple subtitle

These boxes are available with or without read-more buttons.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum purus in lectus eleifend, ac vestibulum quam ullamcorper. Etiam ultrices felis augue, non pulvinar odio lacinia ac. Phasellus quis aliquam ante, quis cursus erat. Ut eleifend at sapien a semper. Morbi ac ullamcorper ante. Proin ac porta massa. Sed tristique nunc mauris, id tristique lectus ultricies quis. Aliquam fringilla laoreet mi quis tristique.

Nulla in turpis mollis, rutrum orci in, euismod nisi. Pellentesque consectetur tortor at tellus lobortis consequat. Nam et rutrum nisl, non egestas lacus. Ut diam nulla, egestas a lectus vitae, dapibus posuere orci. Praesent pharetra metus eu enim pellentesque, in cursus ex pellentesque. Pellentesque eget aliquam magna. In quis cursus neque. Morbi vehicula purus tempor, interdum magna in, pulvinar orci. Praesent a laoreet velit. Suspendisse nibh mi, vestibulum sit amet velit sit amet, vulputate varius orci. Aliquam a faucibus mauris, eget pretium nunc. Fusce interdum vitae enim id lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Full Width Image

Optional block height, text-position and fixed background poisition

Large Image

A Large Captionable Image

Just keep swimming, just keep swimming.

WYSIWYG

This box has a WYSIWYG field on the back end. This allows for HTML to be used.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum purus in lectus eleifend, ac vestibulum quam ullamcorper. Etiam ultrices felis augue, non pulvinar odio lacinia ac. Phasellus quis aliquam ante, quis cursus erat. Ut eleifend at sapien a semper. Morbi ac ullamcorper ante. Proin ac porta massa. Sed tristique nunc mauris, id tristique lectus ultricies quis. Aliquam fringilla laoreet mi quis tristique.

Nulla in turpis mollis, rutrum orci in, euismod nisi. Pellentesque consectetur tortor at tellus lobortis consequat. Nam et rutrum nisl, non egestas lacus. Ut diam nulla, egestas a lectus vitae, dapibus posuere orci. Praesent pharetra metus eu enim pellentesque, in cursus ex pellentesque. Pellentesque eget aliquam magna. In quis cursus neque. Morbi vehicula purus tempor, interdum magna in, pulvinar orci. Praesent a laoreet velit. Suspendisse nibh mi, vestibulum sit amet velit sit amet, vulputate varius orci. Aliquam a faucibus mauris, eget pretium nunc. Fusce interdum vitae enim id lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

A quote can be entered here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum purus in lectus eleifend, ac vestibulum quam ullamcorper. Etiam ultrices felis augue, non pulvinar odio lacinia ac. Phasellus quis aliquam ante, quis cursus erat. Ut eleifend at sapien a semper. Morbi ac ullamcorper ante. Proin ac porta massa. Sed tristique nunc mauris, id tristique lectus ultricies quis. Aliquam fringilla laoreet mi quis tristique.

Left Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus. Aliquam erat volutpat. Vivamus non tortor tristique, consectetur felis ac, tempor urna. Curabitur vel dictum odio. Nulla pellentesque accumsan magna, vitae tincidunt tellus iaculis vel. Suspendisse sodales leo enim, quis tristique tortor congue eget. Etiam eget finibus sem.

Middle Column

Pellentesque sit amet cursus lectus. Donec tempus metus sed urna feugiat, ac fermentum felis tristique. Aenean et diam fermentum, interdum enim at, gravida lorem. Aenean placerat tempus magna, in iaculis lectus aliquet in. Phasellus convallis quam vel nulla porttitor posuere. Etiam ac tempus ante. Nam feugiat scelerisque risus eu vehicula. In ac hendrerit ex.

Right Column

Donec sit amet congue tellus. In hac habitasse platea dictumst. Fusce vehicula purus ut quam congue tincidunt. Aenean arcu neque, interdum vel scelerisque sit amet, convallis sit amet libero. Morbi malesuada urna et tortor congue, ut lacinia enim lacinia. Integer ut risus sit amet turpis sollicitudin egestas. Duis ac sollicitudin purus.

A professional approach with a personable attitude

Half Width Repeater (2 by X)

This block creates a 2 column grid. The grid can have as many rows as desired and can mix-and-match icon-type and text-type layouts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

Icon Layout

The Icons option splits the created areas into a section for the image and a section for text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

These ones go the other way

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

We love making websites, we love creating solutions

An inverse of what's above

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

Text blocks too

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

Customisation is king

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pellentesque arcu quis malesuada aliquet. Vestibulum venenatis in lacus vel finibus.

text tile

subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sapien lorem, lacinia a venenatis ac, bibendum a lacus. Vivamus ullamcorper ornare justo sed vestibulum. Suspendisse hendrerit molestie pretium. Morbi nibh elit, blandit ut velit sollicitudin, ultrices scelerisque lacus. Donec magna risus, scelerisque eu cursus nec, laoreet nec mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla non congue quam. Maecenas cursus malesuada orci at pulvinar. Integer eget magna egestas, sagittis diam non, fringilla enim. Sed a mi ut justo maximus gravida.

image tile

subtitle

of