David Dias thedaviddias

Yeoman + Compass Sprites

Setup

generator-webapp has support for compass out of the box. However, in order to use one of my favorite features of it — sprites and the image_url helper — you have to make some adjustments to the Gruntfile.

Let's assume you use a SASS stylesheet like this one:

@import "design/*.png"

Template Components

Used to provide structural templates.

Pattern

t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name

by Dale Sande

CSS has had a long and sordid past. A developer never sets out with the goal of making a complete and total mess of things. Their intention is not to build something that is practically illegible, impractical to maintain and is limited in scale. But somehow, this is where many inevitably end up. Luckily, all is not lost. With some simple strategies, organizational methods and out-of-the box tools, we can really help get that junk-drawer inline.

For many of us getting started with Sass, at one time or another have created a junk-drawer of files. For most, this was a rookie mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

Large CSS files and increased complexity

CSS started out with very simple intentions, but as [tableless web design][1.1] began to really take a foothold, o

	/*
	* Normalized hide address bar for iOS & Android
	* (c) Scott Jehl, scottjehl.com
	* MIT License
	*/
	(function( win ){
	var doc = win.document;

	// If there's a hash, or addEventListener is undefined, stop here
	if( !location.hash && win.addEventListener ){

	@import "compass/utilities/sprites/base";

	// General Sprite Defaults
	// You can override them before you import this file.
	$emblem-sprite-base-class: ".emblem-sprite" !default;
	$emblem-sprite-dimensions: false !default;
	$emblem-position: 0% !default;
	$emblem-spacing: 0 !default;
	$emblem-repeat: no-repeat !default;

	if ENV['RAILS_ENV'] && !defined?(RAILS_ENV)
	Object.const_set("RAILS_ENV", ENV['RAILS_ENV'])
	end

	# Require any additional compass plugins here.
	require 'grid-coordinates'
	require 'compass-fancybox-plugin'
	require 'susy'

	project_type = :rails

	// everyone's new favorite closure pattern:
	(function(window,document,undefined){ ... })(this,this.document);

	// when minified:
	(function(w,d,u){ ... })(this,this.document);

	// which means all uses of window/document/undefined inside the closure
	// will be single-lettered, so big gains in minification.

	// it also will speed up scope chain traversal a tiny tiny little bit.

	Handlebars.registerHelper('loc', function(property, fn) {
	var str;
	// we are bound to a value, it is now the context
	if (fn.contexts && typeof fn.contexts[0] === 'string') {
	str = fn.contexts[0];

	// Convention, start all localization keys with _
	} else if (property[0] === '_') {
	str = property;

	Handlebars.registerHelper('l10n', function(keyword) {
	var lang = (navigator.language) ? navigator.language : navigator.userLanguage;

	// pick the right dictionary
	var locale = window.locale[lang] \|\| window.locale['en-US'];

	// loop through all the key hierarchy (if any)
	var target = locale;
	var key = keyword.split(".");
	for (i in key){

	require 'growl_notify'

	GrowlNotify.config do \|config\|
	config.notifications = ["Compass Application"]
	config.default_notifications = ["Compass Application"]
	config.application_name = "My Application"
	end

	http_path = '/'
	css_dir = 'public/assets/stylesheets'