Introduction

This page contains all neccessary elements for startup of a Frontend project including Frontend Process, Guidelines, Page links, Module Handover and Style Guide. All elements should be updated on a project to project basis.

Please fill in details below when starting project:-

  • Project Title: Postillion
  • Developers: Michael Hanton
  • Development start date: 30/03/2016

The CSS setup is influenced by frameworks like Basscss and Solid, it is founded based on atomic design. Basic utilities, buttons, forms, typography ..ect, and components are available to help new projects set up quickly. They are the building blocks for modules. Again the CSS set up here will change for projects but the structure laid out should stay the same.

Release Notes

Any changes made to this grunt template, either CSS, HTML or content related, please note in release note giving date and list of changes

1.0.1Update to Guidelines

13/01/2016

  • Updates to Guidelines section. New/updated sub-sections: File Naming Conventions, CSS Naming Conventions ,Images, Frontend Testing.

1.0First Release

21/01/2016 - Michael Keane

  • First release of grunt template

Process

The following is the approach the frontend developer will take on the project. It will be detailed during scoping of project with the Head of Frontend and any updates will be noted here.

Responsive

  • The project will be developed using the latest scripts (i.e. latest JQuery 1.11)
  • The RWD framework is only one view, there isn't different content injected for different devices.
  • Page speed will be based on the below framework/coding/SEO/Accessibility choices as well as the 3rd party or web services
  • Styles will be based on a style guide complete in design. There should not be bespoke elements for a single section. Elements should be usable in all areas.
  • We will be using a modular approach to maintain consistency and to aid further deployment. (i.e. If a font size is changed in one place it will change everywhere)

Framework

  • The project will be developed using a CSS framework. It will be Foundation.
  • The framework will not allow for different grids on a per section basis . Therefore PSD designs need to follow the framework schema.
  • Stacking is handled by the framework
    • Possible stacking for each can be seen in the Foundation Grid
    • It is not possible to break how the stacking is handled without effecting performance (page speed, seo, accessibility).
    • It is not possible to move elements from the bottom of the page to the top without having duplicate code (Bad process, will affect performance(page speed, seo, accessibility))

