Get started

There are a few ways to get started with Outline.

Download the from GitHub.

Install with Bower

bower install outline

To clone the . Just run the following command.

[sudo] git clone :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 , 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 e.g. %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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

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 , select the fonts you require and then replace the following code on your website with the new code provided.


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.

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.

Lead text

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

...

Small

This text is small.

This text is small.

This text is small.

This text is small

Muted

This text is muted.

This text is muted.

Hyphenate

ThisIsAReallyLongWordAndDoesNotBreakLayout

ThisIsAReallyLongWordAndDoesNotBreakLayout

Strong

This text is strong.

This text is strong.

Emphasis

This text is emphasised.

This text is emphasised.

Subscript & Superscript

This text is subscripted

This text is superscripted

This text is subscripted

This text is superscripted

Mark

The element is used to highlight text.

The element is used to highlight text.

Horizontal line



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

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

Figure

This is a caption for the above image.
This is a caption for the above image.

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

Default

Colours





Sizes





Styles




Block


Code components/_code.scss

A block of code should be contained within

 and  tags.

.text {
  color: red;
}

.footer .text {
  color: blue;
}

Wrap inline code within the element e.g. This is a

tag.

This is a table tag.

Embed components/_embed.scss

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

embedded content goes here...

YouTube example

Vimeo example

Google Maps

Generic iFrame

Forms components/_forms.scss

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

Fieldset


Form elements


Form Inline


Lists components/_lists.scss

Unordered

  • One
    • One nested
    • Two nested
      • One nested
      • Two nested
  • Two
  • Three
  • ...

Ordered

  1. One
    1. One nested
    2. Two nested
      1. One nested
      2. Two nested
  2. Two
  3. Three
  1. ...

Definition

Term 1
Definition of term 1
Term 2
Definition of term 2
Term 3
Definition of term 3
...
...

Unstyled

  • One
  • Two
  • Three
  • ...

Inline

  • One
  • Two
  • Three
  • ...

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.

Place holder for media object

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

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.

Place holder for media object

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

Flag default

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Flag top

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

...

Flag bottom

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

...

Flag reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object

Flag reversed top

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object
...

Flag reversed bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Place holder for glag object
...

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.


Tables components/_tables.scss

Basic

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward
# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward

Stripes

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward

  ...

Bordered rows

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward

  ...

Bordered cells

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward

  ...

Condensed

# Name Posistion
11 Mesut Özil Midfielder
10 Jack Wilshere Midfielder
12 Olivier Giroud Forward

  ...

Responsive

To make any table responsive, wrap the

in a
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
...

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 .

...
.someClass { %clearfix; }

Align

You can add these classes to a tag or use .

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.

...

...

...

...

:

...

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

Floats

You can add these classes to a tag or use .

Float left
Float center must have width set.
Float right
...
...
...

Spacing

You can add these classes to a tag or use .

.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 .

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

Visual

You can add these classes to a tag or use .

.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;

   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.



.example-btn {
   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.

.example-gradient { 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 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.

 icon($icon) {
   %icon;
   %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

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

Examples

Subway
Subway
.subway-sign { width: 8rem; padding: $spacing; background-color: $color-grey-dark; text-align: center; color: #fff; .subway-sign__icon { icon(subway); display: block; font-size: 3rem; margin-bottom: .5rem; } .subway-sign__text { font-family: $font-secondary; font-size: 1.25rem; } }


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