RichardBray / Muffin
Labels
A design focused front-end web development template using SASS and Jekyll.
Muffin takes advantage of common practices from Bootstrap, Boilerplate, inuit.css and other libaries to let you get straight into coding straight away.
Full site here
Different Flavours
###Apple
Good for single page websites.
Contains:
- Twitter Botstrap
- Font Awesome
- Color Me SASS
###Blueberry
Simple Jekyll setup for multipage site.
Contains:
- Everything in Apple
- Jekyll file layout
###Chocolate Chip
For the developer interested in a fast multipage site.
Contains:
- Everything in Blueberry
- YUI compression for CSS and Javascript files
- .htaccess file for caching and gzipping
- SVG plugin for Jekyll
- SVGeezy.js for svg fallback
Getting Started
If you're a designer who avoids the terminal/command line at all costs and has no interest in opening it up, then this isn't really for you. Joke. Don't worry it's like two commands, you'll be fine.
-
Install Ruby on Rails. If you're on mac or windows just download RailsInstaller. That does all the hard work.
-
If you're using Apple do step 4, if not, then jump straight to step 5.
-
cd to your directory.
-
Install the SASS gem.
Annnnnnd, you're done. Dont forget to watch your SASS if you want to make changes.
-
Run 'bundle' and hit Enter.
-
Run 'jekyll serve --watch' or 'jekyll serve -w' to make changes to the html.
And I think that's it. Enjoy.
Running SASS
To watch your sass just run
$ sh watch.sh
If you files are in a different directory you'll have to edit watch.sh accordingly.
sass --watch [where your scss file is].scss:[where you want your css to go].css --style compressed
Using Chocolate Chip
-
Download & Install node.js. It's as simple as running an executable on Windows and Mac.
-
Install Gulp
npm install -g gulp
-
cd into your directory and install all the dependencies
npm install
-
Unfortunately you'll need two terminal/command line windows or tabs to get this going from here on
-
In one of the windows (to watch Jekyll) run
jekyll serve --watch
-
In the second one (to watch for CSS and JS changes) run
gulp watch
-
And that should be it. Let me know if you run into any issues
License
Muffin is licensed under the ☺ license.
You, the licensee, are hereby granted free usage in both personal and commerical environments, without any obligation of attribution or payment (monetary or otherwise). The licensee is free to use, copy, modify, publish, distribute, sublicence, and/or merchandise the work, subject to the licensee inflecting a positive message unto someone. This includes (but is not limited to): smiling, being nice, saying “thank you”, assisting other persons, or any similar actions percolating the given concept.
The above copyright notice serves as a permissions notice also, and may optionally be included in copies or portions of the work.
The work is provided “as is”, without warranty or support, express or implied. The author(s) are not liable for any damages, misuse, or other claim, whether from or as a consequence of usage of the given work.
Todos
- Get gulp livereload to work in chocolate chip