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
To use this starter project, you'll need the following things installed on your machine.
$ gem install jekyll
$ npm install -g gulp
(mac users may need sudo)$ gem install bourbon
(version 5.0)$ gem install neat
(version 2.0)$ gem install bitters
npm install
.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
You can find an example of the grid setup by running gulp
and going to the Grid System page.
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;
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)
The below chart breaks down the column structure for desktop:
#Columns | Class Name |
---|---|
1/1 | .full-column |
1/2 | .half-column |
1/3 | .one-thirds-column |
2/3 | .two-thirds-column |
1/4 | .fourth-column |
1/6 | .sixth-column |
5/6 | .five-sixth-column |
1/12 | .twelfth-column |
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>
The below chart breaks down the column structure for desktop:
#Columns | Class Name |
---|---|
1/1 | .full-column-full |
1/2 | .half-column-full |
1/3 | .one-thirds-column-full |
2/3 | .two-thirds-column-full |
1/4 | .fourth-column-full |
1/6 | .sixth-column-full |
1/12 | .twelfth-column-full |
To use a grid with 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>
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>
You can find an examples of the typography styles by running gulp
and going to the Typography page.