index.styl 12.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
// Copyright © 2012-2015 Aral Balkan.
Aral Balkan's avatar
Aral Balkan committed
8
9
//
// Released with ♥ by Ind.ie under the MIT License.
Oskar Kalbag's avatar
Oskar Kalbag committed
10
//
11
// Think in pixels; have them automatically translated to rems.
Oskar Kalbag's avatar
Oskar Kalbag committed
12
//
Oskar Kalbag's avatar
Oskar Kalbag committed
13
///////////////////////////////////////////////////////////////
Oskar Kalbag's avatar
Oskar Kalbag committed
14
15


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

Aral Balkan's avatar
Aral Balkan committed
22
/* Convert unit to REMs if unit is in pixels. */
23
24

remify(value)
25

26
	if value == 'inherit' || value == 'auto' || value == 'none' || value == 'cover' || value == 'contain' || value == 'smaller' || value == '!important' || value == 0 || value == null
27
		value
28
29
	else if value == 'hairline'
		'1px'
30
31
32
33
34
	else if unit(value) == 'px'
		unit(value/16, 'rem')
	else
		unit(value, unit(value))

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

38
abstract-shorthand(attr, originalArguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
39

40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
	t = null
	r = null
	b = null
	l = null

	numOriginalArguments = length(originalArguments)

	if length(originalArguments) >= 1
		t = shift(originalArguments)
	if length(originalArguments) >= 1
		r = shift(originalArguments)
	if length(originalArguments) >= 1
		b = shift(originalArguments)
	if length(originalArguments) >= 1
		l = shift(originalArguments)
55

56
57
58
59
60
	rT = remify(t)
	rR = remify(r)
	rB = remify(b)
	rL = remify(l)

61
62
63
64
	if t == 'hairline'
		t = 1px
	if r == 'hairline'
		r = 1px
65
	if b == 'hairline'
66
		b = 1px
67
	if l == 'hairline'
68
69
		l = 1px

70
	if numOriginalArguments == 4
Oskar Kalbag's avatar
Oskar Kalbag committed
71
		{attr} t r b l
72
		/* Make sure that the rule is written out only once in case there is no rem substitution */
Oskar Kalbag's avatar
Oskar Kalbag committed
73
		if !(t == rT && r == rR && b == rB && l == rL)
74
			{attr} rT rR rB rL
75
	else if numOriginalArguments == 3
Oskar Kalbag's avatar
Oskar Kalbag committed
76
77
		{attr} t r b
		if !(t == rT && r == rR && b == rB)
78
			{attr} rT rR rB
79
	else if numOriginalArguments == 2
Oskar Kalbag's avatar
Oskar Kalbag committed
80
81
82
		{attr} t r
		if !(t == rT && r == rR)
			{attr} rT rR
83
	else if numOriginalArguments == 1
Oskar Kalbag's avatar
Oskar Kalbag committed
84
85
86
		{attr} t
		if !(t = rT)
			{attr} rT
87

88
89
/* Abstract longhand for attributes that take a single value */

90
91
abstract-longhand(attr, args)
	value = shift(args)
Oskar Kalbag's avatar
Oskar Kalbag committed
92
93
	remifiedValue = remify(value)

94
	if value == 'hairline'
95
		{attr} 1px args
96
	else
97
98
		{attr} value args

Oskar Kalbag's avatar
Oskar Kalbag committed
99
	if value != remifiedValue
100
		{attr} remify(value) args
Oskar Kalbag's avatar
Oskar Kalbag committed
101
102
103


/************************************************************
104
 *															*
Oskar Kalbag's avatar
Oskar Kalbag committed
105
106
107
 * Mixins: CSS overrides									*
 *															*
 ************************************************************/
108
109


Oskar Kalbag's avatar
Oskar Kalbag committed
110
/* Line height */
Oskar Kalbag's avatar
Oskar Kalbag committed
111

112
line-height(args...)
Oskar Kalbag's avatar
Oskar Kalbag committed
113
	abstract-longhand('line-height', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
114

115
/* Margin */
Oskar Kalbag's avatar
Oskar Kalbag committed
116

117
margin(args...)
118
119
	abstract-shorthand('margin', arguments)

120
margin-top(args...)
121
122
	abstract-longhand('margin-top', arguments)

123
margin-right(args...)
124
125
	abstract-longhand('margin-right', arguments)

126
margin-bottom(args...)
127
128
	abstract-longhand('margin-bottom', arguments)

129
margin-left(args...)
130
	abstract-longhand('margin-left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
131
132
133

/* Padding */

134
padding(args...)
135
	abstract-shorthand('padding', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
136

137
padding-top(args...)
138
	abstract-longhand('padding-top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
139

140
padding-right(args...)
141
	abstract-longhand('padding-right', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
142

143
padding-bottom(args...)
144
	abstract-longhand('padding-bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
145

146
padding-left(args...)
147
	abstract-longhand('padding-left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
148

149
/* Font size */
Oskar Kalbag's avatar
Oskar Kalbag committed
150

151
font-size(args...)
152
153
	abstract-longhand('font-size', arguments)

154
/* Background size */
155
background-size(args...)
156
	abstract-shorthand('background-size', arguments)
157

158
159
/* Max width */

160
max-width(args...)
161
162
	abstract-longhand('max-width', arguments)

163
max-height(args...)
164
	abstract-longhand('max-height', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
165
166
167
168
169

/* Border */

abstract-border(borderType, borderArgs, originalArguments)
	value = borderArgs[0];
170
171
	style = borderArgs[1];
	color = borderArgs[2];
Oskar Kalbag's avatar
Oskar Kalbag committed
172

173
	// Only 'none'
174
175
	if typeof(value) is 'unit'
		if unit(value) == 'px'
Oskar Kalbag's avatar
Oskar Kalbag committed
176
177
178
179
			{borderType} unit(value, 'px') style color
			{borderType} unit(value/16, 'rem') style color
		else
			{borderType} value style color
180
181
182
	else if value is 'hairline'
		// Since we lose the ability to create 1px borders, a little extension.
		{borderType} unit(1, 'px') style color
Oskar Kalbag's avatar
Oskar Kalbag committed
183
184
185
186
	else
		{borderType} originalArguments

border(args...)
187
	abstract-border('border', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
188
189

border-top(args...)
190
	abstract-border('border-top', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
191
192

border-right(args...)
193
	abstract-border('border-right', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
194
195

border-bottom(args...)
196
	abstract-border('border-bottom', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
197
198

border-left(args...)
199
200
201
202
	abstract-border('border-left', args, arguments)

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

204
/* Width */
Oskar Kalbag's avatar
Oskar Kalbag committed
205

206
width(args...)
207
	abstract-longhand('width', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
208

209
height(args...)
210
211
	abstract-longhand('height', arguments)

Oskar Kalbag's avatar
Oskar Kalbag committed
212
213
/* Relative and absolute positioning */

214
top(args...)
215
	abstract-longhand('top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
216

217
bottom(args...)
218
	abstract-longhand('bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
219

220
left(args...)
221
	abstract-longhand('left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
222

223
right(args...)
224
	abstract-longhand('right', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
225
226


Oskar Kalbag's avatar
Oskar Kalbag committed
227
/************************************************************
228
 *															*
Oskar Kalbag's avatar
Oskar Kalbag committed
229
230
231
 * Typography												*
 *															*
 ************************************************************/
Oskar Kalbag's avatar
Oskar Kalbag committed
232
233
234
235
236
237
238
239
240
241
242

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
243
244
245
246
//
// Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
//

247
248
249
250
dividePixels(a,b)
	r = (a / b)
	return unit(r, 'px')

Oskar Kalbag's avatar
Oskar Kalbag committed
251
// This is the default root line height
252
253
254
baseLineHeight = 24

QuarterLineHeight = baseLineHeight/4 px
255
HalfLineHeight = dividePixels(baseLineHeight, 2)
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
ThreeQuartersLineHeight = baseLineHeight*3/4 px
OneLineHeight = baseLineHeight px
OneAndAHalfLineHeights = baseLineHeight*1.5 px
OneAndAQuarterLineHeights = baseLineHeight*1.25 px
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 px
TwoLineHeights = baseLineHeight*2 px
TwoAndAQuarterLineHeights = baseLineHeight*2.25 px
TwoAndAHalfLineHeights = baseLineHeight*2.5 px
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 px
ThreeLineHeights = baseLineHeight*3 px
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 px
ThreeAndAHalfLineHeights = baseLineHeight*3.5 px
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 px
FourLineHeights = baseLineHeight*4 px
FiveLineHeights = baseLineHeight*5 px
Oskar Kalbag's avatar
Oskar Kalbag committed
271
272

calculateLineHeightConstants()
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
	QuarterLineHeight = baseLineHeight/4 px
	HalfLineHeight = baseLineHeight/2 px
	ThreeQuartersLineHeight = baseLineHeight*3/4 px
	OneLineHeight = baseLineHeight px
	OneAndAHalfLineHeights = baseLineHeight*1.5 px
	OneAndAQuarterLineHeights = baseLineHeight*1.25 px
	OneAndThreeQuartersLineHeights = baseLineHeight*1.75 px
	TwoLineHeights = baseLineHeight*2 px
	TwoAndAQuarterLineHeights = baseLineHeight*2.25 px
	TwoAndAHalfLineHeights = baseLineHeight*2.5 px
	TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 px
	ThreeLineHeights = baseLineHeight*3 px
	ThreeAndAQuarterLineHeights = baseLineHeight*3.25 px
	ThreeAndAHalfLineHeights = baseLineHeight*3.5 px
	ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 px
	FourLineHeights = baseLineHeight*4 px
	FiveLineHeights = baseLineHeight*5 px

Oskar Kalbag's avatar
Oskar Kalbag committed
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
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363

//
// 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
364

Oskar Kalbag's avatar
Oskar Kalbag committed
365
366
367
368
369
370
371
372
373
374
375
376
377
378
		// 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
379
380