Coding

  • Each project will use HTML5, CSS3 and modern jQuery techniques.
  • The project will be built for modern browsers and devices. IE10 and older IE browser versions will not be supported in this project.
  • BAT testing will be carried out modern devices via in studio and virtual machines. We will test against latest versions of IE, Firefox, Safari and Chrome, IOS and Android.
  • We will be compiling code using Grunt.js meaning it is critical to have a single repository. This will be on SVN.
  • Responsive elements such as tables and images will need defined structure and classes (i.e. there won't be the abiliy to insert existing content into these)

Imagery

  • PNG images will be used throughout.
  • SVG images will be used for icons, with fallback PNGs.
  • Before handover to backend all images will be run through an image compression software - PNG Gauntlet.
  • Images within content that would generally be content managed will be down to the CMS/user.

SEO

SEO will be taking on project to project basis and an approach will need to be decided at beginning of the project with all involved. SEO will be based on design, frontend development, backend development, content and CMS. Frontend developers should push basic best practises.

  • Ensure robots.txt file is handed over to backend developer.
  • Make page titles tag content editable.
  • Make meta data content editable.
  • H1 on each page, H2 to H6 if necessary ensure canonical.
  • Make alt tags for images content editable.
  • Add structured data mark-up where appropriate.

Accessibility

The role of accessibility in a case will be taking on project to project basis. However in all projects developers should push best practise and be encouraged to do the following:-

  1. Use of title and alternative text.
    Frontend developers must promote the use of descriptive alt text and title attribute. These elements should be made content editable, however in cases where not the developers must add them.
  2. Use of ARIA landmarks.
    Aria landmarks identify significant page areas, giving them meaning and making them more keyboard navigable. There are several available landmark types, but simply adding 3 of them – main, navigation, and search – can greatly enhance the accessibility of your page. For example role="navigation" is used on the primary navigation, this helps assistive technologies to highlight the correct content for the user.
  3. Enhance Focus Indicators.
    Sighted keyboard users generally navigate through the links and form fields on a web page using the Tab and Shift+Tab keys on the keyboard. To help ensure they can visually identify which link or form field they have navigated to, you can add the following to your CSS file:-
    a:focus { outline:1px solid red; background:yellow; }
    The colors may need to be customized to fit your site design, but they should be fairly distinctive. In each each instance of a:hover in the CSS change to a:hover, a:focus.
  4. Identify Required Form Fields.
    If a form has a mix of required and non-required form fields, add the aria-required="true" attribute to each input that is required. This will identify them as required to screen reader users.
    <input type="text" name="username" aria-required="true">
  5. Make the Page Title an <h1>.
    The page title (not to be confused with the<title> element, though this should be brief and descriptive of the page content) is generally the big, bold text typically at the beginning of the main content that describes the content or functionality of that page. While a good heading structure for your entire document is great for accessibility, simply making your main page title an <h1> will facilitate page navigation and comprehension.
  6. Identify Table Headers.
    If the site has data tables, you can make them much more accessible by marking up table header cells appropriately. Find the row and/or column headers (almost always the cells in the first row and first column) and make sure they are marked up using the <th> element (stands for table header) instead of the <td> element (stands for table data). The <th> element should be given a scope attribute value of col if it’s a column header or row if it’s a row header.Change <td>Date</td> to <th scope="col">Date</th>
  7. Identify Table Captions.
    Most data tables have short descriptive text immediately before the data table that describes that table. You can associate that description or table caption to the table itself using the <caption> element. This element should be the first thing inside your <table> tag. For example, you would change <p>Class Schedule</p> <table><tr>....
    to <table> <caption>Class Schedule</caption> <tr>....
  8. Avoid “click here”.
    Search your site for the words “click here”. This link text is ambiguous for all users, but is particularly difficult for screen reader users. It always adds additional, unnecessary text. Change the link text to be more descriptive of the content or function of the link.For example, you would change <a href="prices.htm">Click here</a> for prices
    to <a href="prices.htm">Prices</a>
  9. Remove tabindex.
    Search your site’s code for any tabindex attributes. If the attribute value is 1 or higher, and you’re not absolutely sure why it was added or that it was added correctly, remove this attribute. Tabindex specifies a keyboard navigation order, but almost always causes more accessibility issues than it solves. If your navigation order is not logical (you can test this by navigating with the Tab key), you should restructure your underlying code so that it is logical.
  10. Check Your Page in WAVE
    The Wave Chrome Extention is a useful tool to check for your page build for potential accessibility issues.

Guidelines

The below are guidelines for developers working on this project. Update on a project to project basis.

SVN

Please follow the following steps when commiting a change to the SVN:

  1. Update SVN
  2. Detailed comments of changes
  3. Commit

Inline Styles

Refrain from inline styles and inline JS please :)

Breakpoint

The following breakpoints are used for this project

  • mobile: 320px
  • tablet: 768px
  • desktop: 970px

Comments

Please follow the following comment guides. Please keep all lowercase

  • HTML
    <!-- comment goes here -->

  • SCSS
    /*-- comment goes here --*/
    Please comment each new scss file at the top to explain usage. Follow existing format

  • JS
    // comment goes here

File Naming Conventions

For each new module HTML and SCSS need to follow the same naming convention:

  • m1-module-name.html
  • m1-module-name.scss
  • The main class wrapper for each module should be .m1-module-name. Each class in the scss module should fall under .m1-module-name class

Any JS class/id should follow:

  • js-class-name

CSS Naming Conventions

BEM – meaning block, element, modifier – is a front-end CSS naming methodology used in this project. The naming convention follows this pattern:

  • .block {}
  • .block__element {}
  • .block--modifier {}

.block represents the higher level of an abstraction or component.

.block__element represents a descendent of .block that helps form .block as a whole.

.block__element represents a different state or version of .block.

For more information see the BEM site. Try to follow BEM as much as possible to keep code constant.

Images

  • Please use either the following reference in CSS/JS: src="images/foldername/image.png” or src="../images/foldername/image.png”.
  • Make all images PNG.
  • Make all icons SVG.
  • Make alt =”placeholder text” where will be content editable. Likewise for title elements.
  • Make clear when images are placeholders by using clear naming convention - placeholder-banner.png”
  • Avoid -- in naming convention for images as it doesn't work within CMS.

Frontend Testing

Frontend testing must be carried out on following browser/devices:

  • Firefox - latest
  • Chrome - latest
  • Safari - latest
  • IE - 10+
  • Android - latest
  • IOS - latest iPad/iPhone
  • Windows Phone - latest

If access is not available to devices then testing can be carried out on BrowserStack.

Module Handover

