Frontend Styleguide

Colors (View Code)

    <ul class="sg-colors">
  <li class="sg-color">
    <div class="sg-swatch color-brand-primary"></div>
    
    <div class="sg-label">$brand-primary <span class="sg-hex">#0077C0</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-brand-secondary"></div>
    
    <div class="sg-label">$brand-secondary <span class="sg-hex">#961D78</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-brand-theme"></div>
    
    <div class="sg-label">$brand-theme <span class="sg-hex js-brand-theme"></span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-white"></div>
    
    <div class="sg-label">$white <span class="sg-hex">#ffffff</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-ghost-gray"></div>
    
    <div class="sg-label">$ghost-gray <span class="sg-hex">#f1f3f1</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-geyser"></div>
    
    <div class="sg-label">$geyser <span class="sg-hex">#dbe1e3</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-manatee"></div>
    
    <div class="sg-label">$manatee <span class="sg-hex">#9299A5</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-mine-shaft"></div>
    
    <div class="sg-label">$mine-shaft <span class="sg-hex">#353535</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-black"></div>
    
    <div class="sg-label">$black <span class="sg-hex">#000000</span></div>
  </li>
<li class="sg-color">
  <div class="sg-swatch color-fail"></div>
  <div class="sg-label">$fail <span class="sg-hex">#FF0000</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-success"></div>
  <div class="sg-label">$success <span class="sg-hex">#80AB25</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-highlight"></div>
  <div class="sg-label">$highlight <span class="sg-hex">#FFBF47</span></div>
</li>
</ul>

Our main color palette.

Fonts (View Code)

    <p>Primary font: "Arial", "Tahoma", sans-serif;</p>
<p><em>Primary font italic: "Arial", "Tahoma", sans-serif;</em></p>
<p><strong>Primary font bold: "Arial", "Tahoma", sans-serif;</strong></p>
<p>Secondary font: "Arial", "Tahoma", sans-serif;</p>

The main font stack.

Primary font: "Arial", "Tahoma", sans-serif;

Primary font italic: "Arial", "Tahoma", sans-serif;

Primary font bold: "Arial", "Tahoma", sans-serif;

Secondary font: "Arial", "Tahoma", sans-serif;

Headings (View Code)

    <h1 class="ncc-section-title">Northamptonshire County Council</h1>
<h1>Northamptonshire County Council</h1>
<h2>Northamptonshire County Council</h2>
<h3>Northamptonshire County Council</h3>
<h4>Northamptonshire County Council</h4>
<h5>Northamptonshire County Council</h5>
<h6>Northamptonshire County Council</h6>

Northamptonshire County Council

Northamptonshire County Council

Northamptonshire County Council

Northamptonshire County Council

Northamptonshire County Council

Northamptonshire County Council
Northamptonshire County Council

Paragraph (View Code)

    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, <a href="#link" title="A link example">paragraphs are usually an expected</a> part of formal writing, used to organize longer prose.</p>

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Heading Classes (View Code)

    <h6 class="h1">Northamptonshire</h6>
<h1 class="h2">Northamptonshire</h1>
<h2 class="h3">Northamptonshire</h2>
<h3 class="h4">Northamptonshire</h3>
<h4 class="h5">Northamptonshire</h4>
<h5 class="h6">Northamptonshire</h5>

You can also use class names to style headings. This should only be used to keep markup consistent with content.

Northamptonshire

Northamptonshire

Northamptonshire

Northamptonshire

Northamptonshire

Northamptonshire

Intro Text (View Code)

    <p class="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

Paragraph (View Code)

    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, <a href="#link" title="A link example">paragraphs are usually an expected</a> part of formal writing, used to organize longer prose.</p>

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Small Text (View Code)

    <div class="small-text">Look how meta we are!</div>

Small text useful for other things users need to know.

Look how meta we are!

Blockquote (View Code)

    <blockquote>
  <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Callout (View Code)

    <div class="callout">
<p>You may need the following information before you pay online: National Insurance Number (NINO) or your payroll number.</p>
</div>

You can use any combination of headings, but they should be in order.

You may need the following information before you pay online: National Insurance Number (NINO) or your payroll number.

Address (View Code)

    <div class="vcard">
  <div class="org">Northamptonshire County Council</div>
  <div class="adr">
    <div class="street-address">John Dryden House</div>
    <span class="locality">The Lakes, Northampton</span>
    <span class="postal-code">NN4 7YD</span>,
    <abbr class="region" title="United Kingdom">UK</abbr>
  </div>
  <div class="tel">0300 126 1111</div>
