Get started

There are a few ways to get started with Outline.

Download the latest release from GitHub.

Install with Bower

bower install outline

To clone the git repository. Just run the following command. 

[sudo] git clone [email protected]:matt-harris/outline.git

Overview

Compiling Sass

You will need a Sass compiler to watch and compile your Sass files into a CSS file.

Outline uses gulp.js to watch and compile the Sass files but also makes use of build tasks including autoprefixer, minifying files, JS file concatenation, image compression and browser refresh. Outline comes with a fully commented gulpfile.js and package.json file which lists the plugins used. For more information about getting sarted with gulp read this excellent intro by Mark Goodyear

Of course you can also use a compiler / build tool of your choice. A couple of the more popular options are:-

Writing CSS

Outline follows the BEM (Block, Element, Modifier) method for writing & organising CSS. BEM helps keep CSS logical and predictable. The naming convention follows this pattern: 

.block {}
.block__element {}
.block__element--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--modifier represents a different state or version of .block.

For more information about BEM, read this and this.

Writing Sass

Have a read of the excellent Sass guidelines. It's a styleguide for Sass that helps everyone to write maintainable and scalable Sass.

Start creating your HTML

I’ve included index.html as a starting point.

Susy

Susy [soo-zee], is a Sass add on for grids. Susy allows you to build custom responsive grids on demand, rather than a framework. This allows you to:-

  • Separate style from markup
  • Simple modular maintenance
  • Only need to write necessary CSS (No bloat)

I have created a Codepen collection of example Susy layouts.

I like the idea of grids-on-demand, rather than a strict framework.

— Chris Coyier, CodePen

Resources

Colours

Palette

Primary
Secondary
Tertiary
Grey
Light grey
Dark grey

Helper colours

You add background and text colours to your project. You can add these classes to a tag e.g .bg-primary or use @extend e.g. @extend %bg-primary. 

// background colours
.bg-primary // $color-primary
.bg-secondary // $color-secondary
.bg-tertiary // $color-tertiary
.bg-grey // $color-grey
.bg-grey-light // $color-grey-light
.bg-grey-dark // $color-grey-dark
.bg-white // #fff

// text colours
.text-primary // $color-primary
.text-secondary // $color-secondary
.text-tertiary // $color-tertiary
.text-grey // $color-grey
.text-grey-light // $color-grey-light
.text-white // #fff

Breakpoints

Outline uses the following breakpoints as a starting point. To add new breakpoints go into the utils/_variables.scss file and add a new breakpoint variable. 

$mobile-landscape: 30rem; // 480px
$tablet: 40rem; // 640px
$tablet-wide: 48rem; // 768px
$desktop: 64rem; // 1024px
$widescreen: 71.25rem; // 1140px

Typography base/_typography.scss

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Fonts

Outline uses a google font combination of Lato and Merriweather.

This is the Merriweather font included in Outline.

This is the Lato font included in Outline.

To change the fonts goto Google fonts, select the fonts you require and then replace the following code on your website with the new code provided. 

<link href="//fonts.googleapis.com/css?family=Lato:400,700,900|Merriweather:400,400italic,700,700italic" rel="stylesheet" type="text/css">

Body

Paragragh

All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider me babber. 

<p>All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider me babber.</p>

Lead text

All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. 

<p class="lead">...</p>

Small

This text is small.

This text is small.

<small>This text is small.</small>
<p class="text-small">This text is small</p>

Muted

This text is muted.

<p class="text-muted">This text is muted.</p>

Hyphenate

ThisIsAReallyLongWordAndDoesNotBreakLayout
<h3 class="hyphenate">ThisIsAReallyLongWordAndDoesNotBreakLayout</h3>

Strong

This text is strong.

<p>This text is <strong>strong</strong>.</p>

Emphasis

This text is emphasised.

<p>This text is <em>emphasised</em>.</p>

Subscript & Superscript

This text is subscripted

This text is superscripted

<p>This text is <sub>subscripted</sub></p>
<p>This text is <sup>superscripted</sup></p>

Mark

The <mark> element is used to highlight text.

<p>The <code><mark></code> element is used to <mark>highlight</mark> text.</p>

Links

This is the link style. Text hyperlinks are used for destinations, or moving from one page to another. 

<p>This is the <a href="#">link</a> style. Text hyperlinks are used for <a href="#">destinations</a>, or moving from one page to <a href="#">another</a>.</p>