Developers need to update the text '/cms-location/' in the the Gruntfile.js with the image location of the CMS being used so that the all CSS and JS references to images in the cms-export folder is correct.

Outline below instructions for developers on intigrating modules in CMS and there upkeep. See example outlined below:

Overview

Any HTML code being used for CMS intigration must come from the source folder only - source\html

Within the source of HTML pages you will find links to specific HTML references modules located in the lightboxes and includes folder.

Update your SVN and run grunt.

Any files/resources added to CMS are to be taken form the ‘cms-export’ which is built when grunt is run. It should include the following:-

  • All CSS for CMS
  • All JS for CMS
  • All Webfonts for CMS

All required files for templates will be found in each individual HTML file (named as per UI spec) via modules.

Frontend Dev will provide link to images need to be added to the galleries. These images will need to be run through PNG gauntlet or preferred image compiler. Note - Most images used during frontend build are placeholders only and should be updated by content with appropriate naming conventions.

  • source/resources/images/example.png
  • source/resources/images/example.png

All Alt and Title attributes need to be updated on content migration. Placeholder text put in place in frontend templates

Page-Setup Modules

Location - source\html\includes\page-setup

doctype.html
Doctype at beginning of each page. Contains CSS conditional comments. Will be consistent throughout each page on website.
head-scripts.html
Contains JavaScript files that are used globally throughout the site. jquery.min.js and global.min.js are included.Will be consistent throughout each page on website.
meta-header.html
Contains the meta tags for pages. Meta tags vary page to page need to be made contenteditable - meta description and keywords, as well as the title tag. Contains CSS files which are used globally throughout the site including ‘global.min.css’

Header Modules

Location - source\html\includes\header

header.html
Combines all header modules into one and the header logo. Specific mobile and desktop navigation in header. All JS required for header is contained within global.min.js
header-desktop.html
Specific desktop navigation in header. No specific JS used.
header-mobile.html
Specific mobile header. Plugin used menu on mobile: jQuery-Responsive-Multi-Level-Menu-Plugin-Dlmenu. JS found within source\js\partials\mobile-nav folder (outputted as global.min.js in build)

Footer Modules

Location - source\html\includes\footer

footer.html
Contains all footer HTML. There is no duplication of code for devices or JS.

Page Modules

Location - source\html\includes\modules

m1-video-panel.html
Module which plays popup video. Lightbox used iframe call. Class js-video-lightbox used to call lightbox. Plugin used is magnific-popup. Found within source\js\partials\magnific-popup folder (outputted as global.min.js in build). Plugin initialization for Ajax calls made in within source\js\global.js (outputted as global.min.js in build)

Lightbox Modules

Location - source\html\lightboxes

l1-product-details.html
Lightbox used via ajax call. Class js-ajax-lightbox used to call lightbox. Plugin used is magnific-popup. Found within source\js\partials\magnific-popup folder (outputted as global.min.js in build). Plugin initialization for Ajax calls made in within source\js\global.js (outputted as global.min.js in build)

Page Builds

Provide below list of pages to be built in project. Highlight pages that are not in development, in development, under review and complete.

The below is a list of page builds for the project made up of templates and modules. Please note that while under development these links may change and are not to be initgrated into any CMS until fully signed off by the client.

Colors

Fill Colors

Set out all project brand colors below as per example. There should be no colors used in development that have not come from designs. The project designer should outline all brand colors including lighter or darker variations. Naming methodology should be discussed with designer. It's important to outline here the context and usages when using these fills.

.fill-blue #07E, $fill-blue

.fill-blue

.fill-black #000, $fill-black

.fill-black

.fill-grey #AAA, $fill-grey

.fill-grey

.fill-red #E32, $fill-red

.fill-red

.fill-white #FFF, $fill-white

.fill-white

Text Colors

Set out all project brand text colors below as per example. Again there should be no colors used in development that have not come from designs. The project designer should outline all text colors including lighter or darker variations, hover and focus states. It's important to outline here the context and usages of the text colors as in below example.

.text-blue #07E, $text-blue

This is the standard link color. It's on links by default.

.text-black #000, $text-black

This is the default text color.

.text-grey #AAA, $text-grey

This is the darkest gray color.

.text-red #E32, $text-red

This is red text used for error messaging.

.text-white #FFF, $text-white

White text for dark backgrounds.

Link Colors

Find below primary links color variations. By default, a tags will get the same styling as elements with the class.

a, .link-blue

This is the default blue link style.

.link-grey

