index.styl 11.6 KB
Newer Older
Oskar Kalbag's avatar
Oskar Kalbag committed
1
////////////////////////////////////////////////////////////////
Oskar Kalbag's avatar
Oskar Kalbag committed
2
//
3
4
5
// Responsive Pixels mixins for Stylus.
//
// ‘Because web design should not require a calculator.’
Oskar Kalbag's avatar
Oskar Kalbag committed
6
7
8
9
//
// Copyright © 2012-2013 Aral Balkan.
// Released under the MIT License.
//
10
// Think in pixels; have them automatically translated to rems.
Oskar Kalbag's avatar
Oskar Kalbag committed
11
//
Oskar Kalbag's avatar
Oskar Kalbag committed
12
///////////////////////////////////////////////////////////////
Oskar Kalbag's avatar
Oskar Kalbag committed
13
14


Oskar Kalbag's avatar
Oskar Kalbag committed
15
16
17
18
19
/************************************************************
 *														 	*
 * Mixins: Helpers											*
 *															*
 ************************************************************/
20

Oskar Kalbag's avatar
Oskar Kalbag committed
21
/* Convert unit to rems if unit is in pixels. */
22
23

remify(value)
24
	if value == 'inherit' || value == 'auto' || value == 0 || value == null
25
26
27
28
29
30
		value
	else if unit(value) == 'px'
		unit(value/16, 'rem')
	else
		unit(value, unit(value))

31
32
/* Abstract shorthand for attributes that can have 1-4 arguments
   (top, right, left, bottom) */
Oskar Kalbag's avatar
Oskar Kalbag committed
33

