index.styl 12.3 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.
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

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, args)
Oskar Kalbag's avatar
Oskar Kalbag committed
39

40 41 42 43 44
	t = null
	r = null
	b = null
	l = null

45
	numOriginalArguments = length(args)
46

47 48 49 50 51 52 53 54
	if length(args) >= 1
		t = shift(args)
	if length(args) >= 1
		r = shift(args)
	if length(args) >= 1
		b = shift(args)
	if length(args) >= 1
		l = shift(args)
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
		{attr} t
85
		if !(t == rT)
Oskar Kalbag's avatar
Oskar Kalbag committed
86
			{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...)
113
	abstract-longhand('line-height', args)
Oskar Kalbag's avatar
Oskar Kalbag committed
114

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

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

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

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

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

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

/* Padding */

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

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

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

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

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

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

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

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

158 159
/* Max width */

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

163
max-height(args...)
164
	abstract-longhand('max-height', args)
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
	abstract-border('border-left', args, arguments)

border-radius()
202
	abstract-longhand('border-radius', args)
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', args)
Oskar Kalbag's avatar
Oskar Kalbag committed
208

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

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

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

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

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

223
right(args...)
224
	abstract-longhand('right', args)
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 247
//
// Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
//

// This is the default root line height
248 249 250
baseLineHeight = 24

QuarterLineHeight = baseLineHeight/4 px
251
HalfLineHeight = baseLineHeight/2 px
252 253 254 255 256 257 258 259 260 261 262 263 264 265 266
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
267 268

calculateLineHeightConstants()
269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286
	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
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 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

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

Oskar Kalbag's avatar
Oskar Kalbag committed
361 362 363 364 365 366 367 368 369 370 371 372 373 374
		// 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
375 376