</div>

Vcard markup

Northamptonshire County Council
John Dryden House
The Lakes, Northampton NN4 7YD, UK
0300 126 1111

Accessibility (View Code)

    <span class="accessible"> Opens in new window</span>

An off-viewport notice for links that open in a new window, you can't see it but that's kind of the point.

Opens in new window

Time (View Code)

    <time datetime="2016-08-10T07:28:15+00:00">2 weeks ago</time>

Accessibility (View Code)

    <span class="accessible"> Opens in new window</span>

An off-viewport notice for links that open in a new window, you can't see it but that's kind of the point.

Opens in new window

Citation (View Code)

    <p><cite>Northamptonshire County Council</cite>, </p>

A way of describing the reference for another element

Northamptonshire County Council,

Definition (View Code)

    <p>A <dfn>kernel</dfn> is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.</p>

Define a term

A kernel is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.

Horizontal Rule (View Code)

    <hr>

Ordered List (View Code)

    <ol>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ol>

  1. Link 1
  2. Link 2
  3. Link 3
  4. Link 4
  5. Link 5

Unordered List (View Code)

    <ul>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Unordered List (No Bullets) (View Code)

    <ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

Inline List (View Code)

    <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

Definition List (View Code)

    <dl>
  <dt>The word</dt>
  <dd>The definition</dd>
</dl>

The word
The definition

Text Filter (View Code)

    <div>
  <form>
    <input class="filter" type="text" placeholder="Filter results...">
  </form>
  <ul class="list">
    <li>List item with a much longer description or more content.</li>
    <li>List item</li>
    <li>List item
      <ul>
        <li>Nested List Item</li>
        <li>Nested List Item</li>
        <li>Nested List Item</li>
      </ul>
    </li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
  </ul>

</div>

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Text Input (View Code)

    <p>
  <label for="text">Text Input <abbr title="Required">*</abbr></label>
  <input id="text" type="text" placeholder="Text Input">
</p>

Valid Input (View Code)

    <label  class="valid">Valid</label>
<input  class="is-valid" type="text" placeholder="Text Input">

Error Text Field (View Code)

    <p>
  <label class="error">This is what happens when you do it wrong</label>
  <input class="is-error" type="text" placeholder="Text Input">
</p>

Password Input (View Code)

    <p>
  <label for="password">Password</label>
  <input id="password" type="password" placeholder="Type your Password">
</p>

Number Input (View Code)

    <p>
  <label for="number">Number Input <abbr title="Required">*</abbr></label>
  <input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</p>

Web Address (View Code)

    <p>
  <label for="webaddress">Web Address</label>
  <input id="webaddress" type="url" placeholder="http://yoursite.com">
</p>

Select Menu (View Code)

    <label for="select">Select</label>
  <select id="select">
    <optgroup label="Option Group">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </optgroup>
</select>

Checkboxes (View Code)

    <form action="#">
  <fieldset>
    <legend>Checkbox <abbr title="Required">*</abbr></legend>
    <ul>
      <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
      <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
      <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>
  </fieldset>
</form>

Checkbox *

Radio Buttons (View Code)

    <form action="#">
  <fieldset>
    <legend>Radio</legend>
    <ul>
      <li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
      <li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
      <li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
    </ul>
  </fieldset>
</form>

Radio

Textarea (View Code)

    <p>
  <label for="textarea">Textarea</label>
  <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>

Buttons (View Code)

    <button>Button</button>
<button class="button--secondary">Button Secondary</button>
<button class="button--alt">Button Themed</button>
<button>Disabled Button</button>

Button with Description (View Code)

    <a href="#" class="button">Start Now</a>
<p class="small-text">On the public sector jobs website</p>

Primarily for "Start Now" buttons on Service Pages

Start Now

On the public sector jobs website

Task Button (View Code)

    <a href="#" class="button--task">Complete the form</a>

Primarily for "Starting a task" actions

Complete the form

Landscape Image (View Code)

    <img src="/images/image-placeholder-3-2.png" alt="image placeholder 3 to 2 ratio">

image placeholder 3 to 2 ratio

Light Logo (View Code)

    <a class="logo" href="/"><img src="/images/ncc-logo.png" class="no-scale" alt="Northamptonshire County Council"></a>

Breadcrumbs (View Code)

    <div class="row">
  <div class="breadcrumbs">
    <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Grandparent</a></li>
      <li><a href="#">Parent</a></li>
      <li>Child</li>
    </ul>
  </div>
