Welcome to the O.K. Sites pattern library.

This pattern library is a brand new, bespoke catalogue of design components suitable for use within the O.K. sites range of websites.

By applying the ok-stylesheet, the components that appear in this document can be directly copied into your new page.

Click the links below to download the required folder of images and the ok-stylesheet, then simply copy the CSS link into your page's HTML header.

Folder of images
<link rel="stylesheet" type="text/css" href="ok-stylesheet.css">

Table of Contents

1. Navbar
2. Header
3. Jumbotron
4.1 Button 1 - Home
4.2 Button 2 - Logo
4.3 Button 3 - Return to Top
4.4 Button 4 - Next
4.4 Button 5 - Back
4.5 Button 6 - Submit
4.6 Button 7 - Forms
5. Search Bar
6. Footer

3. Jumbotron

Appearance

Jumbotron Heading

Jumbotron text

Description

This jumbotron is used to catch the users attention, with the content intended to be that which is likely to spark interest. The size will adjust automatically depenind on how much content is within the jumbotron.

HTML

<div class="ok-jumbotron">
    <h3>Jumbotron Heading</h3>
    <p>Jumbotron text</p>
</div>

4.1 Button 1 - Home

Appearance

Return home

Description

This button allows the user to quickly navigate back to the index/homepage. It has a no background colouring to ensure it is able to seamlessly blend into the navigation bar, where it is to be predominantly placed.

HTML

<div class="ok-button-home">
    <a href="index.html"><img src="img/ok-button-home.png"></a>
</div>

4.2 Button 2 - Logo

Appearance

Description

Either of these logos are the official image used to represent the O.K. Sites brand across all forms of media. The variation in colours allow for it to be placed against different colour schemes. The image is also to be used as a button when applied as hypermedia, reverting the user to the website when clicked.

HTML

The Light Variant

<div class="ok-button-logo">
    <a href="index.html"><img src="img/ok-button-logo-light.png"></a>
</div>

The Dark Variant

<div class="ok-button-logo">
    <a href="index.html"><img src="img/ok-button-logo-dark.png"></a>
</div>

4.3 Button 3 - Return to Top

Appearance

Return to the Top

Description

This button has been designed to allow users to return to the top of a page without the need to scroll up manually or refresh the page. The area it returns to is to be changed within the HTML relative to the page it page it occupies.

HTML

<div class="ok-button-rtt">
    <a href="#contents"><img src="img/ok-button-rtt.png"></a>
</div>

4.4 Button 4 - Next

Appearance

Next

Description

Where necessary, this button will allow the user to skip through content or onto the next page. It shares the same design as the RtT button in order to provide a level of consistency within the site(s).

HTML

<div class="ok-button-next">
    <a href="nextpage.html"><img src="img/ok-button-next.png"></a>
</div>

4.5 Button 5 - Back

Appearance

Back

Description

The Back button also shares a familiar design, however it has been designed to return the user to their previous page.

HTML

<div class="ok-button-back">
    <a href="javascript:history.go(-1)"><img src="img/ok-button-back.png"></a>
</div>

4.6 Button 6 - Submit

Appearance

Submit

Description

Where a form exists, this button should be deployed in order to submit the information to the relevant script/database.

HTML

<div class="ok-button-submit">
    <a href="index.html"><img src="img/ok-button-submit.png"></a>
</div>

4.7 Button 7 - Search

Appearance

Search button

Description

Much like the submit button, where a form is used in order to provide search functionality, this button must be used to facilitate the search.

HTML

<div class="input-group" id="keyword-box">
    <input type="text"/><a href="searchresults.html"><img src="img/ok-button-search.png"></a></span>
</div>

5. Form Bar

Appearance

Description

This generic form is the default template for all kinds of forms used throughout the sites. It is to be used for contact, searching and all other forms of data capture.

HTML

<div class="ok-form-generic">
    <input class="ok-form-input" type="text" name="ok-form-generic" placeholder="Placeholder"/>
</div>