cascade blueprint

application.scss

// ------------------------------------------
// modularise
// use doc blocks
// use inline commenting
// minify
// use BEM syntax
// aim to lock down UI layer
// ------------------------------------------

application.scss			// manifest file; minified source
	// @charset "utf-8";

	// @import compass/*;		// or bourbon?
	
	@if (foundation) {
		// @import app		// foundation manifest
	} else {
		// @import grid		// or susy? or neat? or semantic.gs?
		// @import purecss.io	// or other very lightweight framework?
	}
	

	// @import ui;

	// @import block-*;
	// @import page-*;
	// @import module-*;
	// @import state-*;
	// @import theme-*;
	// @import browser-ie*;
	// @import device-*;

// ------------------------------------------
// UI Layer
// ------------------------------------------
\ui
	_config.scss
	_functions.scss
	_helpers.scss
	_mixins.scss

	 \core
	 	\vendor
		  // ...

		\util			// framework will do most heavy lifting
		  _base.scss
		  _type.scss

		\component
		  _button.scss
		  _form.scss
		  _object-*.scss

	  \default || [theme-name]
		\vendor
		  // ...

		\util
		  _layout.scss

		\component
		  _button.scss
		  _button-group.scss
		  _object-*.scss

_ui.scss			// @import for UI layer - micro-cascade
  // @import core/vendor/* ...
  // @import core/util/* ...
  // @import core/component/* ...

  // @import default/vendor/* ...
  // @import default/util/* ...
  // @import default/component/* ...


// ------------------------------------------
// Themes / skins / overlays
// ------------------------------------------
_block-*.scss 		// header, footer, nav, catalog-item

_page-*.scss

_module-*.scss		// reusable widgets

_state-*.scss 		// State Modules/Composable Properties (non-agnostic dependencies)/ Event-driven CSS
					// ie .high-contrast:target + .content {}
					// ie body:not(.admin) .ctrl-panel {display:none}

_theme-*.scss		// a/b testing, shop-in-shop


// ------------------------------------------
// Browser / device
// ------------------------------------------
// included by html conditionals in head
_browser-ie*.scss


// ------------------------------------------
// Media
// ------------------------------------------
// device and browsers
// +960 = default
// 0-n = utilise cascade

device-0-959.scss		// smaller than standard 960
	// @media only screen and (max-width: 959px) {}
device-768-959.scss		//  tablet portrait to standard
	// @media only screen and (min-width: 768px) and (max-width: 959px) {}
device-0-768.scss		// all mobile sizes
	// @media only screen and (max-width: 767px) {}
device-480-767.scss 	// Mobile Landscape Size to Tablet Portrait
	//	@media only screen and (min-width: 480px) and (max-width: 767px) {}
device-0-479.scss		// Mobile Portrait Size to Mobile Landscape Size
	// @media only screen and (max-width: 479px) {}

// device targetted
_device-tablet-only.scss
_device-phone-only.scss


// ------------------------------------------
// Scratch
// ------------------------------------------
_scratch.scss	// This scratch file is for code to exist before it's refactored and put in it's place

// ------------------------------------------
// Debugging - development cascade only
// ------------------------------------------
diagnostic.scss
debug.scss // https://github.com/csswizardry/inuit.css/blob/master/generic/_debug.scss