index.styl 11 KB
Newer Older
Oskar Kalbag's avatar
Oskar Kalbag committed
1
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
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
//
//////////////////////////////////////////////////////////////////////////////////////////

// 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.
			//
98
			if showQuarterLineHeightMarks == 'no'
Oskar Kalbag's avatar
Oskar Kalbag committed
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
				//
				// 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)

		// 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)
138
	if unit(h) == 'rlh'
Oskar Kalbag's avatar
Oskar Kalbag committed
139
140
141
142
143
144
145
146
		relativeLineHeight = baseLineHeight * h / 16;
		line-height unit(relativeLineHeight, 'rem')

//
// CSS overrides
//

line-height(h)
147
	if unit(h) == 'px'
Oskar Kalbag's avatar
Oskar Kalbag committed
148
149
150
151
152
		line-height unit(h, 'px')
		line-height unit(h/16, 'rem')
	else
		line-height unit(h, unit(h))

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

156
abstract-shorthand(attr, originalArguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
157

158
159
160
	t = originalArguments[0]

	if t == 'inherit' || t == 'auto'
161
162
163
164

		{attr} originalArguments

	else if unit(originalArguments[0]) == 'px'
Oskar Kalbag's avatar
Oskar Kalbag committed
165

166
167
168
		r = originalArguments[1]
		b = originalArguments[2]
		l = originalArguments[3]
Oskar Kalbag's avatar
Oskar Kalbag committed
169
170

		if l
171
172
			{attr} unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
			{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
173
		else if b
174
175
			{attr} unit(t, 'px') unit(r, 'px') unit(b, 'px')
			{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
176
		else if r
177
178
			{attr} unit(t, 'px') unit(r, 'px')
			{attr} unit(t/16, 'rem') unit(r/16, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
179
		else if t
180
181
			{attr} unit(t, 'px')
			{attr} unit(t/16, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
182
	else
183
		{attr} originalArguments
184

185
186
187
188
189
190
191
192
193
/* Abstract longhand for attributes that take a single value */

abstract-longhand(attr, originalArguments)
	value = originalArguments[0]
	if value == 'inherit'
		{attr} arguments
	else if unit(value) == 'px'
		{attr} unit(value, 'px')
		{attr} unit(value/16, 'rem')
Oskar Kalbag's avatar
Oskar Kalbag committed
194
	else
195
		{attr} arguments
Oskar Kalbag's avatar
Oskar Kalbag committed
196
197


198
/* Margin */
Oskar Kalbag's avatar
Oskar Kalbag committed
199

200
201
202
203
204
205
206
207
208
209
210
211
212
213
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
214
215
216

/* Padding */

217
218
padding()
	abstract-shorthand('padding', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
219

220
221
padding-top()
	abstract-longhand('padding-top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
222

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

226
227
padding-bottom()
	abstract-longhand('padding-bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
228

229
230
padding-left()
	abstract-longhand('padding-left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
231

232
/* Font size */
Oskar Kalbag's avatar
Oskar Kalbag committed
233

234
235
236
237
238
239
240
241
242
243
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
244
245
246
247
248
249
250

/* Border */

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

	// Only  'none'
251
	if typeof(value) is 'unit'
Oskar Kalbag's avatar
Oskar Kalbag committed
252
253
254
255

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

256
		if unit(value) == 'px'
Oskar Kalbag's avatar
Oskar Kalbag committed
257
258
259
260
261
262
263
264
			{borderType} unit(value, 'px') style color
			{borderType} unit(value/16, 'rem') style color
		else
			{borderType} value style color
	else
		{borderType} originalArguments

border(args...)
265
	abstract-border('border', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
266
267

border-top(args...)
268
	abstract-border('border-top', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
269
270

border-right(args...)
271
	abstract-border('border-right', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
272
273

border-bottom(args...)
274
	abstract-border('border-bottom', args, arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
275
276

border-left(args...)
277
278
279
280
	abstract-border('border-left', args, arguments)

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

282
/* Width */
Oskar Kalbag's avatar
Oskar Kalbag committed
283
284

width(w)
285
	abstract-longhand('width', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
286
287
288

/* Relative and absolute positioning */

289
290
top()
	abstract-longhand('top', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
291

292
293
bottom()
	abstract-longhand('bottom', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
294

295
296
left()
	abstract-longhand('left', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
297

298
299
right()
	abstract-longhand('right', arguments)
Oskar Kalbag's avatar
Oskar Kalbag committed
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318


//
// Typography
//

useJustifiedText()
	text-align justify
	hyphens(auto)

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