HomeMenu

Style Guider Demo 0.1.0

This is the style-guider-demo CSS framework and style guide, built with Style Guider. The source code for this style guide can be found on GitHub.

This fictional style guide is designed to give a demonstration of the wide variety of components that Style Guider docs can display


Accessibility

Accessibility is the degree to which anyone can access and use a website using any web browsing technology. Royal National Institute of Blind People

Our public-facing applications must be built to work on all devices, browsers and with assistive technologies. A lot of effort has been made to ensure that the components in this framework are accessible. Such as:

  • Text and backgrounds have sufficient contrast ratios so text is legible.
  • Clickable elements are clear and uniform, so users know what they can click.
  • ARIA landmark roles and html5 elements help browsers define types of content.
  • Focus states on all elements so that interactions can be operated with a keyboard or screen reader.
  • Javascript features have a fallback for when javascript is not enabled.

This checklist from the A11Y Project is a good guide to all the core web accessibility principles.


Colours

There are a variety of colours to choose from for digital interfaces.

There are not pre-defined CSS classes for each colour, but they are available as SASS variables to use in your own extended styles.

Primary Colours

RedBlue

Secondary Colours

ClaretFlameCarrotButtercupSunglowMalibuBermudaJavaVerdunGrey

Typography

All text uses Helvetica Neue with a fallback to Helvetica or Arial. Body text is legible with generous line-spacing and the font-size adapts to the screen size to ensure readability. Paragraphs have a bottom margin to match a vertical rhythm.

Paragraphs also have a maximum width of about 700px, so that long lines don't become too difficult to read.

Headers use a lighter font-weight. They should be used in cascading order to denote the importance of a section's contents.

h1. This is a very large header

h2. This is a large header

h3. This is a medium header

h4. This is a moderate header

h5. This is a small header
h6. This is a tiny header

Bold Headers

Sometimes a bolder header might be required for more emphasis. This can be done by adding the .heavy class. If this option is used it should be done consistently throughout the application or website.

By inserting a small element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

h1. This is a very large header

h2. This is a large header

h3. This is a medium heade

h4. This is a moderate header

h5. This is a small header
h6. This is a tiny header

Sub Headers

By inserting a small element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

This is a medium header with a subheader


Text links should be intuitive, so that users know they can click or tap on them. Inline links are displayed in red with an underline on hover


Lists

Lists are useful for a collection of text items and can be numbered or nested too.

This is what an un-ordered list looks like:

  • A list item
  • Another list item
  • Another one
  • Ok, last one

A list following a paragraph has reduced spacing, so that a paragraph can give context to a list:

  1. A list item
  2. Another list item
  3. Another one
  4. Ok, last one

Definition Lists

A definition list <dl> is used to display name-value pairs, like FAQs. Each term <dt> is paired with one or more definitions <dd>.

A Definition Term
The definition, styled just like a paragraph, but with clever spacing between definitions.
Why should I use this style guide?
Because it looks good

Blockquote

Sometimes other people say nice things, and we may want to mention those things with a quote that clearly shows who said it. Use a <cite> tag for the byline.

I had a really good experience using this product.A. Customer

Dividers

Use <hr> dividers to define thematic breaks between paragraphs or other page elements


Forms

Forms are key in interacting with users and gleaning information from them. Forms must be intuitive and accessible to stop users getting frustrated and leaving before finishing.

Text Inputs

These input types create a single line text field: text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, and week

Using specific input types for different data formats can help improve usability. For example, using a tel input will open a numpad keyboard on mobile devices, making it easier for the user to input a phone number.

All form inputs should have a clear label, that describes what you want the user to enter. Clicking a label should focus on the form field. This is achieved by linking label elements to input elements with a for attribute.

Although popular in modern websites, inline placeholders should not be used because they disappear as soon as a user starts typing, and the user may think there is already text input. Instead an example or hint should be placed beneath the input.

A helper or example for this field
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Text Area

Text areas are used for multi-line text input, for example on a comments form. A text area can also be given a helper label. The text area should be given an appropriate amount of rows (with the rows attribute) for the text that is expected to be entered.

Some helper text
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Select Menu

Use select menus to combine many choices into one dropdown menu. This is useful for saving space, small screen devices have native UI patterns for dealing with these

More helpful advice for this fieldSome helpful advice for this field
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Checkboxes

Use groups of checkboxes when the user may select multiple choices from a list

Example Checkbox GroupSome helper text
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Radio Buttons

Use radio buttons when the user must select just one choice

My Radio optionsMore helpful advice for this field
Some helpful advice for this field
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

File Upload

File upload inputs are inconsistent across all browsers, so we use a label mask to display it like a button. When clicked it opens up the user's file browser

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Date Picker

Inputs with an attribute of data-datepicker can be made more user friendly with the jQuery-ui datepicker widget. The datepicker input element is one case where a placeholder is useful, to indicate that the input must be clicked to open the calendar.


Form Errors

User input needs to be validated to check for erroneous or malicious data. To improve usability, human-friendly error messages should be shown on invalid fields.

In-line validation (inline feedback as the user is filling out the form) is much more effective than post-submission feedback.

Error messages can be added to the DOM by javascript or into the source html server-side. A wrapper with class .has-error around an input and label denotes an error. A span with class .error-message should show the specific error.

Helper textThis field is too long

Error Callout

A callout should be included at the top of the form to indicate that there are errors after form submission. It should indicate which fields have errors to help the user amend them

There were some problems with your form

Example Field - Must be less than 30 characters

Another Field - Must be a specific type of data

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Required Fields

