Skip to content

Commit 4dd9379

Browse files
author
Jeff Escalante
committed
Merge pull request #197 from jenius/191
Folder organization / 2 new categories
2 parents d3df4ab + c339fd5 commit 4dd9379

36 files changed

+438
-416
lines changed

‎axis/images.styl‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
// Mixin: Bg
2+
//
3+
// Makes background (with image) declarations a little simpler. Use this with
4+
// the global img-path variable to set a base image path that you don't have to
5+
// keep repeating. Also sets 'no-repeat' as the default background-repeat.
6+
//
7+
// ex. bg: 'test.png'
8+
// ex. bg: 'other.jpg' center center repeat
9+
10+
bg(path, args...)
11+
args = unquote('no-repeat') unless args
12+
background: url(img-path path) args
13+
14+
// Mixin: bg-retina
15+
//
16+
// Make sure the image path is double the size, pass it halved numbers, and
17+
// you're in the retina-clear.
18+
//
19+
// ex. bg-retina: 'test.png' 200px 100px
20+
// ex. bg-retina: 'other.jpg' 100px 50px center center repeat
21+
22+
bg-retina(path, width, height, args...)
23+
args = unquote('no-repeat') unless args
24+
set_size = false
25+
26+
for arg in args
27+
if arg == 'no-repeat'
28+
set_size = true
29+
30+
background: url(img-path path) args
31+
background-size: width height
32+
33+
if set_size
34+
size: width height
35+
36+
// Mixin: Image Replace
37+
//
38+
// Image replacement. Pass it an image path and the image's dimensions and any
39+
// text will be hidden in the div and it will show an image instead. Uses the
40+
// fanciest new method, props to Paul Irish. Only works when called as a
41+
// function with parens. Do not try to do it with a colon!
42+
//
43+
// ex. ir('test.jpg', 200 400)
44+
45+
image-replace(path, dimensions...)
46+
dimensions = dimensions[0]
47+
font: 0/0 a
48+
text-shadow: none
49+
color: transparent
50+
bg: path if path
51+
if length(dimensions) > 1
52+
width: unit(dimensions[0], 'px')
53+
height: unit(dimensions[1], 'px')
54+
else
55+
warn("Make sure you also pass the image dimensions. Example: ir('/img/whatever.jpg', 200px 400px)")
56+
57+
// Alias: ir
58+
ir = image-replace
59+
60+
// Function: cached-image-url
61+
//
62+
// An alternative to url() that stores images in a cache for use in
63+
// cache-images().
64+
65+
background-images = null
66+
67+
cached-image-url()
68+
base = ''
69+
s = unquote('url("' + base + join('', arguments) + '")')
70+
push(background-images, s) unless s in background-images
71+
url(arguments)
72+
73+
// Mixin: Cache Images
74+
// Use this at the end of all your styles outputs the image cache script.
75+
76+
cache-images()
77+
body:after
78+
display: none
79+
content: background-images
80+
81+
// Mixin: Sprite
82+
//
83+
// Given a direction in which your sprites are aligned (horizontal/vertical) and
84+
// an iteration, will measure the width/height of your first sprite frame and
85+
// step through to the nth next one, depending on the given iteration number.
86+
// Width/height must be defined for this to work (as is the case for any sprite)
87+
//
88+
// ex. sprite: 2
89+
// ex. sprite: 5 'horizontal'
90+
//
91+
// TODO: Try using image-size here if @width or @height aren't defined
92+
93+
sprite(iteration, orientation='vertical')
94+
if orientation == 'vertical'
95+
background-position: 0 unit(@height*-1*iteration, 'px')
96+
else if orientation == 'horizontal'
97+
// warn(unit(@width*iteration, 'px'))
98+
background-position: unit(@width*iteration, 'px') 0

‎axis/index.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
@import 'vendor'
88
@import 'utilities'
99
@import 'gradients'
10+
@import 'images'
1011
@import 'interaction'
12+
@import 'layout'
1113
@import 'typography'
1214
@import 'code'
1315
@import 'ui'