This is the grey link style.

Webfonts

To set up webfonts for a project first add all webfont files to the source\webfonts folder.

Then within source\css\partials\global\brand\webfonts.scss, using the @font-face rule, define a name for the font (e.g. GT-Walsheim-Bold), and then point to the font files stored in the source\webfonts folder. See example below

CSS

@font-face {
	font-family: 'GT-Walsheim-Bold';
	src: url('../webfonts/GT-Walsheim-Bold.eot?') format('eot'), 
	     url('../webfonts/GT-Walsheim-Bold.woff') format('woff'), 
	     url('../webfonts/GT-Walsheim-Bold.ttf')  format('truetype'),
	     url('../webfonts/GT-Walsheim-Bold.svg#GT-Walsheim-Bold') format('svg');
}

Within the source\css\partials\helpers\variables.scss file then set up the helper variables for the fonts like so:

CSS

$brand-font--bold: 'GT-Walsheim-Bold', 'Arial'

Finally update this section with list of variable names for fonts and indicate rules of usage based on the project designs.

Grid

The default grid set up in this template is Foundation. The code is located in the source\css\partials\global\layout.scss file. The develope can choose to use which ever framework suits on a project to project basis. Once the grid is setup for the project the developer must outline whats being used and example of its usage in this secation. Below is a basic example.

This project uses Foundation's Grid. Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.

HTML

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
<div class="row">
  <div class="large-3 columns">...</div>
  <div class="large-6 columns">...</div>
  <div class="large-3 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-2 columns">...</div>
  <div class="small-6 large-8 columns">...</div>
  <div class="small-12 large-2 columns">...</div>
</div>
<div class="row">
  <div class="small-3 columns">...</div>
  <div class="small-9 columns">...</div>
</div>
<div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-8 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-5 columns">...</div>
  <div class="small-6 large-7 columns">...</div>
</div>
<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

Rendered HTML

small-2 large-4
small-4 large-4
small-6 large-4
large-3
large-6
large-3
small-6 large-2
small-6 large-8
small-12 large-2
small-3
small-9
large-4
large-8
small-6 large-5
small-6 large-7
large-6
large-6

For more information on grid please see the Foundation documentation

In addition this project uses Flexbox Grid for embellishments on modern browers, such as matching heights as an alternative for js (improve page speed - better for SEO). Don’t know flexbox? wanna learn? Try this

Layout

Floats

Use .float-left, .float-right and .float-none to float elements.

HTML

<div class="clearfix">
  <div class="float-left">.float-left</div>
  <div class="float-right">.float-right</div>
</div>
<div class="float-none">.float-none</div>

Rendered HTML

.float-left
.float-right
.float-none

Display

Use .hide-elem, .inline, .inline-block and .block to change an element's display.

HTML

<div>
  <div class="hide-elem">.hide-elem</div>
  <div class="inline border mr1">.inline</div>
  <div class="inline-block border">.inline-block</div>
  <a href="#" class="block border mt1">.block</a>
</div>

Rendered HTML

.hide-elem
.inline
.inline-block
.block

Overflow

Use .overflow-hidden, .overflow-auto, .overflow-scroll and .overflow-visible to change an element's overflow behavior. Inline CSS is used here only for example purposes. Do not use in project.

HTML

<div class="overflow-hidden border p2 mb2" style="height:85px;">
  <p class="mb1">.overflow-hidden</p>
  <p>...</p>
</div>

<div class="overflow-auto border p2 mb2" style="height:85px;">
  <p class="mb1">.overflow-auto</p>
  <p>...</p>
</div>

<div class="overflow-scroll border p2 mb2" style="height:85px;">
  <p class="mb1">.overflow-scroll</p>
  <p>...</p>
</div>

Rendered HTML

.overflow-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc. Praesent efficitur blandit dolor vestibulum vestibulum. Mauris et neque ut lectus commodo aliquet. Morbi ligula enim, accumsan ut ex sed, congue egestas libero. Sed accumsan malesuada erat, at tincidunt lacus aliquam at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu est vel erat pretium elementum.

.overflow-auto

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc. Praesent efficitur blandit dolor vestibulum vestibulum. Mauris et neque ut lectus commodo aliquet. Morbi ligula enim, accumsan ut ex sed, congue egestas libero. Sed accumsan malesuada erat, at tincidunt lacus aliquam at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu est vel erat pretium elementum.

