gavinmcfarland

Apply a grid layout on any parent element.

<div class="grid(4)">
  <li>Child</li>
  <li>Child</li>
  <li>Child</li>
  <li>Child</li>
</div>

gavinmcfarland

# Create layer 1
layer1 = new Layer
	x: 200
	y: 200
	width: 100
	height: 100
	
# Add your required states
layer1.states.add
	second: {y:100, scale:0.6, rotationZ:100}

gavinmcfarland

# Draw background
myBackground = new Layer
	width: 320
	height: 580
	backgroundColor: utils.randomColor(0.5)

# Turn off CSS transforms
myBackground.style = {"-webkit-transform":"none"}

# Create toggling layer

gavinmcfarland

Creating a layer

layer = new Layer
  width: 100
  height: 100

Animating a layer

gavinmcfarland

//////////////////////////////////////////////////////////////
//  Dark                                                    //
//////////////////////////////////////////////////////////////

// Checks to see if a colour is dark. The threshold defaults
// to 20% if not set.

// Usage: dark($color, [$threshold])

@function dark($color, $threshold: 20%) {

gavinmcfarland

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm

gavinmcfarland

For example

.example
    color = rgb(247,247,247)

    background-color: color
    overflow: hidden 150px

gavinmcfarland

@function contrast-compliance($background-color, $foreground-color) {
    // Colours
	$bc: $background-color;
	$fc: $foreground-color;

	// Thresholds
	$brightness-threshold: 125;
	$color-threshold: 500;

	$fr: red($fc);

gavinmcfarland

@function sum($list) {
    $total: 0;
    // Check it's the first item in the list and set it as the total
    @each $item in $list {
        @if $item == nth($list, 1) {
            $total: $item;
        }
        // For each item in the list, add it to the total
        $total: $total + $item;
    }

gavinmcfarland

@mixin grid($columns, $gutter) {
  @if $columns > 1 {
		$fWidth: (1/$columns * 100%) - ($gutter * ($columns - 1) / $columns);
	
		@include clearfix;
		
		> li {
			width: #{$fWidth};
			box-sizing: border-box;
			float: left;