Horizontal line

<hr>

Blockquote

Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider.

Brizzle Ipsum, Made in Bristol 
<blockquote>
  <p>Ginormous hark at ee mint in it casnt. Hark at ee idut ceptible, mint in it lectric me eds erting i didnt do nothing dinnum gashead bemminser eadfit inchew glider.</p>
  <cite>Brizzle Ipsum, Made in Bristol</cite>
</blockquote>

Figure

This is a caption for the above image.
<figure>
  <img src="img/min/16x9-img-placholder.png" >
  <figcaption>This is a caption for the above image.</figcaption>
</figure>

Components

Buttons components/_buttons.scss

Buttons are created using the button element or adding the .btn class to any element. You can add some of the following classes below to get different design combinations.

Default 
<button type="button">Default</button>
<a class="btn" href="#" role="button">Default</a>

Colours

<button class="btn--primary" type="button">Colour Primary</button>
<button class="btn--secondary" type="button">Colour Secondary</button>
<button class="btn--tertiary" type="button">Colour Tertiary</button>
<button class="btn--grey" type="button">Colour Grey</button>

Sizes

<button class="btn--small" type="button">Small</button>
<button class="btn" type="button">Default</button>
<button class="btn--large" type="button">Large</button>
<button class="btn--xlarge" type="button">Xtra Large</button>

Styles

<button class="btn--rounded" type="button">Rounded</button>
<button class="btn--pill" type="button">Pill</button>
<button class="btn--ghost" type="button">Ghost</button>

Block

<button class="btn--block" type="button">Block</button>

Code components/_code.scss

A block of code should be contained within <pre> and <code> tags. 

<pre><code>.text {
  color: red;
}

.footer .text {
  color: blue;
}</code></pre>

Wrap inline code within the <code> element e.g. This is a <table> tag. 

<p>This is a <code>table</code> tag.</p>

Embed components/_embed.scss

To make embedded content responsive wrap it with the class .embed-wrap. 

<div class="embed-wrap">
  embedded content goes here...
</div>

YouTube example

<div class="embed-wrap">
  <iframe width="853" height="480" src="https://www.youtube.com/embed/kRmbVOI6oIM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Vimeo example

<div class="embed-wrap">
  <iframe src="https://player.vimeo.com/video/67476280" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Google Maps

<div class="embed-wrap">
  <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=bristol&aq=&sll=51.468489,-2.590709&sspn=0.321233,0.837021&ie=UTF8&hq=&hnear=Bristol,+City+of+Bristol,+United+Kingdom&ll=51.468552,-2.590714&spn=0.321332,0.837021&t=m&z=11&output=embed&iwloc=near"></iframe>
</div>

Generic iFrame

<div class="embed-wrap">
  <iframe src="http://alistapart.com/article/responsive-web-design/" style="border:0"></iframe>
</div>

Forms components/_forms.scss

Default styles of form elements including labels, inputs, checkbox and radio controls, selects, fieldsets and legends.

Fieldset

Legend 
<form>
  <fieldset>
    <legend>Legend</legend>
      <div class="form__row">
        <label for="fieldset-example">label:</label>
        <input type="text" id="fieldset-example" placeholder="Placeholder text example">
      </div>
  </fieldset>
</form>

Form elements

<form>
  <div class="form__row">
    <label for="text-input">Text input:</label>
    <input type="text" id="text-input" placeholder="Text input">
  </div>

  <div class="form__row">
    <label for="date-input">Date input:</label>
    <input type="date" id="date-input" placeholder="Date input">
  </div>

  <div class="form__row">
    <label for="email-input">Email input:</label>
    <input type="email" id="email-input" placeholder="Email input">
  </div>

  <div class="form__row">
    <label for="number-input">Number input:</label>
    <input type="number" id="number-input" placeholder="Number input">
  </div>

  <div class="form__row">
    <label for="password-input">Password input:</label>
    <input type="password" id="password-input" placeholder="Password input">
  </div>

  <div class="form__row">
    <label for="search-input">Search input:</label>
    <input type="search" id="search-input" placeholder="Search input">
  </div>

  <div class="form__row">
    <label for="tel-input">Telephone input:</label>
    <input type="tel" id="tel-input" placeholder="Telephone input">
  </div>

  <div class="form__row">
    <label for="url-input">URL input:</label>
    <input type="url" id="url-input" placeholder="URL input">
  </div>

  <div class="form__row">
    <label for="disabled-input">Disabled:</label>
    <input type="text" id="disabled-input" disabled placeholder="Disabled">
  </div>

  <div class="form__row">
    <label for="textarea">Text area:</label>
    <textarea id="textarea" placeholder="Write your message..."></textarea>
  </div>

  <div class="form__row">
    <label>Select an option:</label>
    <select>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>

  <div class="form__row">
    <label>
      <input type="checkbox">
      Check box option
    </label>
  </div>

  <div class="form__row">
    <label>
      <input type="radio" name="radio">
      Radio option
    </label>
  </div>

  <input type="submit" value="Submit">
