Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

Jekyll + Foundation SCSS

Foundation self declares to be the most advanced responsive front-end framework in the world.

What's Included:

  • all the directories that Jekyll needs to compile your static site
  • jQuery
  • the entire foundation framework
  • a default html5 template in _layouts
  • a default nav bar under _includes
  • default index and 404 page, along with 3 other empty pages

How To 'Install' It

First, make sure you have Ruby and the Jekyll gem installed (gem install jekyll).

Then, just download the .zip or

git clone

How To 'Run' It

Serving Jekyll To set up a local development server use the command jekyll serve. The files from _site will be served to http://localhost:4000 by default.

SASS -> CSS To compile the SASS files into CSS, run compass watch. Files from sass/* will render to _source/assets/css.

Preparing for build After you have compiled your SASS with Compass, its time build. Build for deploymentwith the command jekyll build. The files will render to _site.



The easiest way is to use the default layout (HTML5 Boilerplate -- _layouts/default.html). To use a layout, put this at the top of your page:

layout: default
title: YourPageTitleHere

Page-Specific HTML Content



If you're planning on reusing a few snippets of code on several pages, DRY (Don't Repeat Yourself)! Create an include HTML file and put it in the _includes/ directory. Kind of like a Rails helper.

To call an include in a page, just write

{% include yourincludename.html %}

For an example of this, see _layouts/default.html -- I include the nav.html snippet on the default layout, meaning it displays on every page that uses that layout.


Foundation's Orbit code is ready to plug into your website; the javascript to trigger it can be found in _includes/orbit.html -- just include that on the page where you want a slideshow, and then add a div#slideshow with image tags inside:

<div id="slideshow">
	<img src="something.jpg" alt="blah">
	<img src="somethingelse.jpg" alt="yeah">
	<img src="foo.jpg" alt="bar">

For more information see Zurb's Foundation documentation.

That's It!

Have Fun and make some cool websites.

Comments, improvements, and suitcases filled with money can be sent to



Thanks to Dave Cohen for making jekyll-foundation-base:.


Jekyll and Foundation for rapid ideation



No releases published


You can’t perform that action at this time.