.overflow-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc. Praesent efficitur blandit dolor vestibulum vestibulum. Mauris et neque ut lectus commodo aliquet. Morbi ligula enim, accumsan ut ex sed, congue egestas libero. Sed accumsan malesuada erat, at tincidunt lacus aliquam at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu est vel erat pretium elementum.

Width and Height

Use .fit class for setting an element's max-width to 100%, as well as an .width-auto to set an element's width to auto. Use .full-height to set an element's height to 100%. Inline CSS is used here only for example purposes. Do not use in project.

HTML

<div class="fit border mb1">.fit</div>

<div class="width-auto border mb1">.width-auto</div>

<div style="height:85px;" class="border p1">
  <div class="full-height border">.full-height</div>
</div>

Rendered HTML

.fit
.width-auto
.full-height

Spacing Prefixes

This shorthand prefix and spacing unit system can be combined to set an element's margin, padding and position.

Prefixes Description
m Margin
p Padding
t Top
r Right
b Bottom
l Left
mx, px x-axis
my, py y-axis
z z-index
0 0rem
1 .5rem $space-1
2 1rem $space-2
3 1.5rem $space-3
4 2rem $space-4
5 3rem $space-5
6 4.5rem $space-6

Margin

Margin can be set from 0-6 spacing units on any side or axis, as well as set to .mx-auto for horizontal centering. In the example below, .mr0 through .mr6 are used to set margin-right of each element to the various spacing values.

HTML

<div class="inline-block border p1 mr0">.mr0</div>
<div class="inline-block border p1 mr1">.mr1</div>
<div class="inline-block border p1 mr2">.mr2</div>
<div class="inline-block border p1 mr3">.mr3</div>
<div class="inline-block border p1 mr4">.mr4</div>
<div class="inline-block border p1 mr5">.mr5</div>
<div class="inline-block border p1 mr6">.mr6</div>
<div class="col-6 border p1 mt2 mx-auto">.mx-auto</div>

Rendered HTML

.mr0
.mr1
.mr2
.mr3
.mr4
.mr5
.mr6
.mx-auto

Padding

Padding can be set from 0-6 spacing units on any side or axis, in the example below, .p0 through .p6 are used to set each element's padding to the various spacing values.

HTML

<div class="inline-block border p0">.p0</div>
<div class="inline-block border p1">.p1</div>
<div class="inline-block border p2">.p2</div>
<div class="inline-block border p3">.p3</div>
<div class="inline-block border p4">.p4</div>
<div class="inline-block border p5">.p5</div>
<div class="inline-block border p6">.p6</div>

Rendered HTML

.p0
.p1
.p2
.p3
.p4
.p5
.p6

Positioning

Developers can use specific classes for setting an element's position and hierarchy. For positioning, an element can be set to .relative, .absolute, .fixed or .static. Setting z-index and top, right, bottom, left positioning can be done by using the shorthand from the previous table.

HTML

<div class="border p2">
  <div class="relative t2 l2 border">.relative .t2 .l2</div>
</div>

<div class="relative border p2">
  .relative
  <div class="absolute t0 l6 border">.absolute .t0 .l6</div>
</div>

<div class="relative p4">
  <div class="absolute t1 l1 z1 border p1">.absolute .t1 .l1 z1</div>
  <div class="absolute t4 l4 z2 border p1 fill-white">.absolute .t2 .l2 z2</div>
</div>

Rendered HTML

.relative .t2 .l2
.relative
.absolute .t0 .l6
.absolute .t1 .l1 z1
.absolute .t2 .l2 z2

Typography

Headers and Sizing

Header sizes are defined from h1 to h6. Additionally, there are utility classes ranging from text-1 to text-6 for sizing blocks of text. Headers and text sizing classes have no margins or padding by default.

HTML

<h1>This is an example of a h1</h1>
<p class="text-1">This is an example of a h1</p>
<h2>This is an example of a h2</h2>
<p class="text-2">This is an example of a h2</p>
<h3>This is an example of a h3</h3>
<p class="text-3">This is an example of a h3</p>
<h4>This is an example of a h4</h4>
<p class="text-4">This is an example of a h4</p>
<h5>This is an example of a h5</h5>
<p class="text-5">This is an example of a h5</p>
<h6>This is an example of a h6</h6>
<p class="text-6">This is an example of a h6</p>

Rendered HTML

h1, .text-1 Pixels 30px / Line-Height 34px / Margin Bottom 40px

This is an example of a h1

h2, .text-2 25px / 29px / 20px

