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:-
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:
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.
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.
Links
This is the link style. Text hyperlinks are used for destinations, or moving from one page to another.
This is the link style. Text hyperlinks are used for destinations, or moving from one page to another.
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.
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
One
One nested
Two nested
One nested
Two nested
Two
Three
...
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
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Media reversed
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Flag default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Flag top
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
...
Flag bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
...
Flag reversed
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Flag reversed top
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
...
Flag reversed bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
...
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.
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
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.
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