AndrewJHart/custom.styl

## custom.styl
@import 'jeet'

edit()

section
    center()
    background red
article
    col(2/4, offset: 1/4)
    background orange
    img
        col(1/2 3/4, cycle: 2)
aside
    col(1/4)
    background pink
    a
        display block

// Mobile
bp()
article
    shift(1/4)
aside
    shift(-3/4)
endbp()

## index.html
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/custom.css">
        <!--[if lt IE 9]><script src="js/vendor/selectivizr-1.0.2.min.js"></script><![endif]-->
        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 9]>
            <div class="chromeframe"><p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" target="_blank">activate Google Chrome Frame</a> to improve your experience.</p></div>
        <![endif]-->


        <section class="cf">
            <article>
                <header>Hello Jeet</header>
                <div class="cf">
                    <img src="http://placekitten.com/400/250" alt="">
                    <img src="http://placekitten.com/400/250" alt="">
                    <img src="http://placekitten.com/400/250" alt="">
                    <img src="http://placekitten.com/400/250" alt="">
                    <img src="http://placekitten.com/400/250" alt="">
                    <img src="http://placekitten.com/400/250" alt="">
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, in, iste possimus tempore facere aliquam repellat ipsum nisi animi temporibus facilis totam veritatis incidunt ullam repudiandae odit explicabo repellendus ut.
                </p>
            </article>
            <aside>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
                <a href="#">Link</a>
            </aside>
        </section>


        <!--[if lt IE 9]>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
        <![endif]-->
        <!--[if gt IE 8]><!-->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-2.0.3.min.js"><\/script>')</script>
        <!--<![endif]-->
        <script src="js/vendor/jquery.placeholder.min.js"></script>
        <script>
            $(function(){
                $('input, textarea').placeholder();
                $('.chromeframe').on('click', function() {
                    $(this).slideUp('fast');
                });
            });
        </script>
    </body>
</html>

## jeet.styl
@import 'axis'

/*  Syntax quick reference
 *  ----------------------
 *  gutter[g] = 1
 *  center(max_width = 1410px)
 *  column[col](ratios = 1, offset = false)
 *  span(ratio = 1, offset = false)
 *  shift(ratios = 0)
 *  unshift()
 *  bp(w = 705px, mobile_first = false[mf])
 *  endbp()
 *  stack(padding = 0, align = center[c, left, l, right, r])
 *  edit()
 *  cf()
 */

// Settings
gutter = 3
parent_first = false
layout_direction = LTR

// Mixins
center(max_width = 1410px)
    @extends $cf
    max-width max_width
    float none
    display block
    margin-right auto
    margin-left auto

column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)
    side = get_layout_direction()
    widths = get_column(ratios)
    margin_l = margin_last = 0
    margin_r = widths[1]
    unless offset == 0
        edge = offset[1]
        edge is true ? gutter_mult = 1 : gutter_mult = 2
        offset = offset[0]
        if offset < 0
            offset *= -1
            offset = get_column(offset, widths[1])[0]
            margin_l = offset + widths[1] * gutter_mult
        else
            offset = get_column(offset, widths[1])[0]
            margin_r = margin_last = offset + widths[1] * gutter_mult
    @extends $cf
    float side
    width (widths[0])%
    margin-{side} (margin_l)%
    margin-{opposite-position(side)} (margin_r)%
    if uncycle != 0
        &:nth-child({uncycle}n)
            margin-{opposite-position(side)} (margin_r)%
            float side
    if cycle != 0
        &:nth-child({cycle}n)
            margin-{opposite-position(side)} (margin_last)%
            float opposite-position(side)
    else
        &:last-child
            margin-{opposite-position(side)} (margin_last)%

span(ratio = 1, offset = 0)
    side = get_layout_direction()
    width = get_span(ratio)
    margin_l = margin_r = 0
    unless offset == 0
        if offset < 0
            offset *= -1
            margin_l = get_span(offset)
        else
            margin_r = get_span(offset)
    @extends $cf
    float side
    width (width)%
    margin-{side} (margin_l)%
    margin-{opposite-position(side)} (margin_r)%

shift(ratios = 0, col_or_span = column)
    side = get_layout_direction()
    if side == right
        ratios = replace_nth(ratios, 0, ratios[0] * -1)
    if col_or_span == column or col_or_span == col or col_or_span == c
        widths = get_column(ratios)
        translate = widths[0] + widths[1]
    else
        translate = get_span(ratios)
    position relative
    left (translate)%

unshift()
    position static
    left 0

