Henn+Honeyball
Styleguide

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.

Typography

Heading 1 
<h1>Heading 1</h1>

Heading 1

Heading 2 
<h2>Heading 2</h2>

Heading 2

Heading 3 
<h3>Heading 3</h3>

Heading 3

Heading 4 
<h4>Heading 4</h4>

Heading 4

Heading 5 
<h5>Heading 5</h5>
Heading 5
Heading 6 
<h6>Heading 6</h6>
Heading 6
Paragraph 
<p>This is a paragraph. In euismod accumsan nec, adhuc salutatus disputationi 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.</p>

This is a paragraph. In euismod accumsan nec, adhuc salutatus disputationi 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.

Anchor 
<a>Link</a>
Link
Bold 
<b>Bold</b>
Bold
Emphasis 
<em>Emphasis</em>
Emphasis
Italic 
<i>Italic</i>
Italic
Strong 
<strong>Strong!</strong>
Strong!
Superscript 
137m<sup>2</sup>
137m2
Subscript 
H<sub>2</sub>O
H2O
Ordered list 
<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>
  1. List item
  2. List item
  3. List item
Unordered list 
<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
  • List item
  • List item
  • List item
Unordered list with plus 
<ul class="plus">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>
  • List item
  • List item
  • List item
Block quote 
<blockquote>This is a very quotable quote from a reputable person</blockquote><label class="quote-source">Reputable Person</label>
This is a very quotable quote from a reputable person
Horizontal rule 
<hr/>

Grid

Columns

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

Colours

Brand Colours

  • H+H Yellow 
    #fff450;
rgb(255, 244, 80);
  • H+H Black 
    #253a41;
rgb(37, 58, 65);

Neutral Colours

  • Dark Grey 
    #5b5b5b;
rgb(91, 91, 91));
  • Grey 
    #a0a0a0;
rgb(160, 160, 160);
  • Light Grey 
    #f4f4f4;
rgb(244, 244, 244);

Utility Colours

  • Warning 
    darkred
  • Caution 
    goldenrod
  • Success 
    darkgreen

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" />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-->
Styled checkboxes 
<ul class="input-list">
    <li><label for="checkbox-1"><input type="checkbox" id="checkbox-1" name="checkbox" />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-->
Styled 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>

Images

Avatars