stype
Muffin
A design focused front-end web template
using SASS, Jekyll and Gulp.
Pick Your Flavour
Pick a package based on the type of site you want to design.
Apple
  • Twitter Bootstrap
  • Font Awesome
  • Color Me SASS
  •  
Download
Blueberry
  • Everything in Apple
  • Jekyll file layout
  • SVG plugin for Jekyll
  •  
Download
Chocolate Chip
  • Everything in Blueberry
  • Requires Node.js
  • CSS and JS minification with Gulp
  • SVGeezy.js
Download
Main Features
Here are just of the main features that come with Muffin
1. Colour Variables (via Color Me SASS)
body{
	background-color: $orangeDark;
	color: $whiteFloral;
}
body{
	background-color: #993D00;
	color: #fffaf0;
}
2. SVG Icons (via Font Awesome)
Say Cheese <i class="icon-camera-retro"></i>
Say Cheese <i style="font-size:5em" class="icon-camera-retro"></i>
Say Cheese 
Say Cheese 
3. SASS media queries (from this article)
pre{
	font-size: 1.5em;
	
	@include respond-to(medbig) { 
		font-size: 1em;
	}
}
pre{
	font-size: 1.5em;
}
@media only screen and (max-width: 60em){
	pre{
		font-size: 1em;
	}
}

4. HTML Includes (via Jekyll)
<div class="about-page">
	{% include bluth_ipsum.html %}
</div>
<div class="about-page">
	<p>
	Let's make Ann the backup, okay? Very good way to think about her, as a backup. George Bush doesn't care about black puppets. And I am rock steady. No more dizzies.
	<p>
	I'm a scholar. I enjoy scholarly pursuits. Suddenly playing with yourself is a scholarly pursuit? I'd rather ...
	text from bluthipsum.com
</div>

Quick Install Guide
How to quickly get this bad-boy up and running.
1. Install Ruby on Rails
If you're on a Windows on a Mac, you can just use Railsinstaller and bam! You've got ruby on rails with a bunch of other cool stuff.
2. Download Muffin
Download the Muffin flavour you want to use, place it in an easily accessable directory and unzip it.
3. Install the gems
Use cd to get to where you unzipped Muffin. Type 'bundle' and hit enter.
4. And you're good to go
Add your custom sass in 'css/sass/custom/_style.scss', then type 'sh watch.sh' to watch it. In a new window/tab type 'jekyll serve -w' to watch your site.
Explanation Videos
If you're not a reading person, check out these short videos. FYI, they link to youtube.
Muffin SASS features video
1. Muffin SASS features
Muffin SASS features part 2 video
2. Muffin SASS features part 2
Jekyll tutorial - basic static blog using jekyll video
3. Jekyll tutorial - basic static blog using jekyll