bp(w = 705px, mobile_first = false)
    if (mobile_first == mf || mobile_first == true)
        unquote("@media all and (min-width: " + w + ") {")
    else
        unquote("@media all and (max-width: " + w + ") {")
endbp()
    unquote("}")

stack(padding = 0, align = center)
    side = get_layout_direction()
    display block
    float none
    width 100%
    margin-left auto
    margin-right auto
    if padding != 0
        padding-left padding
        padding-right padding
    &:first-child
        margin-{side} auto
    &:last-child
        margin-{opposite-position(side)} auto
    if (align == center) or (align == c)
        text-align center
    if (align == l) or (align == l)
        text-align left
    if (align == r) or (align == r)
        text-align right

edit()
    body *
        transition 200ms ease all
        background rgba(#000, .15)

// Grid utilities
get_span(ratio = 1)
    return ratio * 100

get_column(ratios = 1, g = gutter)
    ratios = reverse(ratios) unless parent_first is true
    w = 100
    for ratio in ratios
        g = g / w * 100
        w = 100 * ratio - g + ratio * g
    return w g

get_layout_direction()
    layout_direction == RTL ? result = right : result = left
    return result

replace_nth(list, index, value)
    result = ()
    index = length(list) + index if index < 0
    for i in (0..(length(list) - 1))
        if i == index
            append(result, value)
        else
            append(result, list[i])
    return result

reverse(list)
    result = ()
    for item in list
        prepend(result, item)
    return result

// Function aliases
g = gutter
col = column
cf = clearfix

// Placeholders
$cf
    cf()

// Resets and defaults
global-reset()
base()
*
    box-sizing(border-box)
    *behavior url(js/vendor/boxsizing.htc)
html
    overflow-y scroll
    overflow-x hidden
body
    @extends $cf
    width 100%
img, video, audio, embed, object, input, iframe
    max-width 100%
.cf
    @extends $cf
.chromeframe
    width 100%
    background #fff
    background linear-gradient(top, #fff, #eee)
    border-bottom 1px solid #ddd
    box-shadow inset 0 -1px 0 #fff
    text-shadow 0 1px 0 #fff
    p
        center()
        padding 15px 0
        margin-top 0
        margin-bottom 0
        text-align center
        margin-bottom 0
        a
            color #3a95fb
	@import 'jeet'

	edit()

	section
	center()
	background red
	article
	col(2/4, offset: 1/4)
	background orange
	img
	col(1/2 3/4, cycle: 2)
	aside
	col(1/4)
	background pink
	a
	display block

	// Mobile
	bp()
	article
	shift(1/4)
	aside
	shift(-3/4)
	endbp()
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="css/custom.css">
	<!--[if lt IE 9]><script src="js/vendor/selectivizr-1.0.2.min.js"></script><![endif]-->
	<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
	</head>
	<body>
	<!--[if lt IE 9]>
	<div class="chromeframe"><p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" target="_blank">activate Google Chrome Frame</a> to improve your experience.</p></div>
	<![endif]-->


	<section class="cf">
	<article>
	<header>Hello Jeet</header>
	<div class="cf">
	<img src="http://placekitten.com/400/250" alt="">
	<img src="http://placekitten.com/400/250" alt="">
	<img src="http://placekitten.com/400/250" alt="">
	<img src="http://placekitten.com/400/250" alt="">
	<img src="http://placekitten.com/400/250" alt="">
	<img src="http://placekitten.com/400/250" alt="">
	</div>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, in, iste possimus tempore facere aliquam repellat ipsum nisi animi temporibus facilis totam veritatis incidunt ullam repudiandae odit explicabo repellendus ut.
	</p>
	</article>
	<aside>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	</aside>
	</section>


	<!--[if lt IE 9]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
	<![endif]-->
	<!--[if gt IE 8]><!-->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-2.0.3.min.js"><\/script>')</script>
	<!--<![endif]-->
	<script src="js/vendor/jquery.placeholder.min.js"></script>
	<script>
	$(function(){
	$('input, textarea').placeholder();
	$('.chromeframe').on('click', function() {
	$(this).slideUp('fast');
	});
	});
	</script>
	</body>
	</html>
	@import 'axis'

	/* Syntax quick reference
	* ----------------------
	* gutter[g] = 1
	* center(max_width = 1410px)
	* column[col](ratios = 1, offset = false)
	* span(ratio = 1, offset = false)
	* shift(ratios = 0)
	* unshift()
	* bp(w = 705px, mobile_first = false[mf])
	* endbp()
	* stack(padding = 0, align = center[c, left, l, right, r])
	* edit()
	* cf()
	*/

	// Settings
	gutter = 3
	parent_first = false
	layout_direction = LTR

	// Mixins
	center(max_width = 1410px)
	@extends $cf
	max-width max_width
	float none
	display block
	margin-right auto
	margin-left auto

	column(ratios = 1, offset = 0, cycle = 0, uncycle = 0)
	side = get_layout_direction()
	widths = get_column(ratios)
	margin_l = margin_last = 0
	margin_r = widths[1]
	unless offset == 0
	edge = offset[1]
	edge is true ? gutter_mult = 1 : gutter_mult = 2
	offset = offset[0]
	if offset < 0
	offset *= -1
	offset = get_column(offset, widths[1])[0]
	margin_l = offset + widths[1] * gutter_mult
	else
	offset = get_column(offset, widths[1])[0]
	margin_r = margin_last = offset + widths[1] * gutter_mult
	@extends $cf
	float side
	width (widths[0])%
	margin-{side} (margin_l)%
	margin-{opposite-position(side)} (margin_r)%
	if uncycle != 0
	&:nth-child({uncycle}n)
	margin-{opposite-position(side)} (margin_r)%
	float side
	if cycle != 0
	&:nth-child({cycle}n)
	margin-{opposite-position(side)} (margin_last)%
	float opposite-position(side)
	else
	&:last-child
	margin-{opposite-position(side)} (margin_last)%

	span(ratio = 1, offset = 0)
	side = get_layout_direction()
	width = get_span(ratio)
	margin_l = margin_r = 0
	unless offset == 0
	if offset < 0
	offset *= -1
	margin_l = get_span(offset)
	else
	margin_r = get_span(offset)
	@extends $cf
	float side
	width (width)%
	margin-{side} (margin_l)%
	margin-{opposite-position(side)} (margin_r)%

	shift(ratios = 0, col_or_span = column)
	side = get_layout_direction()
	if side == right
	ratios = replace_nth(ratios, 0, ratios[0] * -1)
	if col_or_span == column or col_or_span == col or col_or_span == c
	widths = get_column(ratios)
	translate = widths[0] + widths[1]
	else
	translate = get_span(ratios)
	position relative
	left (translate)%

	unshift()
	position static
	left 0

	bp(w = 705px, mobile_first = false)
	if (mobile_first == mf \|\| mobile_first == true)
	unquote("@media all and (min-width: " + w + ") {")
	else
	unquote("@media all and (max-width: " + w + ") {")
	endbp()
	unquote("}")

	stack(padding = 0, align = center)
	side = get_layout_direction()
	display block
	float none
	width 100%
	margin-left auto
	margin-right auto
	if padding != 0
	padding-left padding
	padding-right padding
	&:first-child
	margin-{side} auto
	&:last-child
	margin-{opposite-position(side)} auto
	if (align == center) or (align == c)
	text-align center
	if (align == l) or (align == l)
	text-align left
	if (align == r) or (align == r)
	text-align right

	edit()
	body *
	transition 200ms ease all
	background rgba(#000, .15)

	// Grid utilities
	get_span(ratio = 1)
	return ratio * 100

	get_column(ratios = 1, g = gutter)
	ratios = reverse(ratios) unless parent_first is true
	w = 100
	for ratio in ratios
	g = g / w * 100
	w = 100 * ratio - g + ratio * g
	return w g

	get_layout_direction()
	layout_direction == RTL ? result = right : result = left
	return result

	replace_nth(list, index, value)
	result = ()
	index = length(list) + index if index < 0
	for i in (0..(length(list) - 1))
	if i == index
	append(result, value)
	else
	append(result, list[i])
	return result

	reverse(list)
	result = ()
	for item in list
	prepend(result, item)
	return result

	// Function aliases
	g = gutter
	col = column
	cf = clearfix

	// Placeholders
	$cf
	cf()

	// Resets and defaults
	global-reset()
	base()
	*
	box-sizing(border-box)
	*behavior url(js/vendor/boxsizing.htc)
	html
	overflow-y scroll
	overflow-x hidden
	body
	@extends $cf
	width 100%
	img, video, audio, embed, object, input, iframe
	max-width 100%
	.cf
	@extends $cf
	.chromeframe
	width 100%
	background #fff
	background linear-gradient(top, #fff, #eee)
	border-bottom 1px solid #ddd
	box-shadow inset 0 -1px 0 #fff
	text-shadow 0 1px 0 #fff
	p
	center()
	padding 15px 0
	margin-top 0
	margin-bottom 0
	text-align center
	margin-bottom 0
	a
	color #3a95fb