</div>

Table (View Code)

    <table class="table-info" role="grid" summary="A description of the table should go here for screenreaders.">
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="150" class="number">Table Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td class="align-right">£12.00</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td class="number">£24.00</td>
    </tr>
    <tr>
      <td>Content Goes Here</td>
      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
      <td>Content Goes Here</td>
      <td class="number">£48.00</td>
    </tr>
  </tbody>
</table>

Accessible tables, ftw!

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here £12.00
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here £24.00
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here £48.00

Information Message (View Code)

    <div class="site-message--info">
    <strong>Interesting, </strong> something happened and it was possibly worth noting
</div>

Usually an information alert

Interesting, something happened and it was possibly worth noting

Success Message (View Code)

    <div class="site-message--success">
    <strong>Success!</strong> You did a thing brilliantly.
</div>

Usually a positive action related alert

Success! You did a thing brilliantly.

Fail Message (View Code)

    <div class="site-message--fail">
    <strong>Oh no!</strong> Something went wrong. <a href="#">More information</a>
</div>

Usually a negative action related alert

Oh no! Something went wrong. More information

Site-Wide Alert (View Code)

    <div class="site-wide-alert">
    <div class="site-wide-alert__header">
      <h2 class="site-wide-alert__title">Social Care System advisory</h2>
        <div class="site-wide-alert__time"><strong>from</strong> <time datetime="2015-01-05T+06:00">05/01/2015 06:00pm</time> <strong>to</strong> <time datetime="2015-01-08T+02:00">08/01/2015 02:00</time>pm</div>
      </div>
        <div class="site-wide-alert__detail">
          <strong>System offline: </strong>The social care systems at NCC are due to be offline for maintanence.
        </div>
</div>

Usually a system related alert

Social Care System advisory

from to pm
System offline: The social care systems at NCC are due to be offline for maintanence.

Page Title (View Code)

    <title>LGSS Patterns | lgss.co.uk</title>

The title tag should be in the following format - Page Title | website url

LGSS Patterns | lgss.co.uk

Standard Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/ncc-logo.png" class="no-scale" alt="Northamptonshire County Council"></a>

    </div>
    <!--<div class="site-search">
      <form class="search">
 	<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>

    </div>-->
  </div>
</header>
<!-- End .header -->

Light Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header--light">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/ncc-logo.png" class="no-scale" alt="Northamptonshire County Council"></a>

    </div>
    <!--<div class="site-search">
      <form class="search">
 	<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>

    </div>-->
  </div>
</header>
<!-- End .header -->

Dark Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header--dark">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/ncc-logo.png" class="no-scale" alt="Northamptonshire County Council"></a>

    </div>
    <!--<div class="site-search">
      <form class="search">
 	<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>

    </div>-->
  </div>
</header>
<!-- End .header -->

Theme Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header--theme">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/ncc-logo.png" class="no-scale" alt="Northamptonshire County Council"></a>

    </div>
    <!--<div class="site-search">
      <form class="search">
 	<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>

    </div>-->
  </div>
</header>
<!-- End .header -->

Full Width-Layout (View Code)

      <div class="row g example">
    <div class="g-column"></div>
  </div>

A single column for full page use

Two-Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-one-half"></div>
  <div class="g-column g-one-half"></div>
</div>

Two column grid

Three Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-one-third"></div>
  <div class="g-column g-one-third"></div>
  <div class="g-column g-one-third"></div>
</div>

Three column grid

Two-thirds Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-two-thirds"></div>
  <div class="g-column g-one-third"></div>
</div>

Two thirds column grid

Quarter Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-one-quarter"></div>
  <div class="g-column g-three-quarters"></div>
</div>

Quarter column grid

Email Template (View Code)

    <!-- add email code here -->

Panel (View Code)

    <div class="panel"><p>Anything wrong with this page? <a href="#">Let us know</a>.</p></div>

Anything wrong with this page? Let us know.

Sidebar and related content (View Code)

    <div class="sidebar" role="complementary">
	<div class="block--guide">
    	<h3 class="block__title">Back to</h3>
    	<ol>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    	</ol>
	</div>
	<div class="block">
    	<h3 class="block__title">In this section</h3>
    	<ul>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    	</ul>
	</div>
	<div class="block">
    	<h3 class="block__title">In another section</h3>
    	<ul>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    		<li class="active"><a href="#" title="link">Current link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    	</ul>
	</div>
</div>