</form>

Form Inline

<form class="form--inline">
  <div class="form__row">
    <label for="inline-input">Name</label>
    <input type="text" id="inline-input" placeholder="Your name">
  </div>

  <div class="form__row">
    <label for="inline-input2">Email</label>
    <input type="text" id="inline-input2" placeholder="Your email">
  </div>

  <div class="form__row--controls">
    <label>
      <input type="checkbox">
      Check box option
    </label>
  </div>

  <div class="form__row--actions">
    <input type="submit" value="Submit">
  </div>
</form>

Lists components/_lists.scss

Unordered

  • One
    • One nested
    • Two nested
      • One nested
      • Two nested
  • Two
  • Three
<ul>
  <li>...</li>
</ul>

Ordered

  1. One
    1. One nested
    2. Two nested
      1. One nested
      2. Two nested
  2. Two
  3. Three
<ol>
  <li>...</li>
</ol>

Definition

Term 1
Definition of term 1
Term 2
Definition of term 2
Term 3
Definition of term 3
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Unstyled

  • One
  • Two
  • Three
<ul class="list--unstyled">
  <li>...</li>
</ul>

Inline

  • One
  • Two
  • Three
<ul class="list--inline">
  <li>...</li>
</ul>

Media / Flag objects components/_media.scss

The media object places any image (item) and text content side by side.

The flag object places any image (item) and text content side by side with vertical alignment.

Media default

Place holder for media object

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div class="media">
  <img class="media__item" src="img/min/16x9-img-placholder.png" alt="Place holder for media object">
  <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Media reversed

Place holder for media object

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div class="media">
  <img class="media__item--reversed" src="img/min/16x9-img-placholder.png" alt="Place holder for media object">
  <p class="media__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Flag default

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="flag">
  <div class="flag__item">
    <img src="img/min/16x9-img-placholder.png" alt="Place holder for glag object" width="120">
  </div>
  <div class="flag__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

Flag top

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="flag flag--top">
  ...
</div>

Flag bottom

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<div class="flag flag--bottom">
  ...
</div>

Flag reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object 
<div class="flag flag--reversed">
  <div class="flag__body">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
  <div class="flag__item">
    <img src="img/min/16x9-img-placholder.png" alt="Place holder for glag object" width="120">
  </div>
</div>

Flag reversed top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object 
<div class="flag flag--reversed flag--top">
  ...
</div>

Flag reversed bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object 
<div class="flag flag--reversed flag--bottom">
  ...
</div>

Pagination components/_pagination.scss

The pagination component provides styles for any project that contains long content which requires spliting up into shorter, easier to understand blocks. 

<ul class="pager">
  <li><a href="#"><</a></li>
  <li class="pager--current"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">></a></li>
</ul>

Tables components/_tables.scss

Basic

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Posistion</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>Mesut Özil</td>
      <td>Midfielder</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Jack Wilshere</td>
      <td>Midfielder</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Olivier Giroud</td>
      <td>Forward</td>
    </tr>
  </tbody>
</table>

Stripes

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward 
<table class="table--stripes">
  ...
</table>

Bordered rows

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward 
<table class="table--border-rows">
  ...
</table>

Bordered cells

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward 
<table class="table--border-cells">
  ...
</table>

Condensed

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward 
<table class="table--condensed">
  ...
</table>

Responsive

To make any table responsive, wrap the <table> in a <div> with the class .table--responsive

# Name Posistion Country DOB
11 Mesut Özil Midfielder Germany 15/10/1988
10 Jack Wilshere Midfielder England 1/1/1992
12 Olivier Giroud Forward France 30/9/1986 
<div class="table--responsive">
  <table class="table--stripes">
    ...
  </table>
</div>

Utilities

This folder contains the project variables, mixins, functions and the helper classes.

Variables utils/_variables.scss

