Aram Style Guide

1. Globals

Globally defined styles such as colours, fonts, form elements, icons etc. Many globals also have an equivalent utility class, prefixed with a u-.

The logo can be added to an element using one of the classes below. There are 3 variations logo--l, logo--m and logo--s. If you leave out the variations the logo will be medium on mobile/tablet and large from desktop.

Example markup:

<div class="icon__logo--aram-store"></div>
icon__logo--aram-store logo--l
icon__logo--aram-store logo--m
icon__logo--aram-store logo--s
icon__logo--aram-contracts logo--l
icon__logo--aram-contracts logo--m
icon__logo--aram-contracts logo--s
icon__favicon-master--aram-store
icon__favicon-master--aram-contracts

Colours

Grey Colour Palette

u-color--black | u-bg-color--black | u-bdr-color--black
u-color--dark-grey | u-bg-color--dark-grey | u-bdr-color--dark-grey
u-color--medium-grey | u-bg-color--medium-grey | u-bdr-color--medium-grey
u-color--light-grey | u-bg-color--light-grey | u-bdr-color--light-grey
u-color--white | u-bg-color--white | u-bdr-color--white

Secondary Colour Palette

u-color--success | u-bg-color--success | u-bdr-color--success
u-color--error | u-bg-color--error | u-bdr-color--error
u-color--warning | u-bg-color--warning | u-bdr-color--warning

Fonts

Font Families

Futura BT Light

u-font-family--sans-serif u-font-weight--normal u-font-style--normal

Futura BT Light Italic

u-font-family--sans-serif u-font-weight--normal u-font-style--italic

Futura BT Bold

u-font-family--sans-serif u-font-weight--bold u-font-style--normal

Futura BT Bold Italic

u-font-family--sans-serif u-font-weight--bold u-font-style--italic

Headings

Defaults

Heading Hero
Heading Hero

Heading H1
Heading H1

Heading H2
Heading H2

Heading H3
Heading H3

Heading H4
Heading H4

Heading H5
Heading H5
Heading H6
Heading H6

Alt Hero
Alt Hero

Alt H1
Alt H1

Alt H2
Alt H2

Alt H3
Alt H3

Alt H4
Alt H4

Alt H5
Alt H5
Alt H6
Alt H6

Example markup:

<h1>Heading H1<br><span class="u-font-weight--normal">Heading H1</span></h1>
<h1 class="is-hero">Hero H1<br><span class="u-font-weight--normal">Hero H1</span></h1>
<h1 class="is-alt">Alt H1<br><span class="u-font-weight--normal">Alt H1</span></h1>
<h1 class="is-hero is-alt">Hero Alt H1<br><span class="u-font-weight--normal">Hero Alt H1</span></h1>

Faking It...

Headings can also be styled to look like other headings by using one of the classes h1 through h6. For example:

I am a H1 Heading that looks like a H4 Heading

Example markup:

<h1 class="h4">I am a H1 Heading that looks like a H4 Heading</h1>

Decoration

Headings can also be ‘decorated’ by adding the modifier class: is-decorated. By default the decoration is dark, but you can explicitly choose whether it is dark or light by using is-decorated--dark or is-decorated--light

This Is A Decorated Heading
And Subheading

Example markup:

<h3 class="is-decorated u-text-align--center"><span class="u-font-weight--bold">This Is A Decorated Heading</span><br>And Subheading</h3>

Block Elements

Paragraphs

This is an intro paragraph. Integer tempus, dolor vitae facilisis ornare, augue diam ultricies ligula, in tincidunt felis dolor cursus felis. Praesent finibus feugiat velit, a condimentum purus imperdiet eget.

intro-paragraph

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius mattis fringilla. Ut laoreet erat vitae facilisis convallis. Nam et molestie tortor. Phasellus in gravida justo. Mauris blandit at metus non pretium. Sed non mi nibh. Nam sit amet lorem finibus, efficitur turpis at, pulvinar ligula.

