A Front-End SASS & Grunt framework.
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.
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 && bower install. Then running grunt in terminal will run Trigger's defaults plugins. To optimize your images, run grunt img in terminal.
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
I've added in a lot of regularly used jQuery to scripts.js.
- Date injection - For the footer's copyright
- ESC Key listener
- 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
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
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 is a mixin library for SASS. For a full list of Bourbons mixins take a look at the docs.
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);
}
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
If you have any ideas on how to improve this project please give me a shout on Twitter - @john_devlin.