Shopping Cart

Inspired Guide user manual

We designed Inspired Guides to be easy to use by creative and technical people. There’s no complicated set up, build tools required or dependencies. All you need to know is how to write HTML and CSS. You’re only a few steps away from your own Inspired Guide:

Customising style guide pages

We’ve separated styling the components and elements that are displayed in your Inspired Guide from the design of the style guide itself.

Styling the style guide

You’ll find styles for the style guide in /css/_ig.css. To separate styles for the style guide from the components and elements it displays, we’ve prefixed all style guide rules with ig-.


Cover

The cover page is an ideal place to set the tone for your Inspired Guide. Depending on the template set that you’ve chosen, you’ll find one of several techniques used to create the background pattern, including CSS gradients and repeating SVG patterns. Colours are populated from /config.json or define new colours in /css/_ig.css.

Placeholder text

The placeholder page title and tagline are populated from /config.json:

<h1>{{ title }}</h1>
<hr>
<p>{{ tagline }}</p>
Tip: Replace this design by adding your own styles to /css/_ig.css.

Promotional badge

Please keep the Inspired Guides promotional badge and link to our website, although we won’t know if you don’t. Change the SVG path colours to match your palette.

Contents

The contents page links to all pages in your style guide. Add and edit those links in index.html.

Tip: Replace this design by adding your own styles to /css/_ig.css.

Colour

The colour page /pages/branding-colour.html describes the primary, supporting, accent, base, messaging, and text colours used in your design. Values for these colours are populated from /config.json. For example:

{{ color.primary.default }}
{{ color.primary.lighter }}
{{ color.primary.light }}
{{ color.primary.darker }}
{{ color.primary.dark }}

Icons

The icons page /pages/icons.html includes SVG format icons from Github. Replace them with those from your design.

Typography

Typeface page

The typeface page /pages/typography-font.html is a place to showcase the unique characteristics of the primary typeface in your design. Information about this typeface is populated from /config.json.

{{{ content.typeface-primary-author }}}
{{{ content.typeface-primary-description }}}
{{{ font.primary.weight-light }}}

Like many pages of type in your style guide, apply contenteditable="true" to an element to enable people to edit its content.

Typeface comparisons

Compare primary and supporting typefaces. Information about these typefaces is populated from /config.json.

Typographic scale component

We’ve included a modular typographic scale on multiple pages of typography. It displays both px and rem font sizes. These sizes are populated from /config.json. For example:

<div class="ig-scale__px">
{{{ font.size.px }}}px
</div> 

<div class="ig-scale__rem">
{{{ font.size.rem }}}rem
</div>
Tip: Replace these designs by adding your own styles to /css/_ig.css.

Grid

We wanted Inspired Guides to be compatible, not complete with popular frameworks including Bootstrap and Foundation. Thats why we chose a twelve-column, even ratio grid which can be used to arrange elements in a multitude of combinations. We’ve included a twelve-column, even ratio grid that’s based on the Skeleton responsive boilerplate. Isolate from, or adjust to match your production grid.

Component and element styling

We’ve included style sheets for all the elements commonly found in style guides or component libraries:

These style sheets are imported into inspired.css. For example:

@import url('/css/_a.css');
@import url('/css/_alerts.css');
@import url('/css/_breadcrumbs.css');

Add new style sheets to this list of @imports.

Anchors

Styles for hyperlinks, including :active, :focus, :hover, and :visited pseudo classes. Like all Inspired Guides style sheets, we’ve used CSS Custom Properties, for example:

color : var(--color-text-link)
  • Files:
  • _a.css

Alerts

Feedback messages for user actions, plus styles for Info, Positive, Negative, and Warning alerts. Like all Inspired Guides style sheets, we’ve used the BEM (Block, Element, Modifier) syntax. Naming follows this pattern:

.block {}
.block__element {}
.block--modifier {}
  • .block describes the highest level of a component.
  • .block__element is a descendent of .block
  • .block--modifier represents a different state or version of .block.