Integer tempus, dolor vitae facilisis ornare, augue diam ultricies ligula, in tincidunt felis dolor cursus felis. Praesent finibus feugiat velit, a condimentum purus imperdiet eget. Duis sodales convallis ex, id accumsan velit tristique id. Nullam sit amet blandit purus. Curabitur tincidunt et dui in dignissim.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius mattis fringilla. Ut laoreet erat vitae facilisis convallis. Nam et molestie tortor. Phasellus in gravida justo. Mauris blandit at metus non pretium.

Example markup:

<blockquote>Lorem ipsum dolor sit amet...</blockquote>

CSS Columns

Content placed into a single container can be spread across two or more columns using the o-cols class plus a count modifier, e.g. --2. Please note: The browser works out where to break the text, there is little to no control over it.

Lorem ipsum dolor sit amet, sit id denique accumsan consectetuer. Quaerendum signiferumque sit ne, ne per ancillae periculis. Laudem soluta nostrum vix at. Nec animal definitionem ad, vide impetus fastidii ne quo, ne dolores offendit maluisset pro. Nec porro pericula ad, eam prima nonumes consectetuer no. Iusto persius ea nam. Nemore eruditi sed no, ignota facilisi ne pri, et alia velit verterem eum. Te alii sonet omnium eam. An est ludus legere, pri id labore voluptatum. Usu virtute senserit at, an vis eros augue impedit. Has ut noster labitur singulis, mutat atqui atomorum eu mea.

Example markup:

<div class="o-cols--2">Lorem ipsum dolor sit amet...</div>

Text Elements

An a element example

A strong element example

An em element example

A strikethrough example

Lists

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
    3. List Item 3.3
  4. List Item 4

Unordered List

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Forms

Form Elements

Form Legend
This is a required field
Please enter your message here

Icons

Default Magento Icons

Theme Iconset

Example markup:

<div class="icon__misc-telephone-black"></div>

icon__arrow--down-black

icon__arrow--up-black

icon__arrow-chevron--down-black

icon__arrow-chevron--left-black

icon__arrow-chevron--right-black

icon__arrow-chevron--up-black

icon__info-error-black

icon__info-information-black

icon__info-quotemark--left-black

icon__info-secure-payment-black

icon__info-success-black

icon__info-tick-black

icon__info-warning-black

icon__misc-pendant-light-black

icon__misc-telephone-black

icon__misc-tick-badge-black

icon__shape-circle-black

icon__shape-dot-black

icon__shape-square-black

icon__shape-triangle--down-black

icon__shape-triangle--up-black

icon__social-facebook-black

icon__social-instagram-black

icon__social-pinterest-black

icon__social-twitter-black

icon__ui-basket-black

icon__ui-cross-black

icon__ui-heart-black

icon__ui-menu-black

icon__ui-minus-black

icon__ui-plus-black

icon__ui-search-black

icon__ui-share-black

icon__ui-user-black

Size Variants

Some icons are available in three sizes, large (default and optional), medium and small. Sizes are denoted by adding a size modifier class names e.g. icon--l, icon--m or icon--s:

Example markup:

<div class="icon__ui-menu-black icon--l"></div>

icon__ui-user-black icon--l

icon__ui-user-black icon--m

icon__ui-user-black icon--s

Colour Variants

Icons are available in three colours, black, grey, and white. Colours are denoted by adding a keyword to the end of the CSS class name, e.g. -black:

Example markup:

<div class="icon__ui-menu-black"></div>

icon__ui-user-black

icon__ui-user-grey

icon__ui-user-white

States

You can add a hover state to an icon by adding the class i--has-hover. You can modify the hover effect using one of two modifiers, i--has-hover--opacity and i--has-hover--zoom (if no modifier is added the effect will default to opacity).

icon__ui-menu-black i--has-hover--opacity

icon__ui-menu-black i--has-hover--zoom

Coloured Icons

Some icons are in multicolor and can not be modified.

Example markup:

<div class="icon__payment-amex"></div>

icon__payment-amex

icon__payment-maestro

icon__payment-mastercard

icon__payment-paypal

icon__payment-visa

icon__trustpilot-button

Aram Pattern Library | © GPMD Limited