International Refugee Rights
Initiative Website Styleguide

Grid

Here you can see the underlying grid structure for IRRI sites. At any point on this page you can click the “View Grid” button in the bottom right-hand corner to turn on a grid overlay. The site is built on a 12 column grid system, with a max width of 1140px. There is a 24px gutter between each column.

The baseline grid is set at intervals of 24px.

Columns

.bit-12
.bit-6
.bit-4
.bit-75
.bit-4
.bit-3
.bit-66
.bit-3
.bit-2
.bit-1

Typography

The typography on all IRRI sites is simple, accessible and focuses on readability over style. All type should adhere to the 24px baseline grid.

Heading 1

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Heading 2

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Heading 3

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Heading 4

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Heading 5

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Heading 6

This is a paragraph with emphasis, something written in bold, a link going nowhere. In euismod accumsan nec, adhucsuperior text salutatus disputationiinferior text at his, an nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Ordered list

  1. List item
  2. List item
  3. List item

Unordered list

  • List item
  • List item
  • List item

Blockquote

This is a very quotable quote from a reputable person

Horizontal rule



Colours

IRRI sites have three colour groups. International Refugee Rights Initiative's main colour is blue, Rights in Exile's main colour is red, and Citizenship Rights in Africa's main colour is green. Along with these differentiating colours the three sites share a common neutral pallete of black, white and three greys ranging from light to dark.

IRRI blue

RIE red

CRAI green

Dark grey

Mid grey

Light grey

Black

White

Background Colours

Blue Background
<div class="blue-bg padding-48"></div>
Red Background
<div class="red-bg padding-48"></div>
Green Background
<div class="green-bg padding-48"></div>
Black Background
<div class="black-bg padding-48"></div>
Dark Grey Background
<div class="dark-grey-bg padding-48"></div>
Mid Grey Background
<div class="mid-grey-bg padding-48"></div>
Light Grey Background
<div class="light-grey-bg padding-48"></div>

Type Colours

Blue Type
<h1 class="blue-type">Heading 1</h1>

This type is blue!

Red Type
<h1 class="red-type">Heading 1</h1>

This type is red!

Green Type
<h1 class="green-type">Heading 1</h1>

This type is green!

Dark Grey Type
<h1 class="dark-grey-type">Heading 1</h1>

This type is dark grey!

Mid Grey Type
<h1 class="mid-grey-type">Heading 1</h1>

This type is mid grey!


Forms and inputs

Fieldset and legend
<form>
    <fieldset>
        <legend>Legend Example</legend>
    </fieldset>
</form>
Legend Example
Selects
<div class="styled-select">
    <select name="countries">
        <option value="sudan">Sudan</option>
        <option value="angola" selected>Angola</option>
        <option value="zimbabwe">Zimbabwe</option>
        <option value="cameroon">Cameroon</option>
    </select>
</div>
Text area
<textarea name="message" rows="10" cols="30">An nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.</textarea>
Buttons
<button type="button" onclick="alert('Hello World!')">Click Me!</div><!--styled-select-->
Checkboxes
<ul class="input-list">
    <li><label for="checkbox-1"><input type="checkbox" id="checkbox-1" name="checkbox" checked />Checkbox 1</label></li>
    <li><label for="checkbox-2"><input type="checkbox" id="checkbox-2" name="checkbox" />Checkbox 2</label></li>
    <li><label for="checkbox-3"><input type="checkbox" id="checkbox-3" name="checkbox" />Checkbox 3</label></li>
</ul><!--input-list-->
Radio buttons
<ul class="input-list">
    <li><label for="radio-1"><input type="radio" id="radio-1" name="radio" checked />radio 1</label></li>
    <li><label for="radio-2"><input type="radio" id="radio-2" name="radio" />radio 2</label></li>
    <li><label for="radio-3"><input type="radio" id="radio-3" name="radio" />radio 3</label></li>
</ul><!--input-list-->
Single checkbox
<label for="single-checkbox"><input type="checkbox" id="single-checkbox" name="single checkbox" />I've read and understand the <a href="#" title="Terms and Conditions" alt="terms and conditions">terms and conditions</a></label>
Input email
<label for="email">Email Address <abbr title="Required">*</abbr></label>
<input id="email" class="input" type="email" placeholder="you@example.com" required/>
<small class="note">Note about this field</small>
Note about this field
Input password
<label for="password">Password <abbr title="Required">*</abbr></label>
<input id="password" class="input" type="password" placeholder="•••••••" required/>
<small class="note">Note about this field</small>
Note about this field
Input text
<label for="text">Text input <abbr title="Required">*</abbr></label>
<input id="text" class="input" type="text" placeholder="" required/>
<small class="note">Note about this field</small>
Note about this field
Input URL
<label for="url">Web address <abbr title="Required">*</abbr></label>
<input id="url" class="input" type="URL" placeholder="http://www.example.com" required/>
<small class="note">Note about this field</small>
Note about this field
Input combined
<span class="input-combined">
    <input id="search" class="input" type="text" placeholder="Text input"/>
    <input id="searh-submit" class="button" type="submit" value="Submit"/>
</span>
Datalist
<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

Tables

Table
Column 1 Column 1 Column 1
1 2 3
4 5 6
7 8 9

Messages

Negative
<div class="negative">
    <h4>Oh no!</h4>
</div><!--negative-->

Oh no!

Caution
<div class="caution">
    <h4>Be careful.</h4>
</div><!--caution-->

Be careful.

Positive
<div class="positive">
    <h4>Excellent!</h4>
</div><!--positive-->

Excellent!


Articles

Article
<article class="loop">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
</article>

Standard post with no featured image

Published: 19 Dec 2016

An nam doming causae. Nostrud phaedrum erroribus sea ei, stet unum accommodare ad mei. Nonumy complectitur id vis, nam amet mandamus concludaturque ex, epicuri invenire qui no. Vis apeirian conclusionemque an, stet prodesset sea no. Nec ex forensibus liberavisse, tation accommodare et est.

Article With Featured Image
<article class="loop-featured">
    <div class="featured-image" style="background-image: url('<?php echo $image_src[0]; ?>')">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
    <?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' ); ?>
    </div>
</article>
Article With Link
<article class="loop-featured light-grey-background">
    <div class="post-title">
        <h4>Nec ex forensibus liberavisse, tation accommodare et est</h4>
        <h6><?php echo _e('Published: '); the_time('j M Y'); ?></h6>
    </div>
    <?php $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' ); ?>
    <h2 class="dashicons dashicons-admin-links"></h2>
    </div>
</article>