Foundation self declares to be the most advanced responsive front-end framework in the world.
First, make sure you have Ruby and the Jekyll gem installed (gem install jekyll
).
Then, just download the .zip or
git clone git@github.com:rememberlenny/Jekyll-Foundation-SASS.git
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
---
etc...
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="https://github.com/rememberlenny/Jekyll-Foundation-SASS/raw/master/something.jpg" alt="blah">
<img src="https://github.com/rememberlenny/Jekyll-Foundation-SASS/raw/master/somethingelse.jpg" alt="yeah">
<img src="https://github.com/rememberlenny/Jekyll-Foundation-SASS/raw/master/foo.jpg" alt="bar">
</div>
For more information see Zurb's Foundation documentation.
Have Fun and make some cool websites.
Comments, improvements, and suitcases filled with money can be sent to lenny@atriangle.com
-Lenny
Thanks to Dave Cohen for making jekyll-foundation-base:.