Skip to content

Instantly share code, notes, and snippets.

@AndrewJHart

AndrewJHart/custom.styl

Created September 23, 2013 17:56
Show Gist options
  • Save AndrewJHart/6674418 to your computer and use it in GitHub Desktop.
Save AndrewJHart/6674418 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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()
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment