Anderson Juhasc Anderson-Juhasc

Template Components

Used to provide structural templates.

Pattern

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

	// https://gist.github.com/gists/2879137
	// this is for Compass 0.12

	/* put this file in your assets/stylesheets/ folder
	*
	* Example main.scss:
	* @import "compass";
	* @import "icons/*.png";
	* @include all-icons-sprites;
	*

	$sprites: sprite-map("sprites/*.png");
	$sprites-retina: sprite-map("sprites-retina/*.png");

	@mixin sprite-background($name) {
	background-image: sprite-url($sprites);
	background-position: sprite-position($sprites, $name);
	background-repeat: no-repeat;
	display: block;
	height: image-height(sprite-file($sprites, $name));
	width: image-width(sprite-file($sprites, $name));

	$sprites: sprite-map("sprites/*.png");
	$sprites-retina: sprite-map("sprites-retina/*.png");

	@mixin sprite-background($name) {
	background-image: sprite-url($sprites);
	background-position: sprite-position($sprites, $name);
	background-repeat: no-repeat;
	display: block;
	height: image-height(sprite-file($sprites, $name));
	width: image-width(sprite-file($sprites, $name));

	@import "_mixins.scss";

	@mixin app($dpi) {

	header {
	position: relative;

	header .logo {
	// Center in header
	@include sprt-box-centered($dpi, logo);

	@mixin sprite-background($name, $folder, $sprite-width) {
	$sprites: sprite-map("#{$folder}/*.png");
	$sprites-retina: sprite-map("#{$folder}@2x/*.png");

	background-image: sprite-url($sprites);
	background-position: sprite-position($sprites, $name);
	background-repeat: no-repeat;
	display: inline-block;
	height: image-height(sprite-file($sprites, $name));
	width: image-width(sprite-file($sprites, $name));

	SMACSS May 18

	Part 1

	- Don't use .button.large ... no subclassing for size or color definitions, try to use .button-large and sibling classes instead
	- Naming convention clarifies intent (you should be able to read semantic HTML or CSS and know what it does)
	- Create an internal style guide that the team refers to (!) - relates to docs efforts ongoing

	State: active and default states; .tab and .is-tab-active (indication that JS will be used) - isolate JS classes so that you only have to make changes to the CSS
	- is- prefix indicates likelihood of JS dependency

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<!-- saved from url=(0068)http://24ways.org/examples/compose-to-a-vertical-rhythm/example.html -->
	<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<TITLE>Compose a Vertical Rhythm example</TITLE>

	<LINK rel="stylesheet" type="text/css" href="sassy.css" title="sassy">
	<LINK rel="alternate stylesheet" type="text/css" href="original.css" title="original">
	</HEAD><BODY>
	<H1>Aboard Minerva off the Coast of New England</H1>