RICK FESSLER rfessler

Because all good things need to be duplicated ...

Yeoman uses a Grunt.js file for its settings, so installing Compass frameworks is a little bit different…

Any Compass-based project I've worked on had a config.rb where you set your Compass options (or in the case of Rails, config/compass.rb). In a new, bare-bones Yeoman project however, there's no such file. Instead, Yeoman uses Grunt to set the options for the Compass compiler.

How Yeoman Sets Compass Options

The default settings for Compass looks like this:

Sublime Text 2 – Useful Shortcuts (PC)

Loosely ordered with the commands I use most towards the top. Sublime also offer full documentation.

Editing

Ctrl+C	copy current line (if no selection)
Ctrl+X	cut current line (if no selection)
Ctrl+⇧+K	delete line
Ctrl+↩	insert line after

	// Define your plugins here, make sure you have `gulp-util`...
	var gutil = require('gulp-util');

	/**
	* Define dev CLI flag
	* Run `gulp --dev`
	*/
	var isDev = gutil.env.dev;

	gulp.task('scripts', function() {

	/*******************************************************************************
	1. DEPENDENCIES
	*******************************************************************************/

	var gulp = require('gulp'); // gulp core
	sass = require('gulp-sass'), // sass compiler
	uglify = require('gulp-uglify'), // uglifies the js
	jshint = require('gulp-jshint'), // check if js is ok
	rename = require("gulp-rename"); // rename files
	concat = require('gulp-concat'), // concatinate js

	/*!
	* gulp
	* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
	*/

	// Load plugins
	var gulp = require('gulp'),
	sass = require('gulp-ruby-sass'),
	autoprefixer = require('gulp-autoprefixer'),
	cssnano = require('gulp-cssnano'),

	<h1>Don't Overthink It Grids <em>(while we wait for flexbox)</em></h1>

	<div class="grid">
	<div class="col-2-3">
	<div class="module">
	<h3>2/3</h3>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</div>
	</div>
	<div class="col-1-3">

	<form name="myForm">
	<fieldset>
	<legend>My Form</legend>
	First Name: <input class="required" type="text" id="firstName" name="firstName"> * required<br>
	Last Name: <input class="required" type="text" id="lastName" name="lastName"> * required
	</fieldset>
	<input type="submit">
	</form>