This is an example of a h2

h3, .text-3 20px / 24px / 20px

This is an example of a h3

h4, .text-4 18px / 22px / 20px

This is an example of a h4

h5, .text-5 16px / 20px / 20px

This is an example of a h5

h6, .text-6 14px / 18px / 20px

This is an example of a h6

Paragraphs

Paragraphs have a set font-size of 16px. They have a set margin-bottom apart from the last-child element which has 0px margin-bottom.

HTML

<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>

Rendered HTML

h1, .text-1 Pixels 16px / Line-Height 34px / Margin Bottom 40px / 0px (last-child)

This is an example of a paragraph

This is an example of a paragraph

Emphasis

Use the following html tags and utility classes to add emphasis to blocks of text.

HTML

<p class="bold"><span class="regular">Lorem ipsum dolor</span>sit amet, consectetur adipiscing elit</p>

Rendered HTML

.regular

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML

<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit</strong>
<p class="bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Rendered HTML

strong, .bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML

<em>Lorem ipsum dolor sit amet, consectetur adipiscing elit</em>
<p class="italic">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Rendered HTML

em, .italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit

HTML

<p class="caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Rendered HTML

.caps

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Overflow

Use the following utility classes to prevent blocks of text from wrapping or to truncate them (requires setting a width).

HTML

<p class="nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc.</p>

Rendered HTML

.nowrap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc.

HTML

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc.</p>

Rendered HTML

.truncate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem. Proin porttitor pretium sodales. Duis laoreet quam imperdiet, bibendum nisi et, tempus eros. Praesent non iaculis metus. Ut ante orci, ornare a finibus ut, tincidunt quis metus. Donec pharetra, ipsum vel porta bibendum, dui ligula pulvinar urna, a porta ante ligula quis nunc.

Alignment

Use these utility classes to align blocks of text.

HTML

<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

Rendered HTML

.text-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-cente

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit

.text-justify

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Lists

Ordered and unordered lists require no classes by default. To remove all styling from either list, use the .list-unstyled class.

HTML

<ol>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ol>
<ul>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
<ul class="list-unstyled">
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>

Rendered HTML

ol

  1. John
  2. Paul
  3. George
  4. Ringo

ul

  • John
  • Paul
  • George
  • Ringo

.list-unstyled

  • John
  • Paul
  • George
  • Ringo

Borders

Borders

Borders are set up semi-transparent so they work with nearly any fill they're applied on top of. Use .border, .border-top, .border-right, .border-bottom and .border-left to adjust outlines on elements.

HTML

<div class="border p1 m1">.border</div>
<div class="border-top p1 m1">.border-top</div>
<div class="border-right p1 m1">.border-right</div>
<div class="border-bottom p1 m1">.border-bottom</div>
<div class="border-left p1 m1">.border-left</div>
</div>

Rendered HTML

.border
.border-top
.border-right
.border-bottom
.border-left

Lighter Borders

Adding --lighter to the border classes above results in a slightly more transparent border.

HTML

<div class="border--lighter p1 m1">.border--lighter</div>
<div class="border-top--lighter p1 m1">.border-top--lighter</div>
<div class="border-right--lighter p1 m1">.border-right--lighter</div>
<div class="border-bottom--lighter p1 m1">.border-bottom--lighter</div>
<div class="border-left--lighter p1 m1">.border-left--lighter</div>

Rendered HTML

.border--lighter
.border-top--lighter
.border-right--lighter
.border-bottom--lighter
.border-left--lighter

Removing Borders

When a border needs to be removed (at a breakpoint, for instance), use .border-none classes.

HTML

<div class="border border-none p1 m1">.border-none</div>
<div class="border border-top-none p1 m1">.border-top-none</div>
<div class="border border-right-none p1 m1">.border-right-none</div>
<div class="border border-bottom-none p1 m1">.border-bottom-none</div>
<div class="border border-left-none p1 m1">.border-left-none</div>

Rendered HTML

.border-none
.border-top-none
.border-right-none
.border-bottom-none
.border-left-none

Rounded Corners

Round off corners using .rounded, .rounded-top and .rounded-bottom.

HTML

<div class="border rounded p1 m1">.rounded</div>
<div class="border rounded-top p1 m1">.rounded-top</div>
<div class="border rounded-bottom p1 m1">.rounded-bottom</div>

Rendered HTML

.rounded
.rounded-top
.rounded-bottom

Circles

