Standard Reusable Styles

Sizing Text

The standard small, smaller, large and larger classes can be used to adjust the size of text. E.g. to display something slightly smaller, such as breadcrumb menu, aside links etc.

small (and smaller)

Example:

Some small example text

Code:


<small>Some example text</small>
<div class="small">Some example text</div>
<p class="small">Some exampe text</p>


large (and larger)

Example:

Some large example text

Code:


<large>Some example text</large>
<div class="large">Some example text</div>
<p class="large">Some exampe text</p>


desktop-large

A class that does the same as large above, but on desktop only, i.e. enlarges the text on desktop but not mobile.

Spacing Things

The ‘wrapper’ class can be used to add spacing below various elements and divs. By using the same class across all sites, margins/spacing are kept at a consistent size across the board.

Example:

Code:


<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis posuere dui, ut viverra nisl sollicitudin non.</div>
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis posuere dui, ut viverra nisl sollicitudin non.</div>


Quotes

Quotations use the standard blockquote and cite tags. Citation is completely optional.

Example:

The event was informative and inspirational and allowed the students to find out more about what it takes to make a success of running their own business.
Ms O’Donnell, Head of Careers

To center a quote simply add the ‘center’ class to the blockquote. The use of this will depend on layout and it may not play nice on a page with lots of floated elements.

The event was informative and inspirational and allowed the students to find out more about what it takes to make a success of running their own business.
Ms O’Donnell, Head of Careers

Code:


<blockquote>
The event was informative and inspirational and allowed the students to find out more about what it takes to make a success of running their own business.
<cite>Ms O’Donnell, Head of Careers</cite>
</blockquote>


<blockquote class="center">
The event was informative and inspirational and allowed the students to find out more about what it takes to make a success of running their own business.
<cite>Ms O’Donnell, Head of Careers</cite>
</blockquote>


Effects

• shadow

  Add a simple shadow to images, user interface blocks etc

• hoverable

• trans-opac

  Used in conjunction with hoverable. Creates a transitional opacity hover effect. Ideal styling for things like image links. Note: if using with image links these classes are best added to the image rather than the link for cross-browser compatibility (the effect will be a little jolty on some older browsers otherwise)

  

  hoverable trans-opac example

• trans-color (used in conjunction with hoverable)
  Used in conjunction with hoverable. Creates a colour transitional effect on hover. Nice styling for main menus / home logo links etc. Shouldn’t be overused.

Inbuilt WordPress Styles

Self explanatory positional classes. alignright is the most frequently used of these, to position article images, lists, secondary content etc to th right of the main body of content.

• alignright

• alignleft

• aligncenter

Mobile Specific

• full-width-mobile

• flex ordering

Buttons

• ghost

  More news

  
<div class="ghost-btn">
<a href="/news">More news</a>
</div>


• standard

  More news
  
<button type="button">More news</button>