Harry Roberts has written about getting your head ’round BEM syntax. Page includes:

  • Information message
  • Negative alert message
  • Positive alert message
  • Warning message
  • Files:
  • _alerts.css
  • panels.html

Breadcrumbs

Indicates a page’s position within a site organisation. Replace this—and any other component—with your HTML and CSS as needed. If you use a framework like Bootstrap or Foundation, include styles from their components.

  • Files:
  • _breadcrumbs.css
  • navigation.html

Buttons

Specially designed button styles in a range of sizes and states. Apply button classes to <a>, <button>, or <input> elements. Page includes:

  • Standard buttons
  • Primary actions
  • Prominant links
  • Button sizes
  • Button groups
  • Files:
  • _forms-buttons.css
  • forms-buttons.html

Cards

A flexible container for content, including versions with headers and footers, as well as versions for positive and negative styles. Page includes:

  • Standard card
  • Center, left, and right aligned
  • Inverse and outline
  • Positive and negative messages
  • With header and footer
  • With images
  • Files:
  • _cards.css
  • panels.html

Columns

CSS multi-column layout makes it easy to create multiple columns of text. Use column-count to specify the number of columns and their width will be automatically calculated. Use column-width and the appropriate number of columns will be created to fill a container. column-gap adds space between columns and column-rule creates dividers that use CSS border properties.

  • Files:
  • _type-columns.css
  • typography-paragraphs.html

Components

Collapsing, show/hide component, accordion, and tabs developed using Javascript. If you prefer to use use similar components from a framework like Bootstrap or Foundation, include their HTML, CSS and Javascript. Page includes:

  • Accordion
  • Show / hide
  • Tabs
  • Files:
  • _components.css
  • components.html

Forms

Form <input>, <select> and other controls, plus styles for <fieldset> and <form> elements. Page includes:

  • Checkbox
  • Date
  • Email
  • Fieldset
  • Form
  • Label
  • Number
  • Password
  • Placeholders
  • Radio
  • Search
  • Select
  • Telephone
  • Text
  • Textarea
  • URL
  • Files:
  • _forms.css
  • forms.html

Global

Styles that apply globally across all pages, including:

  • Body
  • HTML
  • Files:
  • _global.css

Headings

All HTML headings, <h1> through <h6>.

  • Files:
  • _typography-headings.css
  • _typography.html
  • _type-heading.html

Horizontal rules

Several thicknesses of <hr> elements.

  • Files:
  • _hr.css

Images

Bitmap and SVG images, separate or included withing <figure> elements. Figure captions positioned above, below and to the sides.

  • Files:
  • _img.css
  • media.html

Lists

Lists of items with and without an explicit order. Page includes:

  • Description
  • Footnotes style
  • Inline list items
  • Ordered
  • Unordered
  • Nested
  • Files:
  • _type-lists.css
  • typography-lists.html

Media object

Reusable layout components that combines icons and images alongside content that doesn’t wrap around it. Flexbox enables various alignments of images and content; Left and right, top and bottom, and centered.

  • Files:
  • _media.css
  • media.html

Pagination

Links to a series of related pages, for example articles in a category or search results. Typically applied to ordered and unordered lists.

  • Files:
  • _pagination.css
  • navigation.html

Paragraphs

Several sizes of <p> elements. Page includes:

  • Standard paragraph
  • Initial letter
  • Lede
  • Secondary
  • Standfirst
  • Files:
  • _type-paragraphs.css
  • typography-paragraphs.html

Print

Styles for printing style guide pages.

  • Files:
  • _print.css

Quotes

Several sizes block and pull quotes, and citations. Page includes:

  • Files:
  • _type-quotes.css
  • _typography-quotes.html

Tables

Several sizes and styles of <table> elements. Page includes:

  • Standard table
  • Bordered table
  • Inverse table
  • Small table
  • Striped table
  • Files:
  • _tables.css
  • _tables.html