This file contains all your project variables. The default variables included are (please expand on default variables):-

  • Font base size
  • Spacing
  • Fonts
  • Colours
  • Placeholder text colour
  • Breakpoints

Helpers utils/_helpers.scss

This file contains all your helper classes.

Clearfix

The .clearfix class clears floats. You can add this class to a tag or use @extend. 

<div class="clearfix">
  ...
</div>

.someClass {
  @extend %clearfix;
}

Align

You can add these classes to a tag or use @extend.

Align left

Align center

Align right

Justify text. All right me luvver ipsum dolor sit amet dolor dolore non gashead jammer veniam, me luvver tamorra dint aute as-dal. Dint fugiat ut culpa jammy cheers drive. In warter wheres attoo ut oozee idut, ceptible irure. Yer discolated ginormous, bemmie you gone and done it hark at ee fornbree excepteur glider me babber. Ginormous hark at ee mint in it casnt. 

<p class="align-left">...</p>

<p class="align-center">...</p>

<p class="align-right">...</p>

<p class="justify">...</p>

@extend:
<p class="example">...</p>

.example {
  color: red;
  @extend %align-right;
}

Floats

You can add these classes to a tag or use @extend.

Float left
Float center must have width set.
Float right
<div class="float-left">...</div>
<div class="float-center">...</div>
<div class="float-right">...</div>

Spacing

You can add these classes to a tag or use @extend.

.no-margin - No margin or padding
.space - Margin on all sides
.space-top - Margin on the top
.space-right - Margin on the right
.space-btm - Margin on the bottom
.space-left - Margin on the left

General

You can add these classes to a tag or use @extend.

.img-center - To center an image.
.is-uppercase - To make text uppercase.

Visual

You can add these classes to a tag or use @extend.

.hide - Hide from browsers and screenreaders.
.visuallyhidden - Hide visually, but available for screenreaders.

Mixins utils/_mixins.scss

Include breakpoints

Generates media-quieries using min-width. You can pass in variables e.g $tablet-wide or values e.g 560px 

.someClass {
  color: red;

  @include respond-min($tablet-wide) {
    color: blue;
  }
}

Ghost buttons

Use this mixin to create styles for your 'ghost' button. The mixin sets the text and border color. You can use variables or any colour values. 

<button class="example-btn">Example</button>

.example-btn {
  @include ghost-btn($color-secondary)
}

Gradients

Use this mixin to create styles for your two colour gradients. You need to include the angle of your gradient and the start and stop colour. You can use variables or any colour values. 

<div class="example-gradient"></div>

.example-gradient {
  @include gradient(90, $color-primary, $color-secondary);
  height: 5rem;
}

Icons

See Font awesome

Functions utils/_functions.scss

Tint

The tint function slightly lightens a colour.

Primary
lighten by 20%
// lighten $color-primary by 20%
.tint-example {
  background-color: tint($color-primary, 20%);
}

Shade

The shade function slightly darkens a colour.

Primary
darken by 20%
// darken $color-primary by 20%
.shade-example {
  background-color: shade($color-primary, 20%);
}

Vendor

Font awesome vendors/_font-awesome.scss

Outline comes with the excellent Font Awesome icons (4.5) included. Outline uses Font Awesome with mixins for adding icons to semantic HTML and without loading every single icon class definition when you only use some of the icons.

This is the default mixin for an icon.

@mixin icon($icon) {
  @extend %icon;
  @extend %icon-#{$icon};
}

This icon mixin adds padding to the right. You can use the default value set in mixin (.5rem) or specify your own value. For example you could use this for an icon in a button 

@mixin icon-before($icon, $padding: .5rem) {
  &:before {
    @extend %icon;
    @extend %icon-#{$icon};
    padding-right: $padding;
  }
}

Examples

Subway 
<div class="subway-sign">
  <i class="subway-sign__icon"></i>
  <span class="subway-sign__text">Subway</span>
</div>

.subway-sign {
  width: 8rem;
  padding: $spacing;
  background-color: $color-grey-dark;
  text-align: center;
  color: #fff;

  .subway-sign__icon {
    @include icon(subway);
    display: block;
    font-size: 3rem;
    margin-bottom: .5rem;
  }

  .subway-sign__text {
    font-family: $font-secondary;
    font-size: 1.25rem;
  }
}

<button class="btn--large download">Download</button>

.download {
  @include icon-before(cloud-download, .75rem)
}