Create a circle out of an element with the same width and height using the .circle class. You can then give the element a set height and width. For example purposes this is done via inline css. In projects please create a class.

HTML

<div class="circle border"></div>

Rendered HTML

Buttons

Primary Buttons

This button type is used for primary links and page actions. It can be used with either a or button tags.

HTML

<a class="button button--primary" href="">Link</a>
<button class="button button--primary">Button</button>

Rendered HTML

.button--primary

Link

Secondary Buttons

This button type is used for secondary links and page actions. It can be used with either a or button tags.

HTML

<a class="button button--secondary" href="">Link</a>
<button class="button button--secondary">Button</button>

Rendered HTML

.button--secondary

Link

Disabled Buttons

This button type is used for inactive links and page actions.

HTML

<a class="button--disabled button--primary" href="">Link</a>
<button class="button--disabled button--primary">Button</button>
<a class="button--disabled button--secondary" href="">Link</a>
<button class="button--disabled button--secondary">Button</button>

Rendered HTML

.button--disabled

Link Link

Small Buttons

Use the .button--small class for smaller versions of all above button types.

HTML

<a class="button--small button--primary" href="">Link</a>
<button class="button--small button--primary">Button</button>
<a class="button--small button--secondary" href="">Link</a>
<button class="button--small button--secondary">Button</button>

Rendered HTML

.button--small

Link Link

Forms

Form elements must always be paired with a label for accessability. There also must be matching for and id values to associate the label with the form element. The form element must also have an appropriate name attribute. Placeholder text is used for additional context when necessary.

Form Labels

Use the .form-label class to get default margins, layout and styling for form labels. Additionally, use the .form-label--required class around an asterisk to declare a field required. If a field needs to be marked as optional, wrap "(optional)" in .form-label--optional.

HTML

<form>
  <label class="form-label">Add your website</label>
  <label class="form-label">Add your website <span class="form-label--required">*</span></label>
  <label class="form-label">What is your phone number? <span class="form-label--optional">(optional)</span></label>
</form>

Rendered HTML

Text Inputs

Use the .text-input class to get default styling for text inputs. Text inputs are always paired with a label to give users context. Placeholder text is used for additional context when necessary.

HTML

<form>
  <label for="name" class="form-label">Whats your name</label>
  <input id="name" type="text" name="textfield" class="text-input" placeholder="Placeholder Text">
</form>

Rendered HTML

Helper Text

When necessary, place additional helper text beneath inputs in a div with a .form-helper class.

HTML

<form>
  <label for="firstname" class="form-label">Whats your first name</label>
  <input id="firstname" type="text" name="firstnametext" class="text-input" placeholder="Placeholder Text">
  <div class="form-helper">You don't need to include http://</div>
</form>

Rendered HTML

You don't need to include http://

Textareas

Use the .textarea class to get default styling for textareas.

HTML

<form>
  <label for="address" class="form-label">Whats your address</label>
  <textarea id="address" name="addresstext" class="textarea" placeholder="Placeholder Text"></textarea>
</form>

Rendered HTML

Select Fields

Use the .select class to get default styling for select fields. Select Fields must always be paired with a label for accessability.

HTML

<form>
  <label for="statement" class="form-label">Add a Statement</label>
  <select id="statement" name="selectStatement" class="select">
    <option value="choose">Choose your Option</option>
    <option value="amazing">Option 1</option>
    <option value="boring">Option 2</option>
    <option value="fun">Option 3</option>
  </select>
</form>

Rendered HTML

Radio Buttons

Use the .radio class alongside a label to get default styling for radio inputs. Radio inputs must be contained in a fieldset with the class .fieldset__radio and must have a relative legend.

HTML

<form>
  <fieldset class="fieldset__radio">
    <legend>Radio Button Legend:</legend>
    <input type="radio" class="radio" id="option_1" value="option_1" name="options" checked="checked">
    <label for="option_1">Option 1</label>
    <input type="radio" class="radio" id="option_2" value="option_2" name="options">
    <label for="option_2">Option 2</label>
  </fieldset>
</form>

Rendered HTML

Radio Button Legend:

Checkboxes

Use the .checkbox class alongside a label to get default styling for checkbox inputs. Checkbox inputs must be contained in a fieldset with the class .fieldset__checkbox and must have a relative legend

HTML

