Trigger

A Front-End SASS & Grunt framework.

Version: 0.6
Status: Stable

Contents

1. WTF?
2. Installation
3. File structure
4. JavaScript
5. SASS (SCSS)
6. To-dos
7. Feedback

WTF?

Trigger is a lightweight front-end SASS that uses Grunt to automatically combine and minify all of your JavaScript, optimise your images, and run SASS. Trigger comes with Bourbon and Bourbon Neat installed.

Installation

Trigger relies heavily on Grunt for a number of things. If you haven't used Grunt before, check out the get started guide.

To install the needed packages, please open Trigger in terminal and type npm install. Then running grunt in terminal will run Trigger's defaults plugins. To optimize your images, run grunt img in terminal.

File structure

Trigger/
│
├── development/
│   ├── css/
│   │   ├── includes/
│   │   └── base.scss
│   │
│   ├── js/
│   │   ├── libs/
│   │   └── scripts.js
│   │
│   └── img/
│       └──  highres.jpg/png/gif
│
├── css/
│   └── style.css
│
├── js/
│   └── production.min.js
│
├── img/
│   └── optimized.jpg/png/gif
│
└── index.html

JavaScript

I've added in a lot of regularly used jQuery to scripts.js.

• Date injection - For the footer's copyright
• ESC Key listener

Libraries

• jQuery 1.9.1

Plugins

• jQuery Smartresize - Debounced resize events for jQuery
• HTML5 Placeholder jQuery Plugin - Adding placeholder support for IE9 and below
• Selectivizr - Emulates CSS3 pseudo-classes in IE8 and below
• Modernizr - Y'all know what Modernizr does

Grunt.js

Trigger relays heavily on Grunt to automate tasks. If you haven't used Grunt before, check out their get started guide, or Chris Coyier's article on Grunt.

Trigger contains the following Grunt plugins:

• Concat - combines scripts.js, and all JS files inside of /libs/
• Uglify - minifies the combined JS file from above
• Imagemin - optimises your images
• Watch - watches your files, and tells Grunt when to make changes
• Sass - for turning your SASS into compressed CSS
• HTML Hint - flags up invalid HTML

SASS (SCSS)

Trigger uses SASS for all of it's style sheets. SASS is run and minified using Grunt's SASS plug-in.

Because SASS allows you to import multiple files without worrying about additional requests I have separated out a lot of the style sheets from base.scss for ease of maintenance. Here are some of the main SASS files, and what they do.

• base.scss - This is your base style sheet. It will contain most of your sites CSS. It also contains the @import calls to your other SASS files.
• _settings.scss - This is where you define your SASS variables, such as colours and typefaces.
• _grid-settings.scss - You define your sites width, number of columns, and media query breakpoints here.
• _typography.scss - Set your websites type. You can call in variables and mixins from _settings.scss to make the site easily maintainable.

Bourbon

Bourbon is a mixin library for SASS. For a full list of Bourbons mixins take a look at the docs.

Bourbon Neat

Bourbon Neat is an extension of Bourbon for semantic grid layouts. Trigger's grid settings can be found in assets/development/css/_grid-settings.scss. They can then be called by using Neat's mixins, eg:

article {
	@include span-columns(8);
}

And if you need to off set a column, you can use Neat's shift mixin, eg:

aside {
	@include shift(1);
	@include span-columns(3);
}

To-dos

This is (and probably always will be) a work in progress. Here are some features I'll be adding in.

• Bower
• Add Windows 8 icon

Feedback

If you have any ideas on how to improve this project please give me a shout on Twitter - @john_devlin.