jekyll-gulp-bourbon-neat

This project is an enhanced and built upon version of shakeyShane's jekyll-gulp-sass-browser-sync

A starter project including full setup for Jekyll, GulpJS, SASS, AJAX, AutoPrefixer, Bourbon, Neat & BrowserSync

System Preparation

To use this starter project, you'll need the following things installed on your machine.

1. Jekyll - $ gem install jekyll
2. NodeJS - use the installer.
3. GulpJS - $ npm install -g gulp (mac users may need sudo)
4. Bourbon - $ gem install bourbon (version 5.0)
5. Neat - $ gem install neat (version 2.0)
6. Bitters - $ gem install bitters

Local Installation

1. Clone this repo, or download it into a directory of your choice.
2. Inside the directory, run npm install.

Usage

development mode

This will give you file watching, browser synchronisation, auto-rebuild, CSS injecting etc etc.

$ gulp

jekyll

As this is just a Jekyll project, you can use any of the commands listed in their docs

Using Neat Grids

Official Neat Documentation

You can find an example of the grid setup by running gulp and going to the Grid System page.

Breakpoints

The grid layouts are setup using 5 breakpoints, with mobile being the default styling (these can be found in _scss/base/_variables.scss):

1. $small: 600px;
2. $medium: 900px;
3. $large: 1200px;
4. $larger: 1800px;
5. $super: 2400px;

Grid Structure

There are two main types of grids setup, grids with gutters and edge to edge grids. Within these structures, there are classes made to break the content into columns. (these can be found in _scss/base/layout.scss)

Grid with Gutters

The below chart breaks down the column structure for desktop:

To use a grid with gutters, your code would look something like this:

<section>
  <div class="one-thirds-column">
    <h4>.one-thirds-column</h4>
  </div>
  <div class="one-thirds-column">
    <h4>.one-thirds-column</h4>
  </div>
  <div class="one-thirds-column">
    <h4>.one-thirds-column</h4>
  </div>
</section>

Edge to Edge Grid

The below chart breaks down the column structure for desktop:

To use a grid without gutters, your code would look something like this:

<section>
  <div class="one-thirds-column-full">
    <h4>.one-thirds-column-full</h4>
  </div>
  <div class="one-thirds-column-full">
    <h4>.one-thirds-column-full</h4>
  </div>
  <div class="one-thirds-column-full">
    <h4>.one-thirds-column-full</h4>
  </div>
</section>

Centered Columns

Another class is able to center columns should you desire to have a centered layout. To do this, simply add the appropriate class name with -centered at the end as an addition class. For example:

<section>
  <div class="one-thirds-column">
    <h4>.one-thirds-column-full</h4>
  </div>
</section>

becomes

<section>
  <div class="one-thirds-column one-thirds-column-centered">
    <h4>.one-thirds-column .one-thirds-column-centered</h4>
  </div>
</section>

Typography

You can find an examples of the typography styles by running gulp and going to the Typography page.