34
abstract-shorthand(attr, originalArguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
35

36
	t = originalArguments[0]
37
38
39
40
	r = originalArguments[1]
	b = originalArguments[2]
	l = originalArguments[3]

41
42
43
44
45
	rT = remify(t)
	rR = remify(r)
	rB = remify(b)
	rL = remify(l)

46
	if l || l == 0
Oskar Kalbag's avatar
Oskar Kalbag committed
47
		{attr} t r b l
48
		/* Make sure that the rule is written out only once in case there is no rem substitution */
Oskar Kalbag's avatar
Oskar Kalbag committed
49
		if !(t == rT && r == rR && b == rB && l == rL)
50
			{attr} rT rR rB rL
51
	else if b || b == 0
Oskar Kalbag's avatar
Oskar Kalbag committed
52
53
		{attr} t r b
		if !(t == rT && r == rR && b == rB)
54
			{attr} rT rR rB
55
	else if r || r == 0
Oskar Kalbag's avatar
Oskar Kalbag committed
56
57
58
		{attr} t r
		if !(t == rT && r == rR)
			{attr} rT rR
59
	else if t || t == 0
Oskar Kalbag's avatar
Oskar Kalbag committed
60
61
62
		{attr} t
		if !(t = rT)
			{attr} rT
63

64
65
66
67
/* Abstract longhand for attributes that take a single value */

abstract-longhand(attr, originalArguments)
	value = originalArguments[0]
Oskar Kalbag's avatar
Oskar Kalbag committed
68
69
70
71
72
73
74
75
76
77
78
79
	remifiedValue = remify(value)

	{attr} value
	if value != remifiedValue
		{attr} remify(value)


/************************************************************
 *														 	*
 * Mixins: CSS overrides									*
 *															*
 ************************************************************/
80
81


Oskar Kalbag's avatar
Oskar Kalbag committed
82
/* Line height */
Oskar Kalbag's avatar
Oskar Kalbag committed
83

Oskar Kalbag's avatar
Oskar Kalbag committed
84
85
line-height()
	abstract-longhand('line-height', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
86

87
/* Margin */
Oskar Kalbag's avatar
Oskar Kalbag committed
88

89
90
91
92
93
94
95
96
97
98
99
100
101
102
margin()
	abstract-shorthand('margin', arguments)

margin-top()
	abstract-longhand('margin-top', arguments)

margin-right()
	abstract-longhand('margin-right', arguments)

margin-bottom()
	abstract-longhand('margin-bottom', arguments)

margin-left()
	abstract-longhand('margin-left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
103
104
105

/* Padding */

106
107
padding()
	abstract-shorthand('padding', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
108

109
110
padding-top()
	abstract-longhand('padding-top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
111

112
113
padding-right()
	abstract-longhand('padding-right', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
114

115
116
padding-bottom()
	abstract-longhand('padding-bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
117

118
119
padding-left()
	abstract-longhand('padding-left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
120

121
/* Font size */
Oskar Kalbag's avatar
Oskar Kalbag committed
122

123
124
125
126
127
128
129
130
131
132
font-size()
	abstract-longhand('font-size', arguments)

/* Max width */

max-width()
	abstract-longhand('max-width', arguments)

max-height()
	abstract-longhand('max-height', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
133
134
135
136
137
138
139

/* Border */

abstract-border(borderType, borderArgs, originalArguments)
	value = borderArgs[0];

	// Only  'none'
140
	if typeof(value) is 'unit'
Oskar Kalbag's avatar
Oskar Kalbag committed
141
142
143
144

		style = borderArgs[1];
		color = borderArgs[2];

145
		if unit(value) == 'px'
Oskar Kalbag's avatar
Oskar Kalbag committed
146
147
148
149
150
151
152
153
			{borderType} unit(value, 'px') style color
			{borderType} unit(value/16, 'rem') style color
		else
			{borderType} value style color
	else
		{borderType} originalArguments

border(args...)
154
	abstract-border('border', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
155
156

border-top(args...)
157
	abstract-border('border-top', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
158
159

border-right(args...)
160
	abstract-border('border-right', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
161
162

border-bottom(args...)
163
	abstract-border('border-bottom', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
164
165

border-left(args...)
166
167
168
169
	abstract-border('border-left', args, arguments)

border-radius()
	abstract-longhand('border-radius', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
170

171
/* Width */
Oskar Kalbag's avatar
Oskar Kalbag committed
172

173
width()
174
	abstract-longhand('width', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
175

176
177
178
height()
	abstract-longhand('height', arguments)

Oskar Kalbag's avatar
Oskar Kalbag committed
179
180
/* Relative and absolute positioning */

181
182
top()
	abstract-longhand('top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
183

184
185
bottom()
	abstract-longhand('bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
186

187
188
left()
	abstract-longhand('left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
189

190
191
right()
	abstract-longhand('right', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
192
193


Oskar Kalbag's avatar
Oskar Kalbag committed
194
195
196
197
198
/************************************************************
 *														 	*
 * Typography												*
 *															*
 ************************************************************/
Oskar Kalbag's avatar
Oskar Kalbag committed
199
200
201
202
203
204
205
206
207
208
209

useJustifiedText()
	text-align justify
	hyphens(auto)

hyphens(value)
	-webkit-hyphens value
	-moz-hyphens value
	-o-hyphens value
	hyphens value

Oskar Kalbag's avatar
Oskar Kalbag committed
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
//
// Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
//

// This is the default root line height
baseLineHeight = 24rem

QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem

calculateLineHeightConstants()
	QuarterLineHeight = baseLineHeight/4 rem
	HalfLineHeight = baseLineHeight/2 rem
	ThreeQuartersLineHeight = baseLineHeight*3/4 rem
	OneLineHeight = baseLineHeight rem
	OneAndAHalfLineHeights = baseLineHeight*1.5 rem
	OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
	OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
	TwoLineHeights = baseLineHeight*2 rem
	TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
	TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
	TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
	ThreeLineHeights = baseLineHeight*3 rem
	ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
	ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
	ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
	FourLineHeights = baseLineHeight*4 rem
	FiveLineHeights = baseLineHeight*5 rem

//
// Displays a baseline grid (optionally with a horizontal grid also set to the base line height)
// Issue: Not all grid lines appear to draw correctly in Firefox or Opera (they work in Safari).
//
showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, showHorizontalGrid=no, majorLineColor=hsl(220, 50%, 70%), minorLineColor=hsl(220, 25%, 85%), quarterMarkLineColor=hsl(220, 5%, 95%), horizontalGridColor=hsl(360, 25%, 85%))

	if show == yes

		if showHorizontalGrid == no
			//
			// Just show the vertical baseline grid.
			//
			if showQuarterLineHeightMarks == no
				//
				// Show line-height and half-line-height marks.
				//
				background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)

				// Also allow for a different baseFontSize to be passed in (mostly used to
				// demonstrate that vertical rhythm is maintained when scaling).
				baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);

				background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
			else
				//
				// Show line-height, half-line-height, and quarter-line-height marks.
				//
				background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)

				// Also allow for a different baseFontSize to be passed in (mostly used to
				// demonstrate that vertical rhythm is maintained when scaling).
				baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);

				background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
		else
			//
			// Show horizontal grid lines too.
			//
			if showQuarterLineHeightMarks == 'no'
				//
				// Show horizontal grid, line-height, half-line-height marks.
				//
				background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
				background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)

				// Also allow for a different baseFontSize to be passed in (mostly used to
				// demonstrate that vertical rhythm is maintained when scaling).
				baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);

				background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
			else
				//
				// Show horizontal-grid, line-height, half-line-height, and quarter-line-height marks.
				//
				background-image -webkit-linear-gradient(left, horizontalGridColor 1px, transparent 1px), -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
				background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)

				// Also allow for a different baseFontSize to be passed in (mostly used to
				// demonstrate that vertical rhythm is maintained when scaling).
				baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);

				background-size unit(baseLineHeightInPixels, px) 100%, 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
Oskar Kalbag's avatar
Oskar Kalbag committed
326

Oskar Kalbag's avatar
Oskar Kalbag committed
327
328
329
330
331
332
333
334
335
336
337
338
339
340
		// In all cases, turn on background repeat in case developer turned it off in HTML
		// for her own custom background.
		background-repeat repeat


//
// Requires a variable called rootLineHeight to be set in your styles. If
// there isn’t one, defaults to 24px. The return value is in pixel‐parity rems
// (so divided by the default root font size of 16).
//
relative-line-height(h)
	if unit(h) == 'rlh'
		relativeLineHeight = baseLineHeight * h / 16;
		line-height unit(relativeLineHeight, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
341
342