News Item Title
Don't forget, you can stay updated with all our latest news by visiting our website!
Read more...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 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:
This checklist from the A11Y Project is a good guide to all the core web accessibility principles.
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.
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.
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.
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.
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 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 following a paragraph has reduced spacing, so that a paragraph can give context to a list:
A definition list <dl>
is used to display name-value pairs, like FAQs. Each term <dt>
is paired with one or more definitions <dd>
.
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
Use <hr>
dividers to define thematic breaks between paragraphs or other page elements
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.
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.
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.
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
Use groups of checkboxes when the user may select multiple choices from a list
Use radio buttons when the user must select just one choice
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
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.
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.
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
Example Field - Must be less than 30 characters
Another Field - Must be a specific type of data
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.
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.
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.
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.
A mixin for inputs with a type of hidden
has been included
A mixin for inputs with a type of hidden
has been included
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
.half
, .third
, .quarter
and .sixth
are available for quick column width setting.
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 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 Header | Another 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 | A Button |
Content Goes Here | This is longer Content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | |
Content Goes Here | This is longer Content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
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.
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
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.
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
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.
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 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
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.
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.
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.
To save on-screen space we can use tabbed content to alternate between views within the same context, whilst staying on the same page.
Some tab content
Some tab content
Some tab content
Some tab content
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.
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.
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.
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.