kwaledesign

<!-- 
* video for everyone markup 
* http://camendesign.com/code/video_for_everybody
* This is all done without JavaScript and requires two video encodes, one Ogg file, and one MP4 file. WebM can optionally be added.
-->

<video width="640" height="360" controls>
  <source src="__VIDEO__.MP4"  type="video/mp4" />

kwaledesign

// Mixin that generates both a regular and retina sprite (using the Compass Sprite Helpers) and returns the appropriate declarations and media queries.
//
// $folder - The name of the folder that contains the icons to sprite.
// $width  - The width of an individual icon. Defaults to the width of the sprite.
// $height - The height of an individual icon. Defaults to the same as the width.
//
// No styleguide reference.

@mixin retina-sprite($folder, $width: image-width(sprite-path($sprites)), $height: $width) {
  $sprites: sprite-map("icons/#{$folder}/*.png"); // Generates a sprite containing every icon in the supplied folder.

kwaledesign

#!/bin/bash

## v1.0.6
## this script will gernerate css stats

### example output

# CSS STATS
# ----------
# Floats:  132

kwaledesign

/* ==== legacy Archetype heading properties...remove these!!!
h1 {
  font-size: $base-font-size * 2.25;          font-size: 2.25rem;
  line-height: $base-line-height * 2;         line-height: 3rem; 
  margin: $base-line-height 0;                margin: 1.5rem 0; 
}

h2 {
  font-size: $base-font-size * 2;             font-size: 2rem;
  line-height: $base-line-height * 1.5;       line-height: 2.25rem; 

kwaledesign

/**********************************************/
/*
/* Solarized Dark Skin by Mark Osborne - 2011
/*
/* Based on IR_Black Skin by Ben Truyman:
/* https://gist.github.com/1245727
/*
/* and Todd Werth's IR_Black:
/* http://blog.toddwerth.com/entries/2
/*

kwaledesign

$ brew tap homebrew/dupes

check to see that vim.rb is installed in: /usr/local/Library/Taps/homebrew-dupes/ 

if so:

$ brew install homebrew/dupes/vim

note: very possible that you'll encounter an error here, (i did), in which case:

kwaledesign

/**
 * Widths
 * 
 * Intrisic and proportional widths to be extended to a grid object
 *
 */


/**
 * Intrinsic widths

kwaledesign

/**
 * Clearfix
 * 
 */


/**
 * Modern Clearfix
 *
 * no legacy support, but works well for modern browsers and border-box

kwaledesign

/**
 * hiDPI Mixin
 *
 * http://css-tricks.com/snippets/css/retina-display-media-query/
 *
 * $resolution: 1.25, 1.3, 1.5, 2;
 */

@mixin img-rez($resolution) {
  @if $resolution == 1.25 {

kwaledesign

/* button Skin Variables: */

/**
 * Default Button and States
 */
$btn__default--color1:                                #B3B3B3;
$btn__default--color2:                                darken($btn__default--color1, 10%);
$btn__default--text-color:                            $white;
$btn__default--text-shadow:                           darken($btn__default--color1, 20%) 0 -1px 0;
$btn__default--border:                                1px solid darken($btn__default--color1, 5%);