<form>
  <fieldset class="fieldset__checkbox">
    <legend>Checkbox Legend:</legend> 
    <input type="checkbox" class="checkbox" id="check_1" value="check_1" name="checkboxes" checked="checked">
    <label for="check_1">Option 1</label>
    <input type="checkbox" class="checkbox" id="check_2" value="check_2" name="checkboxes">
    <label for="check_2">Option 2</label>
  </fieldset>
</form>

Rendered HTML

Checkbox Legend:

Small Form Labels

Append the .form-label--small class to get a smaller version of form labels.

HTML

<form>
  <label class="form-label form-label--small">Add your website</label>
</form>

Rendered HTML

Small Text Inputs

Append the .text-input--small class to get a smaller version of text inputs.

HTML

<form>
  <label for="username" class="form-label form-label--small">Choose a username</label>
  <input id="username" name="usernametext" type="text" class="text-input text-input--small" placeholder="Placeholder Text">
</form>

Rendered HTML

Small Textareas

Append the .textarea--small class to get a smaller version of textareas.

HTML

<form>
  <label for="comment" class="form-label form-label--small">Add a Comment</label>
  <textarea id="comment" name="commenttext" class="textarea textarea--small"></textarea>
</form>

Rendered HTML

Small Select Fields

Use the .select--small class to get the smaller version of select field.

HTML

<form>
  <label for="option" class="form-label">Choose an Option</label>
  <select id="option" name="optiontext" class="select select--small">
    <option value="choose">Choose your option</option>
    <option value="amazing">Option 1</option>
    <option value="boring">Option 2</option>
    <option value="fun">Option 3</option>
  </select>
</form>

Rendered HTML

Form Warnings

Wrap each field in a div and add a .form-element--warning class to change the child label and form field styling. Additionally, add a div below the input with a .form-feedback class to inform the user what needs to be adjusted.

HTML

<form>
  <div class="form-element--warning">
    <label for="namewarning" class="form-label">Your name</label>
    <input id="namewarning" name="namewarningtext" type="text" class="text-input">
    <div class="form-feedback">Caps lock is on!</div>
  </div>
</form>

Rendered HTML

Form Errors

Wrap each field in a form and add a .form-element--warning class to change the child label and form field styling. Additionally, add a div below the input with a .form-feedback class to inform the user what needs to be adjusted.

HTML

<form>
  <div class="form-element--error">
    <label for="nameerror" class="form-label">Your name</label>
    <input id="nameerror" name="nameerrortext" type="text" class="text-input">
    <div class="form-feedback">Your name can't be Enda?</div>
  </div>
</form>

Rendered HTML

Form Success

Wrap each field in a div and add a .form-element--success class to change the child label and form field styling. Additionally, add a div below the input with a .form-feedback class to inform the user what needs to be adjusted.

HTML

<form>
  <div class="form-element--success">
    <label for="namesuccess" class="form-label">Your name</label>
    <input id="namesuccess" name="namesuccesstext" type="text" class="text-input">
    <div class="form-feedback">Looks good!</div>
  </div>
</form>

Rendered HTML

Tables

Default Table

Default table styling doesn't require any utility classes. Column widths can be added on a case by case basis. Width is set to 100% of the container element. Use scope and caption tags as per accessibility guidelines

HTML

<table>
<caption>Table Caption</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th> 
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>

Rendered HTML

Table Caption
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

Bordered Table

Use the .table-border class to automatically add borders to your table and all its rows.

HTML

<table class="table__border">
<caption>Table Caption</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>

Rendered HTML

Table Caption
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

Scroll Table

Use the container with class .table__scroll__container and add the class .table__scroll to the table element to make a table auto scoll once it reaches a min width.

HTML

<div class="table__scroll__container">
<table class="table__scroll table__border">
<caption>Table Caption</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>
</div>

Rendered HTML

Table Caption
Name Age Birthday
Jackie 5 April 5
Beth 8 January 14

Faux Table Layout

To give content the layout properties of a table without using the table element, use the .table, .th, .tr and .td classes.

HTML

<div class="table">
<div class="td">Lines of different lengths</div>
<div class="td">Will automatically expand their inner divs to be as tall as each other.</div>
<div class="td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem.</div>
</div>

Rendered HTML

Lines of different lengths
Will automatically expand their inner divs to be as tall as each other.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod a justo ac laoreet. Fusce in semper sem.

Modals

Modals

As with utilities, developers must outline all plugin components such as modals, accordions, tooltips ...ect used in for the project in this section. HTML examples should be provided and neccessary classes called out.