‎axis/layout.styl‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// Alias: group
2+
// Clearfix with a better name. Excellent for wrangling floats.
3+
4+
group = clearfix
5+
6+
// Mixin: Columns
7+
//
8+
// For css3 columns. Takes column count (int), column gap (px, em), column width
9+
// (px, em), and a border-like declaration if you want a column rule. This
10+
// follows exactly with the css3 spec, it's just quicker.
11+
//
12+
// ex. columns()
13+
// ex. columns: 5
14+
// ex. columns(8, 15px, 200px, '1px solid red')
15+
16+
columns(count=3, gap=30px, width=null, rule=null)
17+
column-count: count
18+
column-gap: gap
19+
column-width: width if width
20+
column-rule: unquote(rule) if rule
21+
22+
// Mixin: Avoid Column Break
23+
//
24+
// If you have a list that is broken into columns, this will make sure that the
25+
// list item is not split across columns awkwardly. Works only in webkit at the
26+
// moment.
27+
//
28+
// ex. avoid-column-break()
29+
30+
avoid-column-break()
31+
column-break-inside: avoid
32+
33+
// Alias: Inline Block
34+
// Cross browser inline block display. Saves many IE headaches.
35+
36+
inline-block()
37+
display: inline-block
38+
39+
if support-for-ie
40+
display: -moz-inline-stack
41+
vertical-align: baseline
42+
zoom: 1
43+
*display: inline
44+
*vertical-align: auto
45+
46+
// Mixin: Vertically Align
47+
// Cross browser vertical align. Works down to IE9.
48+
//
49+
// ex. vertically-align() or reset it with vertically-align(false)
50+
51+
vertically-align(reset = null)
52+
if reset != false
53+
position: relative
54+
top: 50%
55+
transform: translateY(-50%)
56+
else
57+
position: relative
58+
top: 0
59+
transform: translateY(0)
60+
61+
// Mixin: Media
62+
//
63+
// Based on Nicole Sullivan's media class, made famous by Facebook
64+
// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
65+
// hundreds-of-lines-of-code
66+
//
67+
// Put this on a parent and it will split the first two children left and right,
68+
// like you would with perhaps a comment with an avatar to the left. Pass it a
69+
// margin between the two. Explained fully here:
70+
// http://carrotblog.com/css-patterns-evolved/
71+
//
72+
// This mixin works right when the element you apply it to has two or three
73+
// direct children. The first one will float to the left, the second one will be
74+
// to the right of the first, and third will go farthest right.
75+
//
76+
// ex. media()
77+
// ex. media: 15px
78+
// ex. media: 15px 10px
79+
80+
media(margin=10px)
81+
82+
left-margin = margin
83+
right-margin = margin
84+
85+
if length(arguments) > 1
86+
left-margin = arguments[0]
87+
right-margin = arguments[1]
88+
89+
overflow: hidden
90+
zoom: 1
91+
92+
& > *
93+
inline-block()
94+
overflow: hidden
95+
& > *:first-child
96+
float: left
97+
margin-right: right-margin
98+
& > *:nth-child(3)
99+
float: right
100+
margin-left: left-margin
101+
102+
// Mixin: Ratio Box
103+
// Set a specific width/height ratio. Useful on background images and iframes.
104+
105+
ratio-box(ratio = 1/1)
106+
ratio = remove-unit(ratio)
107+
overflow: hidden
108+
position: relative
109+
110+
&:before
111+
content: ''
112+
display: block
113+
height: 0
114+
padding-top: (1 / ratio) * 100%

‎axis/reset.styl‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,3 +166,16 @@ fluid-media()
166166
border: 0
167167
-ms-interpolation-mode: bicubic
168168
display: block
169+
170+
// Mixin: Border Box HTML
171+
// Add border box to every element in your project. Used in your project root.
172+
// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
173+
174+
border-box-html()
175+
html
176+
box-sizing: border-box
177+
178+
*,
179+
*:before,
180+
*:after
181+
box-sizing: inherit

0 commit comments

Comments
 (0)