In some applications different input fields will be required or optional. For best usability, optional fields should be marked as optional (in the helper text), and required fields should be the default.


Disabled Fields

Some applications will need to show a field but not accept user input, or disable the submit button until all required fields are completed. The disabled attribute stops input and styles it to makes it clear that inputs can not be modified by the user.

You cannot edit this field

Buttons

Buttons are for users to trigger an actions, the text on the button should make it clear what the action will do. The colour of the button can also denote whether an action is constructive, destructive etc.

Buttons in a row are spaced apart so that a user won't press the wrong one by mistake.

Links or submit inputs can be styled as buttons with the .button class.

Create new order?

Cancel Create order

Button labels should be clear so that the user knows what action will happen when they click it. Constructive actions (Yes, Confirm, Save etc) should go on the right and be blue. Destructive actions (Delete etc) should be red. Back-tracking actions (Cancel, Undo, No) should be grey and on the left, and could be smaller.

Colour of buttons can be modified by adding a .alert or .secondary class. The size of buttons can be modified with .small, .tiny, .large and .expanded classes.

Basic ButtonAlert BtnSecondary Btn
A Small BtnAn even smaller buttonA large button
An expanded button

Submit Button

A mixin for inputs with a type of hidden has been included


Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Hidden Inputs

A mixin for inputs with a type of hidden has been included

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Custom UI Elements

Layout

There are 3 main layout components: Full-width, two-thirds and one-third. This .content column is two-thirds.

A .full element stretches across the width of the screen.

On small screens all three if of these components are full-width and stack on top of each other

Helper layout classes

.half, .third, .quarter and .sixth are available for quick column width setting.

Custom column layouts

Columns should be implemented using Foundation's sass mixins - see more details here. There is also a useful grid-columns mixin in `scss/_mixins.scss`, see the documentation on that for more info


Tables

Tables are used for showing tabular data. A few simple style tweaks make tables much easier to read. Adding a class of .hover makes rows highlight on hover.

Adding a class of .stack to a table makes it stack up on small screens for a cleaner layout.

Table HeaderAnother Table HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereA Button
Content Goes HereThis is longer Content Donec id elit non mi porta gravida at eget metus.Content Goes Here
Content Goes HereThis is longer Content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here

Main Menu

On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation.

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Hero Image

A hero image can sit beneath the menu and spans the full width of the screen.

Using a class of .slim squeezes the image to take up less vertical space. This is more appropriate for non-home pages.

Using a class of .outline adds an oval cutout overlay to the image. Be sure to test any images on all screen sizes to make sure important focal points are not cropped

A hero image
Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Alert Message

Alert messages can be displayed above or below the menu & hero for urgent messages to catch the user's attention.

Alert messages can be made dismissable by adding a .close span.

We’re recruiting! Click here to discover our fantastic career opportunities and start your journey today

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

The submenu component can be used to help users navigate between pages or screens within the current section.

Active menu items (the page the user is currently on) should be given the .active class to highlight them

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

An eye-catching navigation with big icons can be used for directing users to the most common pages and actions of a website or application.

The links on the menu should be consistent throughout the application to help users learn the pattern.

Varying number of links

The default amount of links in the quick link bar should be 5. If you need to have 4 or 6 link the classes .four and .six should be used to neatly arrange the spacing.

Icons

Icons are added to links with a class, the 5 icons shown here are using .tablet, .van, .map, .box and .laptop. To add new icons you will need to define the background-image: url() with your own class

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Floating Card

Floating cards can be useful for displaying single or repeating modules on a page, such as tweets or news stories. Cards fill the horizontal space they are in and stretch vertically to contain the content.

Cards can contain a <time> or a <span class="meta"> element, a header, paragraphs and link. If the card has a link, the header and time should also be linked.

Cards with a class of .flat will have a grey background. Cards with a class of .shadow will have a shadow effect.

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

On applications with multi-level navigation, breadcrumbs can be used to indicate which section the user is in, and help them navigate back up navigation.

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Pagination

When there is too much content for one page, we should make it easy for users to browse, skim or skip between pages. On small screens only the next and previous buttons are shown.

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Tabs

To save on-screen space we can use tabbed content to alternate between views within the same context, whilst staying on the same page.

This is tab 1

Some tab content

This is tab 2

Some tab content

This is tab 3

Some tab content

This is tab 4

Some tab content

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

Progress Bar

A progress bar can be used to give an indication to users of how far through their wait they are. The <progress> element is used and the progress is set with the value and max attributes. The percentage can be shown in-line by adding the .show-percent class.


Login Screen

The login screen can be used inline (within another page) or floated alone on a full page.

Users should be allowed to log in with their email address. If this is not technically possible, a link to instructions on how to find their username/user id etc should be provided underneath the relevant field.

No mixin / sample code is provided for this element because there are too many variables. Check the docs.pug source code for this example.


Closeable Elements

Sometimes elements need to be closeable by the user. The helper class .closeable can be combined with a <span class="close">Close</span> element to add a close button to any element. The styles for this are an attempt at one-size fits all so they may need to be tweaked for each use case.


Banner callouts can be useful for displaying a quick eye-catching message. A logo can be included with the .logo class or the text can be centred with a .center class.

Show Code and Live Preview

Pug Mixin

Parameters
Block content
Mixin Call
HTML Output
Live Preview

The footer sits at the bottom of the screen and can contain 3 horizontal sections. It can be used for re-iterating navigation or adding extra information and links.

No mixin / sample code is provided for this element because there are too many variables. Check the docs.pug source code for this example.