├── .gitignore ├── .stylelintrc ├── LICENSE ├── README.md ├── bower.json ├── docs ├── docs.scss ├── html │ ├── _boxes.html │ ├── _buttons.html │ ├── _colors.html │ ├── _defaults.html │ ├── _forms.html │ ├── _grid.html │ ├── _images.html │ ├── _intro.html │ ├── _lists.html │ ├── _media.html │ ├── _quick-start.html │ ├── _rwd.html │ ├── _sticky-footer.html │ ├── _tables.html │ ├── _typography.html │ └── partials │ │ ├── _badge.html │ │ └── _navigation.html ├── img │ ├── brand-dark.png │ └── brand-light.png ├── index.html └── sass │ ├── _code.scss │ ├── _color-block.scss │ ├── _example.scss │ ├── _highlight.scss │ ├── _list-tabs.scss │ ├── _navigation.scss │ └── _preview.scss ├── gulpfile.js ├── hocus-pocus.scss ├── package.json ├── sass ├── _base.scss ├── _box-sizing.scss ├── _box.scss ├── _button.scss ├── _colors.scss ├── _defaults.scss ├── _form.scss ├── _grid.scss ├── _helpers-color.scss ├── _helpers-float.scss ├── _helpers-spacing.scss ├── _helpers-visibility.scss ├── _helpers-width.scss ├── _image.scss ├── _list.scss ├── _media.scss ├── _normalize.scss ├── _rule.scss ├── _rwd.scss ├── _sticky-footer.scss ├── _table.scss └── _type.scss └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .publish 3 | npm-debug.log 4 | build 5 | node_modules 6 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "syntax": "scss", 3 | "extends": [ 4 | "stylelint-config-standard", 5 | "stylelint-config-recess-order" 6 | ], 7 | "rules": { 8 | "number-leading-zero": "never", 9 | "selector-list-comma-newline-after": null, 10 | "at-rule-empty-line-before": null, 11 | "block-closing-brace-newline-after": ["always", { 12 | "ignoreAtRules": ["if", "else"] 13 | }] 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Bartłomiej Kozal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hocus-Pocus 2 | 3 | [Hocus-Pocus](https://brtjkzl.github.io/hocus-pocus) is a universal and lightweight stylesheet 4 | starter kit that focuses on base html elements and typography. You can change 5 | the look of every single component, disable some features and define a range 6 | of helpers with variables. 7 | 8 | ## Why not Bootstrap? 9 | 10 | Libraries like Bootstrap or Foundation are great and have greatly changed how 11 | people think about CSS. However, in most cases within my own project work, I 12 | just don’t need all these features and UI components like progress bars or 13 | breadcrumbs. Instead, I prefer to have something more universal that I can use 14 | in any project. 15 | 16 | ## Key Features 17 | 18 | The following features are the most characteristic to Hocus-Pocus: 19 | 20 | - Enhanced [normalize.css](https://github.com/necolas/normalize.css) reset 21 | - Default colors set and color helpers thanks to [clrs.cc](http://clrs.cc) 22 | - Widely responsive web design support with customizable breakpoints and approach 23 | - Flexbox grid with universal, fraction based width helpers 24 | - Visibility and spacing helpers (auto-generated for the each viewport breakpoint!) 25 | - Typography with vertical rhythm based on rem units 26 | - Components like lists, menus, tables, forms, buttons, boxes, media object and sticky footer 27 | 28 | --- 29 | 30 | You can find full documentation at [brtjkzl.github.io/hocus-pocus](https://brtjkzl.github.io/hocus-pocus). 31 | Code is open sourced [on GitHub](https://github.com/brtjkzl/hocus-pocus/). 32 | Up to date changelog is available under [the releases 33 | section](https://github.com/brtjkzl/hocus-pocus/releases). 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hocus-pocus", 3 | "version": "0.3.5", 4 | "homepage": "https://brtjkzl.github.io/hocus-pocus", 5 | "authors": ["Bart Kozal "], 6 | "description": "Universal and lightweight stylesheet starter kit", 7 | "main": "hocus-pocus.scss", 8 | "keywords": ["css", "sass", "scss", "framework"], 9 | "license": "MIT", 10 | "ignore": ["**/.*", "docs", "build", "node_modules", "package.json"] 11 | } 12 | -------------------------------------------------------------------------------- /docs/docs.scss: -------------------------------------------------------------------------------- 1 | $font-weight-headings: 400; 2 | 3 | @import '../hocus-pocus'; 4 | 5 | @import 'sass/code', 6 | 'sass/color-block', 7 | 'sass/highlight', 8 | 'sass/example', 9 | 'sass/navigation', 10 | 'sass/preview', 11 | 'sass/list-tabs'; 12 | -------------------------------------------------------------------------------- /docs/html/_boxes.html: -------------------------------------------------------------------------------- 1 |

Boxes

2 | 3 |

4 | Create an element that is out of a rest of content. Useful for flashes, islands, 5 | sidebar boxes etc. The last element inside it will have removed a bottom margin. 6 |

7 | 8 |

9 | Define own box types: 10 |

11 | 12 | 

13 | @include box($name, $color, $contrast: 25%)
14 |
15 | 16 |

17 | Usage: 18 |

19 | 20 | 

21 | @include box('alert', $color-red)
22 |
23 | 24 |

Box Types

25 | 26 |
27 |
28 |

Element inside a box

29 |
30 |
31 | 32 | 

33 | 

34 |   ...
35 | 

36 |
37 | 38 |
39 |
40 |

Element inside a box

41 |
42 |
43 | 44 | 

45 | 

46 |   ...
47 | 

48 |
49 | 50 |
51 |
52 |

Informative box

53 |
54 |
55 | 56 | 

57 | 

58 |   
Informative box

59 | 

60 |
61 | 62 |
63 |
64 |

Positive box

65 |
66 |
67 | 68 | 

69 | 

70 |   
Positive box

71 | 

72 |
73 | 74 |
75 |
76 |

Cautionary box

77 |
78 |
79 | 80 | 

81 | 

82 |   
Cautionary box

83 | 

84 |
85 | 86 |
87 |
88 |

Negative box

89 |
90 |
91 | 92 | 

93 | 

94 |   
Negative box

95 | 

96 |
97 | -------------------------------------------------------------------------------- /docs/html/_buttons.html: -------------------------------------------------------------------------------- 1 |

Buttons

2 | 3 |

4 | Defaults: 5 |

6 | 7 | 

  8 | $btn-flat: false; // disable drop shadow
  9 |
10 | 11 |

12 | Define own button types: 13 |

14 | 15 | 

 16 | @include btn($name, $color, $color-text: $color-white)
 17 |
18 | 19 |

20 | Usage: 21 |

22 | 23 | 

 24 | @include btn('primary', #00F)
 25 |
26 | 27 |

Button Types

28 | 29 |
30 | Link as a button 31 |
32 | 33 | 

 34 | 
 35 | 
 36 | Link as a button
 37 |
38 | 39 |
40 | Disabled link as a button 41 |
42 | 43 | 

 44 | 
 45 | 
 46 | Disabled link as a button
 47 |
48 | 49 |
50 | Outline button Outline brand button 51 |
52 | 53 | 

 54 | Outline button
 55 | 
 56 | Outline brand button
 57 |
58 | 59 |
60 | Flat button 61 |
62 | 63 | 

 64 | Flat button
 65 |
66 | 67 |
68 | Shadowed button 69 |
70 | 71 | 

 72 | Shadowed button
 73 |
74 | 75 |
76 | Block button 77 |
78 | 79 | 

 80 | Block button
 81 |
82 | 83 |
84 | Brand button 85 |
86 | 87 | 

 88 | Brand button
 89 |
90 | 91 |
92 | Positive button 93 |
94 | 95 | 

 96 | Positive button
 97 |
98 | 99 |
100 | Negative button 101 |
102 | 103 | 

104 | Negative button
105 |
106 | -------------------------------------------------------------------------------- /docs/html/_colors.html: -------------------------------------------------------------------------------- 1 |

Colors

2 | 3 |

4 | Colors available as variables (so you can override them if you wish to): 5 |

6 | 7 |
$color-white
8 |
$color-silver
9 |
$color-gray
10 |
$color-black
11 |
$color-red
12 |
$color-orange
13 |
$color-yellow
14 |
$color-lime
15 |
$color-green
16 |
$color-olive
17 |
$color-teal
18 |
$color-aqua
19 |
$color-blue
20 |
$color-navy
21 |
$color-fuchsia
22 |
$color-purple
23 |
$color-maroon
24 | 25 |

26 | Defaults: 27 |

28 | 29 | 

 30 | $color-body: $color-white;        // body background color
 31 | $color-ui: $color-silver;         // ui elements color like rules, borders, form inputs
 32 | $color-btn: $color-black;         // button color without any modifiers
 33 | $color-text: $color-black;        // base font color
 34 | $color-link: $color-blue;         // links color
 35 | $color-muted: $color-gray;        // blockquote and `.text-muted` color
 36 | $color-small: $color-text;        // small color
 37 | $color-disabled: $color-ui;       // disabled form input and buttons color
 38 | $color-brand: $color-blue;        // brand color
 39 | $color-positive: $color-green;    // positive color
 40 | $color-cautionary: $color-yellow; // cautionary color
 41 | $color-negative: $color-red;      // negative color
 42 | $color-informative: $color-blue;  // informative color
 43 | $color-map: (
 44 |   'white': $color-white,
 45 |   'silver': $color-silver,
 46 |   'gray': $color-gray,
 47 |   'black': $color-black,
 48 |   'red': $color-red,
 49 |   'orange': $color-orange,
 50 |   'yellow': $color-yellow,
 51 |   'lime': $color-lime,
 52 |   'green': $color-green,
 53 |   'olive': $color-olive,
 54 |   'teal': $color-teal,
 55 |   'aqua': $color-aqua,
 56 |   'blue': $color-blue,
 57 |   'navy': $color-navy,
 58 |   'fuchsia': $color-fuchsia,
 59 |   'purple': $color-purple,
 60 |   'maroon': $color-maroon,
 61 |   'brand': $color-brand,
 62 |   'positive': $color-positive,
 63 |   'cautionary': $color-cautionary,
 64 |   'negative': $color-negative,
 65 |   'informative': $color-informative,
 66 |   'muted': $color-muted
 67 | );                                // color helpers are generated based on this map
 68 |
69 | 70 |

Color Helpers

71 | 72 |

73 | Specify text and background color of an element. 74 |

75 | 76 |

77 | Color helpers use !important and are generated for each color in 78 | $color-map. 79 |

80 | 81 |

82 | Usage: 83 |

84 | 85 | 

 86 | .text[-color];
 87 | .bg[-color];
 88 | 
 89 | /*
 90 |  * Where [-color] is one of these values:
 91 |  *   -aqua, -blue, -navy, -teal, -green, -olive, -lime, -yellow, -orange,
 92 |  *   -red, -fuchsia, -purple, -maroon, -white, -silver, -grey, -black,
 93 |  *   -informative, -positive, -negative, -brand, -muted
 94 |  */
 95 |
96 | 97 |
98 |

Paragraph with a muted text

99 |

Paragraph with a brand text

100 |

Paragraph with a negative background

101 |

Paragraph with a black background and white text

102 |
103 | 104 | 

105 | 
Paragraph with a muted text

106 | 
Paragraph with a brand text

107 | 
Paragraph with a negative background

108 | 
Paragraph with a black background and white text

109 |
110 | -------------------------------------------------------------------------------- /docs/html/_defaults.html: -------------------------------------------------------------------------------- 1 |

Defaults

2 | 3 |

4 | The most common settings are listed below. Other defaults are listed on 5 | corresponding documentation pages or you can find them 6 | in the source code 10 | under scss/_defaults.scss. 11 |

12 | 13 | 

14 | $rwd-type: mobile-first;
15 | $rwd-map: (compact: 320px 414px, regular: 415px);
16 | 
17 | $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
18 | $font-family-headings: $font-family-base;
19 | $font-leading: 1.5;
20 | $font-size-base: 1rem;
21 | 
22 | $grid-container: 1020px;
23 | 
24 | $color-body: $color-white;
25 | $link-underline: true;
26 | $btn-flat: false;
27 |
28 | -------------------------------------------------------------------------------- /docs/html/_forms.html: -------------------------------------------------------------------------------- 1 |

Forms

2 | 3 |

4 | Usage: 5 |

6 | 7 |
8 |
9 | 10 | 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 | 48 | 49 | 50 | 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 |   
 86 | 
 87 |   
 88 |   
 93 | 
 94 |   
 95 |   
 96 | 
 97 |   
 98 | 

 99 |
100 | 101 |
102 |
103 |
104 | 105 | 106 |
107 | 108 |
109 | 110 | 111 |
112 | 113 |
114 | 117 | 118 | 119 |
120 |
121 |
122 | 123 | 

124 | 

125 |   

126 |     
127 |     
128 |   

129 | 
130 |   

131 |     
132 |     
133 |   

134 | 
135 |   

136 |     
139 | 
140 |     
141 |   

142 | 

143 |
144 | -------------------------------------------------------------------------------- /docs/html/_grid.html: -------------------------------------------------------------------------------- 1 |

Grid

2 | 3 |

4 | Create a centered wrapper for grid elements. Usually used as a root element 5 | for a whole layout. 6 |

7 | 8 |

9 | Defaults: 10 |

11 | 12 | 

 13 | $grid-container: 1020px; // container's width
 14 |
15 | 16 |

17 | Usage: 18 |

19 | 20 |
21 |
22 | .container 23 |
24 |
25 | 26 | 

 27 | 

 28 |   ...
 29 | 

 30 |
31 | 32 |

33 | Build a grid using a combination of grid items and width helpers. 34 | Grid elements can be nested. It's based on flexbox. 35 |

36 | 37 |

38 | Defaults: 39 |

40 | 41 | 

 42 | $grid-gutter: $spacing-unit; // width of grid gutter
 43 |
44 | 45 |

46 | Usage: 47 |

48 | 49 |
50 |
51 |
52 |
.grid-item.1/3
53 |
54 | 55 |
56 |
.grid-item.2/3
57 |
58 |
59 |
60 | 61 | 

 62 | 

 63 |   

 64 |     ...
 65 |   

 66 | 
 67 |   

 68 |     ...
 69 |   

 70 | 

 71 |
72 | 73 |

Grid Types

74 | 75 |

76 | Set horizontal and/or vertical alignment: 77 |

78 | 79 |
80 |
81 |
82 |
83 | .grid-item.1/3 84 |
85 |
86 |
87 |
88 | 89 | 

 90 | 

 91 |   

 92 |     ...
 93 |   

 94 | 

 95 |
96 | 97 |
98 |
99 |
100 |
101 | .grid-item.1/3 102 |
103 |
104 |
105 |
106 | 107 | 

108 | 

109 |   

110 |     ...
111 |   

112 | 

113 |
114 | 115 |
116 |
117 |
118 |
119 | .grid-item.1/3 120 |
121 |
122 |
123 |
124 | 125 | 

126 | 

127 |   

128 |     ...
129 |   

130 | 

131 |
132 | 133 |
134 |
135 |
136 |
137 | .grid-item.1/2 138 |
139 |
140 |
141 |
142 | .grid-item.1/2 143 |
144 |
145 |
146 |
147 | 148 | 

149 | 

150 |   

151 |     ...
152 |   

153 |   

154 |     ...
155 |   

156 | 

157 |
158 | 159 |
160 |
161 |
162 |
163 | .grid-item.1/2 164 |
165 |
166 |
167 |
168 | .grid-item.1/2 169 |
170 |
171 |
172 |
173 | 174 | 

175 | 

176 |   

177 |     ...
178 |   

179 |   

180 |     ...
181 |   

182 | 

183 |
184 | 185 |
186 |
187 |
188 |
189 | .grid-item.1/2 190 |
191 |
192 |
193 |
194 | .grid-item.1/2 195 |
196 |
197 |
198 |
199 | 200 | 

201 | 

202 |   

203 |     ...
204 |   

205 |   

206 |     ...
207 |   

208 | 

209 |
210 | 211 |

212 | Create a flat grid without gutter: 213 |

214 | 215 |
216 |
217 |
218 |
219 | .grid-item.1/2 220 |
221 |
222 |
223 |
224 | .grid-item.1/2 225 |
226 |
227 |
228 |
229 | 230 | 

231 | 

232 |   

233 |     ...
234 |   

235 |   

236 |     ...
237 |   

238 | 

239 |
240 | 241 |

242 | Create a grid where content of a first item is aligned to left and content 243 | of a second item is aligned to right: 244 |

245 | 246 |
247 |
248 |
249 |
250 | .grid-item.1/2 251 |
252 |
253 |
254 |
255 | .grid-item.1/2 256 |
257 |
258 |
259 |
260 | 261 | 

262 | 

263 |   

264 |     ...
265 |   

266 |   

267 |     ...
268 |   

269 | 

270 |
271 | 272 |

273 | Reverse grid items order (available for each breakpoint in $rwd-map): 274 |

275 | 276 |
277 |
278 |
279 |
280 | .grid-item.1/3 281 |
282 |
283 |
284 |
285 | .grid-item.2/3 286 |
287 |
288 |
289 |
290 | 291 | 

292 | 

293 |   

294 |     ...
295 |   

296 |   

297 |     ...
298 |   

299 | 

300 |
301 | 302 |
303 |
304 |
305 |
306 | .grid-item.2/5 307 |
308 |
309 |
310 |
311 | .grid-item.3/5 312 |
313 |
314 |
315 |
316 | 317 | 

318 | 

319 |   

320 |     ...
321 |   

322 |   

323 |     ...
324 |   

325 | 

326 |
327 | 328 |

329 | Stack grid items (available for each breakpoint in $rwd-map): 330 |

331 | 332 |
333 |
334 |
335 |
336 | .grid-item.1/3 337 |
338 |
339 |
340 |
341 | .grid-item.2/3 342 |
343 |
344 |
345 |
346 | 347 | 

348 | 

349 |   

350 |     ...
351 |   

352 |   

353 |     ...
354 |   

355 | 

356 |
357 | 358 |
359 |
360 |
361 |
362 | .grid-item.2/5.compact-1/1 363 |
364 |
365 |
366 |
367 | .grid-item.3/5.compact-1/1 368 |
369 |
370 |
371 |
372 | 373 | 

374 | 

375 |   

376 |     ...
377 |   

378 |   

379 |     ...
380 |   

381 | 

382 |
383 | 384 |

385 | Combination of stack and reverse: 386 |

387 | 388 |
389 |
390 |
391 |
392 | .grid-item.5/6 393 |
394 |
395 |
396 |
397 | .grid-item.1/6 398 |
399 |
400 |
401 |
402 | 403 | 

404 | 

405 |   

406 |     ...
407 |   

408 |   

409 |     ...
410 |   

411 | 

412 |
413 | 414 |
415 |
416 |
417 |
418 | .grid-item.1/3 419 |
420 |
421 |
422 |
423 | .grid-item.2/3 424 |
425 |
426 |
427 |
428 | 429 | 

430 | 

431 |   

432 |     ...
433 |   

434 |   

435 |     ...
436 |   

437 | 

438 |
439 | 440 |

Float Helpers

441 | 442 |

443 | Clearfix and float helpers. 444 |

445 | 446 |
447 |
448 |
.float-left
449 |
.float-right
450 |
451 |
452 | 453 | 

454 | 

455 |   
...

456 |   
...

457 | 

458 |
459 | -------------------------------------------------------------------------------- /docs/html/_images.html: -------------------------------------------------------------------------------- 1 |

Images

2 | 3 |

4 | Images are vertically aligned to the middle of container and have 5 | box-sizing set to content-box. 6 |

7 | 8 |

9 | Replace any element that contains text with an image: 10 |

11 | 12 | 

13 | @include img-replace($path, $width, $height);
14 |
15 | 16 |

17 | Usage: 18 |

19 | 20 | 

21 | .logo {
22 |   @include img-replace('path/to/img.svg', 100px, 40px);
23 | }
24 |
25 | 26 |

Image Helpers

27 | 28 |
29 | example 30 |
31 | 32 | 

33 | placeholder
34 |
35 | 36 |
37 | example 38 |
39 | 40 | 

41 | placeholder
42 |
43 | 44 |
45 | example 46 |
47 | 48 | 

49 | placeholder
50 |
51 | -------------------------------------------------------------------------------- /docs/html/_intro.html: -------------------------------------------------------------------------------- 1 |

2 | Hocus-Pocus 3 | 7 | v0.3.5 8 | 9 |

10 | 11 |

12 | Created and maintained by @brtjkzl 13 |

14 | 15 |

16 | Hocus-Pocus is a universal and lightweight stylesheet starter kit that focuses 17 | on base html elements and typography. You can change the look of every single 18 | component, disable some features and define a range of helpers with variables. 19 |

20 | 21 |

Why not Bootstrap?

22 | 23 |

24 | Libraries like Bootstrap or Foundation are great and have greatly changed how 25 | people think about CSS. However, in most cases within my own project work, I 26 | just don’t need all these features and UI components like progress bars or 27 | breadcrumbs. Instead, I prefer to have something more universal that I can use 28 | in any project. 29 |

30 | 31 |

Key Features

32 | 33 |

34 | The following features are the most characteristic to Hocus-Pocus: 35 |

36 | 37 | 61 | 62 |

63 | Code is open sourced 64 | on GitHub. Up to date 65 | changelog is available under 66 | the releases section. 69 |

70 | -------------------------------------------------------------------------------- /docs/html/_lists.html: -------------------------------------------------------------------------------- 1 |

Lists

2 | 3 |

4 | Defaults: 5 |

6 | 7 | 

  8 | $list-menu-color: $color-white;      // list menu color
  9 | $list-menu-background: $color-link;  // list menu background color
 10 |
11 | 12 |

13 | Usage: 14 |

15 | 16 |
17 |
    18 |
  1. List item 1
    2. 19 |
  2. List item 2
    3. 20 |
21 |
22 | 23 | 

 24 | 
    
 25 |   
  1. List item 1
    2. 
 26 |   
  2. List item 2
    3. 
 27 | 

 28 |
29 | 30 |
31 | 41 |
42 | 43 | 

 44 | 
    
 45 |   
  • List item 1
    • 
 46 |   
  • 
 47 |     List item 2
 48 |     
      
 49 |       
    • List item A
      • 
 50 |       
    • List item B
      • 
 51 |     
    
 52 |   
    • 
 53 | 

 54 |
55 | 56 |
57 | 62 |
63 | 64 | 

 65 | 
    
 66 |   ...
 67 | 

 68 |
69 | 70 |
71 | 76 |
77 | 78 | 

 79 | 
    
 80 |   ...
 81 | 

 82 |
83 | 84 |
85 | 90 |
91 | 92 | 

 93 | 
    
 94 |   ...
 95 | 

 96 |
97 | 98 |
99 | 104 |
105 | 106 | 

107 | 
    
108 |   ...
109 | 

110 |
111 | 112 |
113 |
114 |
Definition list title
115 |
Definition list description
116 |
117 |
118 | 119 | 

120 | 

121 |   
Definition list title

122 |   
Definition list description

123 | 

124 |
125 | -------------------------------------------------------------------------------- /docs/html/_media.html: -------------------------------------------------------------------------------- 1 |

Media

2 | 3 |

4 | Media object works with any html element. 5 |

6 | 7 |

8 | Gutter size modifiers are generated for each size in $spacing-map. 9 |

10 | 11 |

12 | Usage: 13 |

14 | 15 |
16 |
17 | 18 |
19 |

Example Text

20 |
21 |
22 |
23 | 24 | 

 25 | 

 26 |   
 27 |   

 28 |     ...
 29 |   

 30 | 

 31 |
32 | 33 |
34 |
35 | 36 |
37 |

Example Text

38 |
39 |
40 |
41 | 42 | 

 43 | 

 44 |   
 45 |   

 46 |     ...
 47 |   

 48 | 

 49 |
50 | 51 |
52 |
53 | 54 |
55 |

Example Text

56 |
57 |
58 |
59 | 60 | 

 61 | 

 62 |   
 63 |   

 64 |     ...
 65 |   

 66 | 

 67 |
68 | 69 |
70 |
71 | 72 |
73 |

Example Text

74 |
75 |
76 |
77 | 78 | 

 79 | 

 80 |   
 81 |   

 82 |     ...
 83 |   

 84 | 

 85 |
86 | 87 |
88 |
89 | 90 |
91 |

Example Text

92 |
93 |
94 |
95 | 96 | 

 97 | 

 98 |   
 99 |   

100 |     ...
101 |   

102 | 

103 |
104 | 105 |
106 |
107 | 108 |
109 |

Example Text

110 |
111 |
112 |
113 | 114 | 

115 | 

116 |   
117 |   

118 |     ...
119 |   

120 | 

121 |
122 | 123 |
124 |
125 | 126 |
127 |

Example Text

128 |
129 |
130 |
131 | 132 | 

133 | 

134 |   
135 |   

136 |     ...
137 |   

138 | 

139 |
140 | 141 |
142 |
143 | 144 |
145 |

Example Text

146 |
147 |
148 |
149 | 150 | 

151 | 

152 |   
153 |   

154 |     ...
155 |   

156 | 

157 |
158 | -------------------------------------------------------------------------------- /docs/html/_quick-start.html: -------------------------------------------------------------------------------- 1 |

Quick Start

2 | 3 | 7 | 8 |
9 |
10 |

11 | Hocus-Pocus requires Sass 12 | (version 3.3.0 or later) to proper work. 13 |

14 | 15 |

16 | Run: 17 |

18 | 19 | 

 20 | $ npm install hocus-pocus --save-dev
 21 |
22 | 23 |

24 | Then import a main file just after your settings, but before rest of 25 | stylesheets. If you want to use color variables in your variables import 26 | them first: 27 |

28 | 29 | 

 30 | // Import colors (optional)
 31 | @import "node_modules/hocus-pocus/sass/colors";
 32 | 
 33 | // Define settings
 34 | $font-family-base: "Open Sans", sans-serif;
 35 | $grid-container: 70rem;
 36 | 
 37 | // Import Hocus-Pocus
 38 | @import "node_modules/hocus-pocus/hocus-pocus";
 39 | 
 40 | // Import your stylesheets
 41 | @import "compontents/meter";
 42 | @import "compontents/price-box";
 43 |
44 |
45 | 46 |
47 |

48 | Hocus-Pocus requires Sass 49 | (version 3.3.0 or later) to proper work. 50 |

51 | 52 |

53 | Run: 54 |

55 | 56 | 

 57 | $ bower install hocus-pocus
 58 |
59 | 60 |

61 | Then import a main file just after your settings, but before rest of 62 | stylesheets. If you want to use color variables in your variables import 63 | them first: 64 |

65 | 66 | 

 67 | // Import colors (optional)
 68 | @import "bower_components/hocus-pocus/sass/colors";
 69 | 
 70 | // Define settings
 71 | $font-family-base: "Open Sans", sans-serif;
 72 | $grid-container: 70rem;
 73 | 
 74 | // Import Hocus-Pocus
 75 | @import "bower_components/hocus-pocus/hocus-pocus";
 76 | 
 77 | // Import your stylesheets
 78 | @import "compontents/meter";
 79 | @import "compontents/price-box";
 80 |
81 |
82 |
83 | 84 |

85 | Hocus-Pocus applies a following naming convention: 86 |

87 | 88 | 

 89 | 
 90 | 

 91 | 
 92 | 
 93 | 
 94 | 

 95 |   
 96 |   

 97 | 

 98 | 
 99 | 
100 | 

101 | 
102 | 
103 | 
104 | 
105 | 
106 | 
107 | 
108 | 
109 | 

110 |   
111 | 

112 | 
113 | 
114 | 

115 |
116 | -------------------------------------------------------------------------------- /docs/html/_rwd.html: -------------------------------------------------------------------------------- 1 |

Responsive Design

2 | 3 |

4 | Choose approach of writing responsive design that you prefer: 5 | mobile-first or desktop-first. 6 |

7 | 8 |

9 | Define custom breakpoints. Each of them gets a mixin and own set of helpers. 10 |

11 | 12 |

13 | Defaults: 14 |

15 | 16 | 

 17 | $rwd-type: mobile-first;  // choose between `mobile-first` and `desktop-first`
 18 | $rwd-map: (
 19 |   'compact': 320px 414px,
 20 |   'regular': 415px
 21 | );                        // helpers are based on this map
 22 |
23 | 24 |

25 | Additional helper for hidpi displays: 26 |

27 | 28 | 

 29 | @include hidpi($density); // in dpi, defaults to 192 (retina displays)
 30 |
31 | 32 |

33 | Usage: 34 |

35 | 36 | 

 37 | @include rwd('compact') {
 38 |   h1 {
 39 |     color: $color-red;
 40 |   }
 41 | }
 42 | 
 43 | @include hidpi {
 44 |   .logo {
 45 |     background-image: url('logo@2x.png');
 46 |   }
 47 | }
 48 |
49 | 50 | 

 51 | 
...

 52 | 
 53 | 
 54 | 

 55 |   

 56 |     ...
 57 |   

 58 | 
 59 |   

 60 |     

 61 |       ...
 62 |     

 63 |   

 64 | 

 65 |
66 | 67 |

Width Helpers

68 | 69 |

70 | Width helpers work with various elements like grid items, boxes, form inputs, 71 | table cells etc. 72 |

73 | 74 |

75 | Fractions of these numbers are available: n/1, n/2, 76 | n/3, n/4, n/5, n/6, 77 | n/8, n/9, n/10 and n/12. 78 |

79 | 80 |

81 | Width helpers are generated for each breakpoint in $rwd-map. 82 |

83 | 84 |

85 | Usage: 86 |

87 | 88 |
89 |
90 |
91 | .1/1 92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 | .1/4, .2/8, .3/12 100 |
101 |
102 |
103 |
104 | .3/4, .6/8, .9/12 105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 | .2/5, .4/10 113 |
114 |
115 |
116 |
117 | .3/5, .6/10 118 |
119 |
120 |
121 | 122 |
123 |
124 |
125 | .1/6, .2/12 126 |
127 |
128 |
129 |
130 | .5/6, .10/12 131 |
132 |
133 |
134 | 135 |
136 |
137 |
138 | .1/2, .2/4, .3/6, .4/8, .5/10, .6/12 139 |
140 |
141 |
142 |
143 | .1/8 144 |
145 |
146 |
147 |
148 | .3/8 149 |
150 |
151 |
152 | 153 |
154 |
155 |
156 | .1/5.compact-1/2 157 |
158 |
159 |
160 |
161 | .4/5.compact-1/2 162 |
163 |
164 |
165 | 166 |

Visibility Helpers

167 | 168 |

169 | Specify visibility of an element. 170 |

171 | 172 |

173 | Visibility helpers use !important and are generated for each breakpoint in $rwd-map. 174 |

175 | 176 |

177 | Following classes are available: .hidden, .visible, 178 | .block, .inline-block and .inline 179 |

180 | 181 |

182 | Usage: 183 |

184 | 185 |
186 |

Inline paragraph hidden on mobile

187 | 188 |
189 | 190 | 

191 | 
Inline paragraph hidden on mobile

192 | 
193 |
194 | 195 |

Spacing Helpers

196 | 197 |

198 | Specify spacing (margin/padding) of an element. 199 |

200 | 201 |

202 | Spacing helpers use !important and are generated for each size 203 | in $spacing-map and each breakpoint in $rwd-map. 204 |

205 | 206 |

207 | Defaults: 208 |

209 | 210 | 

211 | // spacing helpers and media gutter modifiers are generated based on this map
212 | $spacing-map: (
213 |   '1/4': $spacing-unit / 4,
214 |   '1/3': $spacing-unit / 3,
215 |   '1/2': $spacing-unit / 2,
216 |   '2/1': $spacing-unit * 2,
217 |   '3/1': $spacing-unit * 3,
218 |   '4/1': $spacing-unit * 4
219 | );
220 |
221 | 222 |

223 | Usage: 224 |

225 | 226 | 

227 | .margin[-size][-type];
228 | .padding[-size][-type];
229 | .no-margin[-type];
230 | .no-padding[-type];
231 | 
232 | /*
233 |  * Where [-type] is blank (all values) or one of these values:
234 |  *   -top, -right, -bottom, -left, -horizontal, -vertical
235 |  *
236 |  * Where [-size] is blank ($spacing-unit) or one of these values:
237 |  *   -1/4, -1/3, -1/2, -2/1, -3/1, -4/1
238 |  */
239 |
240 | 241 |
242 |
243 | .padding-vertical 244 |
245 |
246 | .margin.no-padding 247 |
248 |
249 | .margin-2/1-bottom 250 |
251 |
252 | .padding-1/2-left.padding-1/2-top.compact-no-padding-left 253 |
254 |
255 | .compact-margin-horizontal 256 |
257 |
258 | .compact-padding-1/2 259 |
260 |
261 | 262 | 

263 | 
...

264 | 
...

265 | 
...

266 | 
...

267 | 
...

268 | 
...

269 |
270 | -------------------------------------------------------------------------------- /docs/html/_sticky-footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | Pin footer to the bottom of a viewport regardless of the content. 5 |

6 | 7 |

8 | Usage: 9 |

10 | 11 | 

12 | 
13 |   
 
14 |     ...
15 |   

16 |   
...

17 | 
18 |
19 | -------------------------------------------------------------------------------- /docs/html/_tables.html: -------------------------------------------------------------------------------- 1 |

Tables

2 | 3 |

4 | Defaults: 5 |

6 | 7 | 

  8 | $table-zebra-background: rgba($color-ui, .5);     // zebra table highlight color
  9 | $table-hover-background: $table-zebra-background; // hover table highlight color
 10 |
11 | 12 |

13 | Usage: 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 |
Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F
Cell GCell HCell I
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 | 

 
 
 
 
Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F
Cell GCell HCell I

 82 |
83 | 84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 |
Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F
Cell GCell HCell I
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 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 |
Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F
Cell GCell HCell I
146 |
147 | 148 | 

149 | 
150 |   ...
151 | 

152 |
153 | 154 |
155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 |
Header 1Header 2Header 3
Cell ACell BCell C
Cell DCell ECell F
Cell GCell HCell I
181 |
182 | 183 | 

184 | 
185 |   ...
186 | 

187 |
188 | -------------------------------------------------------------------------------- /docs/html/_typography.html: -------------------------------------------------------------------------------- 1 |

Typography

2 | 3 |

4 | Typography elements keep vertical rhythm and have custom reset. 5 |

6 | 7 |

8 | Defaults: 9 |

10 | 11 | 

 12 | $font-leading: 1.5;                       // base font leading
 13 | $font-size-micro: .8rem;                  // font size of `.text-micro`
 14 | $font-size-small: .9rem;                  // font size of `small` and `.text-small`
 15 | $font-size-base: 1rem;                    // base font size
 16 | $font-size-lead: 1.2rem;                  // font size of `.text-lead` element
 17 | $font-size-btn: $font-size-base;          // font size of buttons
 18 | 
 19 | $font-size-h1: 3rem;                      // font size of headings
 20 | $font-size-h2: 2rem;
 21 | $font-size-h3: 1.5rem;
 22 | $font-size-h4: 1.4rem;
 23 | $font-size-h5: 1.3rem;
 24 | $font-size-h6: 1.2rem;
 25 | 
 26 | $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 27 | $font-family-headings: $font-family-base;
 28 | $font-family-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 29 | 
 30 | $font-weight-light: 100;                  // light font weight
 31 | $font-weight-normal: 400;                 // normal/base font weight
 32 | $font-weight-bold: 700;                   // bold font weight
 33 | $font-weight-headings: $font-weight-bold; // default font weight of headings
 34 | 
 35 | $link-underline: true;                    // should links have underline
 36 | $link-active: false;                      // should active links look like clicked
 37 |
38 | 39 |

Headings

40 | 41 |
42 |

Heading Level 1

43 |
44 | 45 | 

 46 | 
Heading Level 1

 47 | Heading Level 1
 48 |
49 | 50 |
51 |

Heading Level 2

52 |
53 | 54 | 

 55 | 
Heading Level 2

 56 | Heading Level 2
 57 |
58 | 59 |
60 |

Heading Level 3

61 |
62 | 63 | 

 64 | 
Heading Level 3

 65 | Heading Level 3
 66 |
67 | 68 |
69 |

Heading Level 4

70 |
71 | 72 | 

 73 | 
Heading Level 4

 74 | Heading Level 4
 75 |
76 | 77 |
78 |
Heading Level 5
79 |
80 | 81 | 

 82 | 
Heading Level 5

 83 | Heading Level 5
 84 |
85 | 86 |
87 |
Heading Level 6
88 |
89 | 90 | 

 91 | 
Heading Level 6

 92 | Heading Level 6
 93 |
94 | 95 |

Paragraphs

96 | 97 |

98 | Default styles for <p>, <strong>, 99 | <em>, <sup>, <sub>, 100 | <small>, <a>, <mark>, 101 | <del>, <ins>, <s> 102 | and <u>. 103 |

104 | 105 |
106 |

Paragraph with a strong element.

107 |

Paragraph with an emphasis element.

108 |

Paragraph with a sup element.

109 |

Paragraph with a sub element.

110 |

Paragraph with a small element.

111 |

Paragraph with a link.

112 |

Paragraph with a mark element.

113 |

Paragraph with a deleted text and an inserted text elements.

114 |

Paragraph with a strikethrough element.

115 |

Paragraph with an underline element.

116 |
117 | 118 | 

119 | 
Paragraph with a strong element.

120 | 
Paragraph with an emphasis element.

121 | 
Paragraph with a sup element.

122 | 
Paragraph with a sub element.

123 | 
Paragraph with a small element.

124 | 
Paragraph with a link.

125 | 
Paragraph with a mark element.

126 | 
Paragraph with a deleted text and an inserted text elements.

127 | 
Paragraph with a strikethrough element.

128 | 
Paragraph with an underline element.

129 |
130 | 131 |

Blockquote

132 | 133 |
134 |
135 |

136 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. 137 | Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. 138 |

139 |
140 |
141 | 142 | 

143 | 

144 |   

145 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna.
146 |     Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida.
147 |   

148 | 

149 |
150 | 151 |

Code

152 | 153 |
154 | 155 | .hocus-pocus { 156 | display: block; 157 | } 158 | 159 |
160 | 161 | 

162 | 
163 |   .hocus-pocus {
164 |     display: block;
165 |   }
166 | 
167 |
168 | 169 |

Rule

170 | 171 |
172 |
173 |
174 | 175 | 

176 | 

177 |
178 | 179 |

Text Helpers

180 | 181 |
182 |

Micro text

183 |

Small text

184 |

Normal text

185 |

Lead text

186 |
187 | 188 | 

189 | 
Micro text

190 | 
Small text

191 | 
Normal text

192 | 
Lead text

193 |
194 | 195 |
196 |

Mono text

197 |
198 | 199 | 

200 | 
Mono text

201 |
202 | 203 |
204 |

Light weight text

205 |

Normal weight text

206 |

Bold weight text

207 |
208 | 209 | 

210 | 
Light weight text

211 | 
Normal weight text

212 | 
Bold weight text

213 |
214 | 215 |
216 |

Lowercased text

217 |

Uppercased text

218 |

Capitalized text

219 |
220 | 221 | 

222 | 
Lowercased text

223 | 
Uppercased text

224 | 
Capitalized text

225 |
226 | 227 |
228 |

Left aligned text

229 |

Center aligned text

230 |

Right aligned text

231 |
232 | 233 | 

234 | 
Left aligned text

235 | 
Center aligned text

236 | 
Right aligned text

237 |
238 | -------------------------------------------------------------------------------- /docs/html/partials/_badge.html: -------------------------------------------------------------------------------- 1 | 51 | -------------------------------------------------------------------------------- /docs/html/partials/_navigation.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /docs/img/brand-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartkozal/hocus-pocus/e0b7f9584f27e8c07f4ece20e9b038de40775835/docs/img/brand-dark.png -------------------------------------------------------------------------------- /docs/img/brand-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartkozal/hocus-pocus/e0b7f9584f27e8c07f4ece20e9b038de40775835/docs/img/brand-light.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | Universal and lightweight stylesheet starter kit - Hocus-Pocus 13 | 14 | 18 | 19 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 |
37 | 38 |
39 |
40 |
41 | 47 | 48 | 77 |
78 |
79 |
80 | 81 | 82 | 83 | 84 | 100 | 124 | 125 | 126 | -------------------------------------------------------------------------------- /docs/sass/_code.scss: -------------------------------------------------------------------------------- 1 | %code { 2 | background-color: $color-black; 3 | color: #c5c8c6; 4 | font-family: $font-family-monospace; 5 | font-size: $font-size-micro; 6 | } 7 | 8 | %code-block { 9 | @extend %code; 10 | margin-bottom: $spacing-unit; 11 | padding: $spacing-unit / 3; 12 | border-radius: $ui-border-radius; 13 | color: $color-white; 14 | } 15 | 16 | li > code, 17 | p > code { 18 | @extend %code; 19 | margin-right: $spacing-unit / 8; 20 | margin-left: $spacing-unit / 8; 21 | padding: ($spacing-unit / 8) ($spacing-unit / 4); 22 | background-color: rgba($color-silver, .5); 23 | color: rgba($color-black, .8); 24 | } 25 | -------------------------------------------------------------------------------- /docs/sass/_color-block.scss: -------------------------------------------------------------------------------- 1 | .color-block { 2 | @extend %code-block; 3 | padding: ($spacing-unit / 4) ($spacing-unit / 2); 4 | 5 | &.bg-white { 6 | border: 1px solid $color-ui; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /docs/sass/_example.scss: -------------------------------------------------------------------------------- 1 | .example { 2 | padding: $spacing-unit; 3 | border: 1px solid $color-ui; 4 | border-bottom: 0; 5 | 6 | > *:last-child { 7 | margin-top: 0; 8 | margin-bottom: 0; 9 | } 10 | 11 | + pre { 12 | margin-bottom: $spacing-unit * 2; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /docs/sass/_highlight.scss: -------------------------------------------------------------------------------- 1 | pre { 2 | margin-bottom: $spacing-unit * 2; 3 | padding: $spacing-unit / 2; 4 | background: #1d1f21; 5 | color: #c5c8c6; 6 | font-size: $font-size-small; 7 | line-height: $font-leading; 8 | 9 | &::first-line { 10 | font-size: 0; 11 | } 12 | } 13 | 14 | .hljs-title, 15 | .hljs-name { 16 | color: #f0c674; 17 | } 18 | 19 | .hljs-comment, 20 | .hljs-meta, 21 | .hljs-meta .hljs-keyword { 22 | color: #707880; 23 | } 24 | 25 | .hljs-number, 26 | .hljs-symbol, 27 | .hljs-literal, 28 | .hljs-deletion, 29 | .hljs-link { 30 | color: #cc6666; 31 | } 32 | 33 | .hljs-string, 34 | .hljs-doctag, 35 | .hljs-addition, 36 | .hljs-regexp, 37 | .hljs-selector-attr, 38 | .hljs-selector-pseudo { 39 | color: #b5bd68; 40 | } 41 | 42 | .hljs-attribute, 43 | .hljs-code, 44 | .hljs-selector-id { 45 | color: #b294bb; 46 | } 47 | 48 | .hljs-keyword, 49 | .hljs-selector-tag, 50 | .hljs-bullet, 51 | .hljs-tag { 52 | color: #81a2be; 53 | } 54 | 55 | .hljs-subst, 56 | .hljs-variable, 57 | .hljs-template-tag, 58 | .hljs-template-variable { 59 | color: #8abeb7; 60 | } 61 | 62 | .hljs-type, 63 | .hljs-built-in, 64 | .hljs-builtin-name, 65 | .hljs-quote, 66 | .hljs-section, 67 | .hljs-selector-class { 68 | color: #de935f; 69 | } 70 | 71 | .hljs-emphasis { 72 | font-style: italic; 73 | } 74 | 75 | .hljs-strong { 76 | font-weight: bold; 77 | } 78 | -------------------------------------------------------------------------------- /docs/sass/_list-tabs.scss: -------------------------------------------------------------------------------- 1 | .list-tabs { 2 | @extend %list-inline; 3 | margin-bottom: $spacing-unit; 4 | padding-left: $spacing-unit / 4; 5 | border-bottom: 1px solid $color-ui; 6 | 7 | > li { 8 | margin-bottom: -1px; 9 | border: 1px solid $color-body; 10 | border-bottom: 1px solid $color-ui; 11 | 12 | &.is-active { 13 | border: 1px solid $color-ui; 14 | border-bottom: 1px solid $color-body; 15 | } 16 | 17 | > a { 18 | display: block; 19 | padding: ($spacing-unit / 3) ($spacing-unit / 2); 20 | text-decoration: none; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /docs/sass/_navigation.scss: -------------------------------------------------------------------------------- 1 | .navigation { 2 | position: fixed; 3 | 4 | .is-active { 5 | transition: all .3s ease; 6 | border-radius: $ui-border-radius; 7 | background-color: $color-blue; 8 | color: $color-white; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /docs/sass/_preview.scss: -------------------------------------------------------------------------------- 1 | .preview-grid { 2 | @extend %code-block; 3 | padding: ($spacing-unit / 4) ($spacing-unit / 2); 4 | background-color: $color-blue; 5 | color: $color-white; 6 | text-align: center; 7 | 8 | .grid-pair > .grid-item > & { 9 | text-align: inherit; 10 | } 11 | 12 | .example & { 13 | margin-bottom: 0; 14 | } 15 | 16 | .preview-grid { 17 | margin-bottom: 0; 18 | border-radius: 0; 19 | background-color: $color-aqua; 20 | } 21 | } 22 | 23 | .preview-grid-large { 24 | padding-top: $spacing-unit * 2; 25 | padding-bottom: $spacing-unit * 2; 26 | } 27 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | del = require('del'), 3 | sequence = require('gulp-sequence'), 4 | connect = require('gulp-connect'), 5 | file = require('gulp-file'), 6 | sass = require('gulp-sass'), 7 | util = require('gulp-util'), 8 | include = require('gulp-html-tag-include'), 9 | highlight = require('gulp-highlight'); 10 | 11 | var paths = { 12 | build: { 13 | src: 'build/**/*', 14 | dest: 'build' 15 | }, 16 | sass: { 17 | src: 'docs/docs.scss', 18 | dest: 'build', 19 | watch: ['docs/sass/*.scss', 'sass/*.scss', 'docs/docs.scss', 'hocus-pocus.scss'] 20 | }, 21 | img: { 22 | src: 'docs/img/*.png', 23 | dest: 'build/img' 24 | }, 25 | html: { 26 | src: 'docs/index.html', 27 | dest: 'build', 28 | watch: ['docs/html/*.html', 'docs/index.html'] 29 | } 30 | }; 31 | 32 | gulp.task('sass', function() { 33 | return gulp.src(paths.sass.src) 34 | .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)) 35 | .pipe(gulp.dest(paths.sass.dest)) 36 | .pipe(connect.reload()); 37 | }); 38 | 39 | gulp.task('img', function() { 40 | return gulp.src(paths.img.src) 41 | .pipe(gulp.dest(paths.img.dest)); 42 | }); 43 | 44 | gulp.task('html', function() { 45 | return gulp.src(paths.html.src) 46 | .pipe(include()) 47 | .pipe(highlight()) 48 | .pipe(gulp.dest(paths.html.dest)) 49 | .pipe(connect.reload()); 50 | }); 51 | 52 | gulp.task('clean', function() { 53 | return del([paths.build.dest]); 54 | }); 55 | 56 | gulp.task('build', sequence('clean', ['sass', 'img', 'html'])); 57 | 58 | gulp.task('watch', function() { 59 | gulp.watch(paths.sass.watch, ['sass']); 60 | gulp.watch(paths.html.watch, ['html']); 61 | }); 62 | 63 | gulp.task('connect', function() { 64 | connect.server({ 65 | root: paths.build.dest, 66 | livereload: true 67 | }); 68 | }); 69 | 70 | gulp.task('serve', sequence('build', ['watch', 'connect'])); 71 | gulp.task('default', ['serve']); 72 | -------------------------------------------------------------------------------- /hocus-pocus.scss: -------------------------------------------------------------------------------- 1 | @import 'sass/colors', 2 | 'sass/defaults', 3 | 'sass/normalize', 4 | 'sass/box-sizing', 5 | 'sass/rwd', 6 | 'sass/grid', 7 | 'sass/helpers-width', 8 | 'sass/helpers-color', 9 | 'sass/helpers-spacing', 10 | 'sass/helpers-visibility', 11 | 'sass/helpers-float', 12 | 'sass/base', 13 | 'sass/type', 14 | 'sass/list', 15 | 'sass/rule', 16 | 'sass/image', 17 | 'sass/table', 18 | 'sass/form', 19 | 'sass/button', 20 | 'sass/box', 21 | 'sass/media', 22 | 'sass/sticky-footer'; 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hocus-pocus", 3 | "version": "0.3.5", 4 | "homepage": "https://brtjkzl.github.io/hocus-pocus", 5 | "author": "Bart Kozal ", 6 | "description": "Universal and lightweight stylesheet starter kit", 7 | "main": "hocus-pocus.scss", 8 | "style": "hocus-pocus.scss", 9 | "keywords": [ 10 | "css", 11 | "sass", 12 | "scss", 13 | "framework" 14 | ], 15 | "license": "MIT", 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/brtjkzl/hocus-pocus.git" 19 | }, 20 | "scripts": { 21 | "start": "npm run dev", 22 | "dev": "gulp serve", 23 | "deploy": "gulp build && push-dir --dir=build --branch=gh-pages --force --cleanup --verbose", 24 | "lint": "stylelint 'sass/*.scss'" 25 | }, 26 | "files": [ 27 | "hocus-pocus.scss", 28 | "sass" 29 | ], 30 | "devDependencies": { 31 | "del": "^2.2.2", 32 | "gulp": "^3.9.1", 33 | "gulp-connect": "^5.0.0", 34 | "gulp-file": "^0.3.0", 35 | "gulp-gh-pages": "^0.5.4", 36 | "gulp-highlight": "^2.1.0", 37 | "gulp-html-tag-include": "^1.0.1", 38 | "gulp-sass": "^2.3.2", 39 | "gulp-sequence": "^0.4.6", 40 | "gulp-util": "^3.0.7", 41 | "push-dir": "^0.4.1", 42 | "stylelint": "^7.9.0", 43 | "stylelint-config-recess-order": "^1.0.0", 44 | "stylelint-config-standard": "^16.0.0" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /sass/_base.scss: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6, 2 | p, ul, ol, dl, dd, hr, 3 | blockquote, pre, table, th, td, 4 | form, fieldset, caption, legend { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | p, ul, ol, dl, hr, 10 | blockquote, pre, table, form { 11 | margin-bottom: $spacing-unit; 12 | } 13 | 14 | ul ul, 15 | ol ol, 16 | ul ol, 17 | ol ul { 18 | margin-top: 0; 19 | margin-bottom: 0; 20 | } 21 | 22 | html { 23 | overflow-y: scroll; 24 | } 25 | 26 | body { 27 | font-family: $font-family-base; 28 | font-weight: $font-weight-normal; 29 | color: $color-text; 30 | background-color: $color-body; 31 | } 32 | -------------------------------------------------------------------------------- /sass/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *::before, *::after { 6 | box-sizing: inherit; 7 | } 8 | 9 | img { 10 | box-sizing: content-box; 11 | } 12 | -------------------------------------------------------------------------------- /sass/_box.scss: -------------------------------------------------------------------------------- 1 | %box, 2 | .box { 3 | padding: $spacing-unit / 2; 4 | 5 | > *:last-child { 6 | margin-bottom: 0; 7 | } 8 | } 9 | 10 | @mixin box($name, $color, $contrast: 25%) { 11 | .box-#{$name} { 12 | color: darken($color, $contrast); 13 | background: lighten($color, $contrast); 14 | } 15 | } 16 | 17 | @include box("informative", $color-informative); 18 | @include box("positive", $color-positive); 19 | @include box("cautionary", $color-cautionary); 20 | @include box("negative", $color-negative); 21 | -------------------------------------------------------------------------------- /sass/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin btn($name, $color, $color-text: $color-white) { 2 | .btn-#{$name} { 3 | color: $color-text; 4 | background-color: $color; 5 | border-bottom-color: darken($color, 25%); 6 | 7 | &:hover { 8 | background-color: lighten($color, 5%); 9 | } 10 | 11 | &.btn-outline { 12 | color: $color; 13 | background-color: transparent; 14 | border-color: $color; 15 | } 16 | } 17 | } 18 | 19 | input[type="button"], 20 | input[type="submit"], 21 | button, 22 | .btn { 23 | display: inline-block; 24 | padding: ($spacing-unit / 4) ($spacing-unit / 2); 25 | margin: 0; 26 | font-size: $font-size-btn; 27 | color: $color-white; 28 | text-decoration: none; 29 | white-space: nowrap; 30 | cursor: pointer; 31 | background-color: $color-btn; 32 | border: 0; 33 | border-bottom-color: darken($color-btn, 25%); 34 | border-bottom-style: solid; 35 | border-radius: $ui-border-radius; 36 | -moz-appearance: none; 37 | -webkit-appearance: none; 38 | 39 | @if not $btn-flat { 40 | vertical-align: 1px; 41 | border-bottom-width: 2px; 42 | } 43 | 44 | &:hover { 45 | background-color: lighten($color-btn, 5%); 46 | } 47 | } 48 | 49 | button[disabled], 50 | .btn-disabled { 51 | color: darken($color-disabled, 25%); 52 | cursor: not-allowed; 53 | background-color: $color-disabled; 54 | border-bottom-color: darken($color-disabled, 20%); 55 | 56 | &:hover { 57 | background-color: $color-disabled; 58 | } 59 | 60 | @if $link-active { 61 | &:active { 62 | top: 0; 63 | } 64 | } 65 | } 66 | 67 | .btn-outline { 68 | color: $color-btn; 69 | vertical-align: 0; 70 | background-color: transparent; 71 | border: 1px solid $color-btn; 72 | 73 | &:hover { 74 | background-color: transparent; 75 | } 76 | } 77 | 78 | .btn-flat { 79 | border-bottom-width: 0; 80 | } 81 | 82 | .btn-shadow { 83 | border-bottom-width: 2px; 84 | } 85 | 86 | .btn-block { 87 | display: block; 88 | padding-right: 0; 89 | padding-left: 0; 90 | text-align: center; 91 | } 92 | 93 | @include btn('brand', $color-brand); 94 | @include btn('positive', $color-positive); 95 | @include btn('negative', $color-negative); 96 | -------------------------------------------------------------------------------- /sass/_colors.scss: -------------------------------------------------------------------------------- 1 | $color-white: #fff !default; 2 | $color-silver: #ddd !default; 3 | $color-gray: #aaa !default; 4 | $color-black: #111 !default; 5 | $color-red: #ff4136 !default; 6 | $color-orange: #ff851b !default; 7 | $color-yellow: #ffdc00 !default; 8 | $color-lime: #01ff70 !default; 9 | $color-green: #2ecc40 !default; 10 | $color-olive: #3d9970 !default; 11 | $color-teal: #39cccc !default; 12 | $color-aqua: #7fdbff !default; 13 | $color-blue: #0074d9 !default; 14 | $color-navy: #001f3f !default; 15 | $color-fuchsia: #f012be !default; 16 | $color-purple: #b10dc9 !default; 17 | $color-maroon: #85144b !default; 18 | $color-grey: $color-gray; 19 | -------------------------------------------------------------------------------- /sass/_defaults.scss: -------------------------------------------------------------------------------- 1 | $color-body: $color-white !default; 2 | $color-ui: $color-silver !default; 3 | $color-btn: $color-black !default; 4 | $color-text: $color-black !default; 5 | $color-link: $color-blue !default; 6 | $color-muted: $color-gray !default; 7 | $color-small: $color-text !default; 8 | $color-disabled: $color-ui !default; 9 | 10 | $color-brand: $color-blue !default; 11 | $color-positive: $color-green !default; 12 | $color-cautionary: $color-yellow !default; 13 | $color-negative: $color-red !default; 14 | $color-informative: $color-blue !default; 15 | 16 | $color-map: ( 17 | 'white': $color-white, 18 | 'silver': $color-silver, 19 | 'gray': $color-gray, 20 | 'black': $color-black, 21 | 'red': $color-red, 22 | 'orange': $color-orange, 23 | 'yellow': $color-yellow, 24 | 'lime': $color-lime, 25 | 'green': $color-green, 26 | 'olive': $color-olive, 27 | 'teal': $color-teal, 28 | 'aqua': $color-aqua, 29 | 'blue': $color-blue, 30 | 'navy': $color-navy, 31 | 'fuchsia': $color-fuchsia, 32 | 'purple': $color-purple, 33 | 'maroon': $color-maroon, 34 | 'brand': $color-brand, 35 | 'positive': $color-positive, 36 | 'cautionary': $color-cautionary, 37 | 'negative': $color-negative, 38 | 'informative': $color-informative, 39 | 'muted': $color-muted 40 | ) !default; 41 | 42 | $rwd-type: mobile-first !default; 43 | $rwd-map: ( 44 | 'compact': 320px 414px, 45 | 'regular': 415px 46 | ) !default; 47 | 48 | $vertical-align-body: 16 !default; 49 | $vertical-align-factor: 1.5 !default; 50 | 51 | $font-leading: 1.5 !default; 52 | 53 | $font-size-micro: .8rem !default; 54 | $font-size-small: .9rem !default; 55 | $font-size-base: 1rem !default; 56 | $font-size-lead: 1.2rem !default; 57 | $font-size-btn: $font-size-base !default; 58 | 59 | $font-size-h1: 3rem !default; 60 | $font-size-h2: 2rem !default; 61 | $font-size-h3: 1.5rem !default; 62 | $font-size-h4: 1.4rem !default; 63 | $font-size-h5: 1.3rem !default; 64 | $font-size-h6: 1.2rem !default; 65 | 66 | $font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !default; 67 | $font-family-headings: $font-family-base !default; 68 | $font-family-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace !default; 69 | 70 | $font-weight-light: 100 !default; 71 | $font-weight-normal: 400 !default; 72 | $font-weight-bold: 700 !default; 73 | $font-weight-headings: $font-weight-bold !default; 74 | 75 | $link-underline: true !default; 76 | $link-active: false !default; 77 | 78 | $spacing-unit: $font-size-base * $font-leading !default; 79 | $spacing-map: ( 80 | '1/4': $spacing-unit / 4, 81 | '1/3': $spacing-unit / 3, 82 | '1/2': $spacing-unit / 2, 83 | '2/1': $spacing-unit * 2, 84 | '3/1': $spacing-unit * 3, 85 | '4/1': $spacing-unit * 4 86 | ) !default; 87 | 88 | $grid-container: 1020px !default; 89 | $grid-gutter: $spacing-unit !default; 90 | 91 | $ui-border-radius: 4px !default; 92 | 93 | $list-menu-color: $color-white !default; 94 | $list-menu-background: $color-link !default; 95 | 96 | $btn-flat: false !default; 97 | 98 | $table-zebra-background: rgba($color-ui, .5) !default; 99 | $table-hover-background: $table-zebra-background !default; 100 | -------------------------------------------------------------------------------- /sass/_form.scss: -------------------------------------------------------------------------------- 1 | input, 2 | button, 3 | select, 4 | textarea { 5 | font-family: inherit; 6 | font-size: inherit; 7 | line-height: inherit; 8 | } 9 | 10 | label, 11 | textarea, 12 | input[type="file"] { 13 | display: block; 14 | } 15 | 16 | input { 17 | cursor: pointer; 18 | } 19 | 20 | input, 21 | input[type="text"], 22 | input[type="email"], 23 | input[type="password"], 24 | input[type="search"], 25 | input[type="url"], 26 | textarea { 27 | padding: $spacing-unit / 4; 28 | border: 1px solid $color-ui; 29 | } 30 | 31 | input[type="search"] { 32 | border-radius: $ui-border-radius * 3; 33 | } 34 | 35 | input[type="radio"], 36 | input[type="checkbox"] { 37 | position: relative; 38 | bottom: 1px; 39 | margin-right: $spacing-unit / 2; 40 | vertical-align: middle; 41 | } 42 | 43 | input[disabled], 44 | input[readonly] { 45 | background-color: lighten($color-ui, 5%); 46 | 47 | &:hover { 48 | cursor: not-allowed; 49 | } 50 | } 51 | 52 | .form-inline { 53 | margin-bottom: 0; 54 | 55 | label { 56 | display: inline-block; 57 | } 58 | 59 | > * { 60 | margin-right: $spacing-unit / 4; 61 | } 62 | } 63 | 64 | .form-stacked { 65 | label { 66 | display: table; 67 | margin-bottom: $spacing-unit / 3; 68 | } 69 | 70 | label + input, 71 | label + select, 72 | label + textarea, 73 | label:not([for]) { 74 | margin-bottom: $spacing-unit; 75 | } 76 | 77 | button { 78 | display: table; 79 | } 80 | } 81 | 82 | .form-horizontal { 83 | .form-item { 84 | margin-bottom: $spacing-unit; 85 | 86 | label { 87 | display: inline-block; 88 | width: 25%; 89 | padding: ($spacing-unit / 4) ($spacing-unit / 2); 90 | margin: 0; 91 | text-align: right; 92 | } 93 | } 94 | 95 | .form-group { 96 | padding-left: $spacing-unit / 4; 97 | margin-left: 25%; 98 | 99 | label { 100 | margin-bottom: $spacing-unit; 101 | } 102 | } 103 | 104 | button { 105 | display: inline-block; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /sass/_grid.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: $grid-container; 3 | padding-right: $grid-gutter; 4 | padding-left: $grid-gutter; 5 | margin: auto; 6 | } 7 | 8 | .grid { 9 | display: flex; 10 | flex: 0 1 auto; 11 | flex-direction: row; 12 | flex-wrap: wrap; 13 | margin-right: $grid-gutter / -2; 14 | margin-left: $grid-gutter / -2; 15 | } 16 | 17 | .grid-item { 18 | padding-right: $grid-gutter / 2; 19 | padding-left: $grid-gutter / 2; 20 | } 21 | 22 | .grid-left { 23 | justify-content: flext-start; 24 | } 25 | 26 | .grid-center { 27 | justify-content: center; 28 | } 29 | 30 | .grid-right { 31 | justify-content: flex-end; 32 | } 33 | 34 | .grid-top { 35 | align-items: flex-start; 36 | } 37 | 38 | .grid-middle { 39 | align-items: center; 40 | } 41 | 42 | .grid-bottom { 43 | align-items: flex-end; 44 | } 45 | 46 | .grid-reverse { 47 | flex-direction: row-reverse; 48 | } 49 | 50 | .grid-stack { 51 | flex-direction: column; 52 | 53 | &.grid-reverse { 54 | flex-direction: column-reverse; 55 | } 56 | 57 | > .grid-item { 58 | flex-basis: auto; 59 | } 60 | } 61 | 62 | .grid-flat { 63 | margin-right: 0; 64 | margin-left: 0; 65 | 66 | > .grid-item { 67 | padding-right: 0; 68 | padding-left: 0; 69 | } 70 | } 71 | 72 | .grid-pair { 73 | > .grid-item { 74 | text-align: left; 75 | 76 | + .grid-item { 77 | text-align: right; 78 | } 79 | } 80 | } 81 | 82 | @mixin rwd-helpers-content($rwd-screen-name) { 83 | .#{$rwd-screen-name}-grid-reverse { 84 | flex-direction: row-reverse; 85 | } 86 | 87 | .#{$rwd-screen-name}-grid-stack { 88 | flex-direction: column; 89 | 90 | &.#{$rwd-screen-name}-grid-reverse { 91 | flex-direction: column-reverse; 92 | } 93 | 94 | > .grid-item { 95 | flex-basis: auto; 96 | } 97 | } 98 | } 99 | 100 | @include rwd-helpers; 101 | -------------------------------------------------------------------------------- /sass/_helpers-color.scss: -------------------------------------------------------------------------------- 1 | @each $name, $color in $color-map { 2 | .text-#{$name} { 3 | color: $color !important; 4 | } 5 | 6 | .bg-#{$name} { 7 | background-color: $color !important; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sass/_helpers-float.scss: -------------------------------------------------------------------------------- 1 | .clearfix { 2 | &::before, 3 | &::after { 4 | display: table; 5 | content: ' '; 6 | } 7 | 8 | &::after { 9 | clear: both; 10 | } 11 | } 12 | 13 | .float-left { 14 | float: left; 15 | } 16 | 17 | .float-right { 18 | float: right; 19 | } 20 | -------------------------------------------------------------------------------- /sass/_helpers-spacing.scss: -------------------------------------------------------------------------------- 1 | @each $attr in margin, padding { 2 | .#{$attr} { 3 | #{$attr}: $spacing-unit !important; 4 | } 5 | 6 | .#{$attr}-top { 7 | #{$attr}-top: $spacing-unit !important; 8 | } 9 | 10 | .#{$attr}-right { 11 | #{$attr}-right: $spacing-unit !important; 12 | } 13 | 14 | .#{$attr}-bottom { 15 | #{$attr}-bottom: $spacing-unit !important; 16 | } 17 | 18 | .#{$attr}-left { 19 | #{$attr}-left: $spacing-unit !important; 20 | } 21 | 22 | .#{$attr}-horizontal { 23 | #{$attr}-right: $spacing-unit !important; 24 | #{$attr}-left: $spacing-unit !important; 25 | } 26 | 27 | .#{$attr}-vertical { 28 | #{$attr}-top: $spacing-unit !important; 29 | #{$attr}-bottom: $spacing-unit !important; 30 | } 31 | 32 | .no-#{$attr} { 33 | #{$attr}: 0 !important; 34 | } 35 | 36 | .no-#{$attr}-top { 37 | #{$attr}-top: 0 !important; 38 | } 39 | 40 | .no-#{$attr}-right { 41 | #{$attr}-right: 0 !important; 42 | } 43 | 44 | .no-#{$attr}-bottom { 45 | #{$attr}-bottom: 0 !important; 46 | } 47 | 48 | .no-#{$attr}-left { 49 | #{$attr}-left: 0 !important; 50 | } 51 | 52 | .no-#{$attr}-horizontal { 53 | #{$attr}-right: 0 !important; 54 | #{$attr}-left: 0 !important; 55 | } 56 | 57 | .no-#{$attr}-vertical { 58 | #{$attr}-top: 0 !important; 59 | #{$attr}-bottom: 0 !important; 60 | } 61 | 62 | @each $name, $size in $spacing-map { 63 | [class~="#{$attr}-#{$name}"] { 64 | #{$attr}: #{$size} !important; 65 | } 66 | 67 | [class~="#{$attr}-#{$name}-top"] { 68 | #{$attr}-top: #{$size} !important; 69 | } 70 | 71 | [class~="#{$attr}-#{$name}-right"] { 72 | #{$attr}-right: #{$size} !important; 73 | } 74 | 75 | [class~="#{$attr}-#{$name}-bottom"] { 76 | #{$attr}-bottom: #{$size} !important; 77 | } 78 | 79 | [class~="#{$attr}-#{$name}-left"] { 80 | #{$attr}-left: #{$size} !important; 81 | } 82 | 83 | [class~="#{$attr}-#{$name}-horizontal"] { 84 | #{$attr}-right: #{$size} !important; 85 | #{$attr}-left: #{$size} !important; 86 | } 87 | 88 | [class~="#{$attr}-#{$name}-vertical"] { 89 | #{$attr}-top: #{$size} !important; 90 | #{$attr}-bottom: #{$size} !important; 91 | } 92 | } 93 | } 94 | 95 | @mixin rwd-helpers-content($rwd-screen-name) { 96 | @each $attr in margin, padding { 97 | .#{$rwd-screen-name}-#{$attr} { 98 | #{$attr}: $spacing-unit !important; 99 | } 100 | 101 | .#{$rwd-screen-name}-#{$attr}-top { 102 | #{$attr}-top: $spacing-unit !important; 103 | } 104 | 105 | .#{$rwd-screen-name}-#{$attr}-right { 106 | #{$attr}-right: $spacing-unit !important; 107 | } 108 | 109 | .#{$rwd-screen-name}-#{$attr}-bottom { 110 | #{$attr}-bottom: $spacing-unit !important; 111 | } 112 | 113 | .#{$rwd-screen-name}-#{$attr}-left { 114 | #{$attr}-left: $spacing-unit !important; 115 | } 116 | 117 | .#{$rwd-screen-name}-#{$attr}-horizontal { 118 | #{$attr}-right: $spacing-unit !important; 119 | #{$attr}-left: $spacing-unit !important; 120 | } 121 | 122 | .#{$rwd-screen-name}-#{$attr}-vertical { 123 | #{$attr}-top: $spacing-unit !important; 124 | #{$attr}-bottom: $spacing-unit !important; 125 | } 126 | 127 | .#{$rwd-screen-name}-no-#{$attr} { 128 | #{$attr}: 0 !important; 129 | } 130 | 131 | .#{$rwd-screen-name}-no-#{$attr}-top { 132 | #{$attr}-top: 0 !important; 133 | } 134 | 135 | .#{$rwd-screen-name}-no-#{$attr}-right { 136 | #{$attr}-right: 0 !important; 137 | } 138 | 139 | .#{$rwd-screen-name}-no-#{$attr}-bottom { 140 | #{$attr}-bottom: 0 !important; 141 | } 142 | 143 | .#{$rwd-screen-name}-no-#{$attr}-left { 144 | #{$attr}-left: 0 !important; 145 | } 146 | 147 | .#{$rwd-screen-name}-no-#{$attr}-horizontal { 148 | #{$attr}-right: 0 !important; 149 | #{$attr}-left: 0 !important; 150 | } 151 | 152 | .#{$rwd-screen-name}-no-#{$attr}-vertical { 153 | #{$attr}-top: 0 !important; 154 | #{$attr}-bottom: 0 !important; 155 | } 156 | 157 | @each $name, $size in $spacing-map { 158 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}"] { 159 | #{$attr}: #{$size} !important; 160 | } 161 | 162 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-top"] { 163 | #{$attr}-top: #{$size} !important; 164 | } 165 | 166 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-right"] { 167 | #{$attr}-right: #{$size} !important; 168 | } 169 | 170 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-bottom"] { 171 | #{$attr}-bottom: #{$size} !important; 172 | } 173 | 174 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-left"] { 175 | #{$attr}-left: #{$size} !important; 176 | } 177 | 178 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-horizontal"] { 179 | #{$attr}-right: #{$size} !important; 180 | #{$attr}-left: #{$size} !important; 181 | } 182 | 183 | [class~="#{$rwd-screen-name}-#{$attr}-#{$name}-vertical"] { 184 | #{$attr}-top: #{$size} !important; 185 | #{$attr}-bottom: #{$size} !important; 186 | } 187 | } 188 | } 189 | } 190 | 191 | @include rwd-helpers; 192 | -------------------------------------------------------------------------------- /sass/_helpers-visibility.scss: -------------------------------------------------------------------------------- 1 | .hidden { 2 | display: none !important; 3 | } 4 | 5 | .visible, 6 | .block { 7 | display: block !important; 8 | } 9 | 10 | .inline-block { 11 | display: inline-block !important; 12 | } 13 | 14 | .inline { 15 | display: inline !important; 16 | } 17 | 18 | @mixin rwd-helpers-content($rwd-screen-name) { 19 | .#{$rwd-screen-name}-hidden { 20 | display: none !important; 21 | } 22 | 23 | .#{$rwd-screen-name}-visible, 24 | .#{$rwd-screen-name}-block { 25 | display: block !important; 26 | } 27 | 28 | .#{$rwd-screen-name}-inline-block { 29 | display: inline-block !important; 30 | } 31 | 32 | .#{$rwd-screen-name}-inline { 33 | display: inline !important; 34 | } 35 | } 36 | 37 | @include rwd-helpers; 38 | -------------------------------------------------------------------------------- /sass/_helpers-width.scss: -------------------------------------------------------------------------------- 1 | @mixin width-element($size) { 2 | flex-basis: $size; 3 | width: $size; 4 | max-width: $size; 5 | } 6 | 7 | [class~="1/1"] { 8 | @include width-element(100%); 9 | } 10 | 11 | [class~="1/2"], 12 | [class~="2/4"], 13 | [class~="3/6"], 14 | [class~="4/8"], 15 | [class~="5/10"], 16 | [class~="6/12"] { 17 | @include width-element(50%); 18 | } 19 | 20 | [class~="1/3"], 21 | [class~="2/6"], 22 | [class~="3/9"], 23 | [class~="4/12"] { 24 | @include width-element(33.3333%); 25 | } 26 | 27 | [class~="2/3"], 28 | [class~="4/6"], 29 | [class~="6/9"], 30 | [class~="8/12"] { 31 | @include width-element(66.6666%); 32 | } 33 | 34 | [class~="1/4"], 35 | [class~="2/8"], 36 | [class~="3/12"] { 37 | @include width-element(25%); 38 | } 39 | 40 | [class~="3/4"], 41 | [class~="6/8"], 42 | [class~="9/12"] { 43 | @include width-element(75%); 44 | } 45 | 46 | [class~="1/5"], 47 | [class~="2/10"] { 48 | @include width-element(20%); 49 | } 50 | 51 | [class~="2/5"], 52 | [class~="4/10"] { 53 | @include width-element(40%); 54 | } 55 | 56 | [class~="3/5"], 57 | [class~="6/10"] { 58 | @include width-element(60%); 59 | } 60 | 61 | [class~="4/5"], 62 | [class~="8/10"] { 63 | @include width-element(80%); 64 | } 65 | 66 | [class~="1/6"], 67 | [class~="2/12"] { 68 | @include width-element(16.6666%); 69 | } 70 | 71 | [class~="5/6"], 72 | [class~="10/12"] { 73 | @include width-element(83.3333%); 74 | } 75 | 76 | [class~="1/8"] { 77 | @include width-element(12.5%); 78 | } 79 | 80 | [class~="3/8"] { 81 | @include width-element(37.5%); 82 | } 83 | 84 | [class~="5/8"] { 85 | @include width-element(62.5%); 86 | } 87 | 88 | [class~="7/8"] { 89 | @include width-element(87.5%); 90 | } 91 | 92 | [class~="1/9"] { 93 | @include width-element(11.1111%); 94 | } 95 | 96 | [class~="2/9"] { 97 | @include width-element(22.2222%); 98 | } 99 | 100 | [class~="4/9"] { 101 | @include width-element(44.4444%); 102 | } 103 | 104 | [class~="5/9"] { 105 | @include width-element(55.5555%); 106 | } 107 | 108 | [class~="7/9"] { 109 | @include width-element(77.7777%); 110 | } 111 | 112 | [class~="8/9"] { 113 | @include width-element(88.8888%); 114 | } 115 | 116 | [class~="1/10"] { 117 | @include width-element(10%); 118 | } 119 | 120 | [class~="3/10"] { 121 | @include width-element(30%); 122 | } 123 | 124 | [class~="7/10"] { 125 | @include width-element(70%); 126 | } 127 | 128 | [class~="9/10"] { 129 | @include width-element(90%); 130 | } 131 | 132 | [class~="1/12"] { 133 | @include width-element(8.3333%); 134 | } 135 | 136 | [class~="5/12"] { 137 | @include width-element(41.6666%); 138 | } 139 | 140 | [class~="7/12"] { 141 | @include width-element(58.3333%); 142 | } 143 | 144 | [class~="11/12"] { 145 | @include width-element(91.6666%); 146 | } 147 | 148 | @mixin rwd-helpers-content($rwd-screen-name) { 149 | [class~="#{$rwd-screen-name}-1/1"] { 150 | @include width-element(100%); 151 | } 152 | 153 | [class~="#{$rwd-screen-name}-1/2"], 154 | [class~="#{$rwd-screen-name}-2/4"], 155 | [class~="#{$rwd-screen-name}-3/6"], 156 | [class~="#{$rwd-screen-name}-4/8"], 157 | [class~="#{$rwd-screen-name}-5/10"], 158 | [class~="#{$rwd-screen-name}-6/12"] { 159 | @include width-element(50%); 160 | } 161 | 162 | [class~="#{$rwd-screen-name}-1/3"], 163 | [class~="#{$rwd-screen-name}-2/6"], 164 | [class~="#{$rwd-screen-name}-3/9"], 165 | [class~="#{$rwd-screen-name}-4/12"] { 166 | @include width-element(33.3333%); 167 | } 168 | 169 | [class~="#{$rwd-screen-name}-2/3"], 170 | [class~="#{$rwd-screen-name}-4/6"], 171 | [class~="#{$rwd-screen-name}-6/9"], 172 | [class~="#{$rwd-screen-name}-8/12"] { 173 | @include width-element(66.6666%); 174 | } 175 | 176 | [class~="#{$rwd-screen-name}-1/4"], 177 | [class~="#{$rwd-screen-name}-2/8"], 178 | [class~="#{$rwd-screen-name}-3/12"] { 179 | @include width-element(25%); 180 | } 181 | 182 | [class~="#{$rwd-screen-name}-3/4"], 183 | [class~="#{$rwd-screen-name}-6/8"], 184 | [class~="#{$rwd-screen-name}-9/12"] { 185 | @include width-element(75%); 186 | } 187 | 188 | [class~="#{$rwd-screen-name}-1/5"], 189 | [class~="#{$rwd-screen-name}-2/10"] { 190 | @include width-element(20%); 191 | } 192 | 193 | [class~="#{$rwd-screen-name}-2/5"], 194 | [class~="#{$rwd-screen-name}-4/10"] { 195 | @include width-element(40%); 196 | } 197 | 198 | [class~="#{$rwd-screen-name}-3/5"], 199 | [class~="#{$rwd-screen-name}-6/10"] { 200 | @include width-element(60%); 201 | } 202 | 203 | [class~="#{$rwd-screen-name}-4/5"], 204 | [class~="#{$rwd-screen-name}-8/10"], { 205 | @include width-element(80%); 206 | } 207 | 208 | [class~="#{$rwd-screen-name}-1/6"], 209 | [class~="#{$rwd-screen-name}-2/12"] { 210 | @include width-element(16.6666%); 211 | } 212 | 213 | [class~="#{$rwd-screen-name}-5/6"], 214 | [class~="#{$rwd-screen-name}-10/12"] { 215 | @include width-element(83.3333%); 216 | } 217 | 218 | [class~="#{$rwd-screen-name}-1/8"] { 219 | @include width-element(12.5%); 220 | } 221 | 222 | [class~="#{$rwd-screen-name}-3/8"] { 223 | @include width-element(37.5%); 224 | } 225 | 226 | [class~="#{$rwd-screen-name}-5/8"] { 227 | @include width-element(62.5%); 228 | } 229 | 230 | [class~="#{$rwd-screen-name}-7/8"] { 231 | @include width-element(87.5%); 232 | } 233 | 234 | [class~="#{$rwd-screen-name}-1/9"] { 235 | @include width-element(11.1111%); 236 | } 237 | 238 | [class~="#{$rwd-screen-name}-2/9"] { 239 | @include width-element(22.2222%); 240 | } 241 | 242 | [class~="#{$rwd-screen-name}-4/9"] { 243 | @include width-element(44.4444%); 244 | } 245 | 246 | [class~="#{$rwd-screen-name}-5/9"] { 247 | @include width-element(55.5555%); 248 | } 249 | 250 | [class~="#{$rwd-screen-name}-7/9"] { 251 | @include width-element(77.7777%); 252 | } 253 | 254 | [class~="#{$rwd-screen-name}-8/9"] { 255 | @include width-element(88.8888%); 256 | } 257 | 258 | [class~="#{$rwd-screen-name}-1/10"] { 259 | @include width-element(10%); 260 | } 261 | 262 | [class~="#{$rwd-screen-name}-3/10"] { 263 | @include width-element(30%); 264 | } 265 | 266 | [class~="#{$rwd-screen-name}-7/10"] { 267 | @include width-element(70%); 268 | } 269 | 270 | [class~="#{$rwd-screen-name}-9/10"] { 271 | @include width-element(90%); 272 | } 273 | 274 | [class~="#{$rwd-screen-name}-1/12"] { 275 | @include width-element(8.3333%); 276 | } 277 | 278 | [class~="#{$rwd-screen-name}-5/12"] { 279 | @include width-element(41.6666%); 280 | } 281 | 282 | [class~="#{$rwd-screen-name}-7/12"] { 283 | @include width-element(58.3333%); 284 | } 285 | 286 | [class~="#{$rwd-screen-name}-11/12"] { 287 | @include width-element(91.6666%); 288 | } 289 | } 290 | 291 | @include rwd-helpers; 292 | -------------------------------------------------------------------------------- /sass/_image.scss: -------------------------------------------------------------------------------- 1 | @mixin img-replace($img-path, $img-width, $img-height) { 2 | width: $img-width; 3 | height: $img-height; 4 | text-indent: -9999px; 5 | white-space: nowrap; 6 | background-image: url($img-path); 7 | background-repeat: no-repeat; 8 | } 9 | 10 | img { 11 | vertical-align: middle; 12 | } 13 | 14 | .img-rwd, 15 | .img-responsive { 16 | max-width: 100%; 17 | height: auto; 18 | } 19 | 20 | .img-rounded { 21 | border-radius: $ui-border-radius * 2; 22 | } 23 | 24 | .img-circle { 25 | border-radius: 50%; 26 | } 27 | -------------------------------------------------------------------------------- /sass/_list.scss: -------------------------------------------------------------------------------- 1 | ul > li, 2 | ol > li { 3 | margin-left: $spacing-unit; 4 | } 5 | 6 | dl > dt { 7 | font-weight: $font-weight-bold; 8 | } 9 | 10 | dd + dt { 11 | margin-top: $spacing-unit / 2; 12 | } 13 | 14 | %list-reset, 15 | .list-reset { 16 | padding-left: 0; 17 | list-style: none; 18 | 19 | > li { 20 | margin-left: 0; 21 | } 22 | } 23 | 24 | %list-inline, 25 | .list-inline { 26 | @extend %list-reset; 27 | 28 | margin-bottom: 0; 29 | margin-left: $spacing-unit / -4; 30 | letter-spacing: -4px; 31 | 32 | > li { 33 | display: inline-block; 34 | padding-right: $spacing-unit / 4; 35 | padding-left: $spacing-unit / 4; 36 | letter-spacing: 0; 37 | } 38 | } 39 | 40 | .list-divided { 41 | @extend %list-inline; 42 | 43 | > li { 44 | padding-right: $spacing-unit / 2; 45 | padding-left: $spacing-unit / 2; 46 | 47 | + li { 48 | border-left: 1px solid $color-ui; 49 | } 50 | } 51 | } 52 | 53 | %list-menu, 54 | .list-menu { 55 | @extend %list-reset; 56 | 57 | margin-top: $spacing-unit / -4; 58 | 59 | > li > a { 60 | display: block; 61 | padding: ($spacing-unit / 4) ($spacing-unit / 2); 62 | text-decoration: none; 63 | border-radius: $ui-border-radius; 64 | 65 | &:hover { 66 | color: $list-menu-color; 67 | background: $list-menu-background; 68 | } 69 | 70 | @if $link-active { 71 | &:active { 72 | top: 0; 73 | } 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /sass/_media.scss: -------------------------------------------------------------------------------- 1 | .media { 2 | display: table; 3 | 4 | > *:not(.media-body) { 5 | margin-right: $spacing-unit; 6 | } 7 | 8 | > .media-body { 9 | display: table-cell; 10 | vertical-align: top; 11 | 12 | > *:last-child { 13 | margin-bottom: 0; 14 | } 15 | } 16 | } 17 | 18 | .media-top { 19 | > .media-body { 20 | vertical-align: top; 21 | } 22 | } 23 | 24 | .media-middle { 25 | > .media-body { 26 | vertical-align: middle; 27 | } 28 | } 29 | 30 | .media-bottom { 31 | > .media-body { 32 | vertical-align: bottom; 33 | } 34 | } 35 | 36 | @each $name, $size in $spacing-map { 37 | [class~="media-#{$name}"] { 38 | > *:not(.media-body) { 39 | margin-right: #{$size}; 40 | } 41 | } 42 | } 43 | 44 | .media-flat { 45 | > *:not(.media-body) { 46 | margin-right: 0; 47 | } 48 | } 49 | 50 | .media-reverse { 51 | direction: rtl; 52 | 53 | > *:not(.media-body) { 54 | margin-right: 0; 55 | margin-left: $spacing-unit; 56 | } 57 | 58 | @each $name, $size in $spacing-map { 59 | &[class~="media-#{$name}"] { 60 | > *:not(.media-body) { 61 | margin-left: #{$size}; 62 | } 63 | } 64 | } 65 | 66 | &.media-flat { 67 | > *:not(.media-body) { 68 | margin-left: 0; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /sass/_normalize.scss: -------------------------------------------------------------------------------- 1 | html { 2 | font-family: sans-serif; 3 | -ms-text-size-adjust: 100%; 4 | -webkit-text-size-adjust: 100%; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | } 10 | 11 | article, 12 | aside, 13 | details, 14 | figcaption, 15 | figure, 16 | footer, 17 | header, 18 | main, 19 | menu, 20 | nav, 21 | section, 22 | summary { 23 | display: block; 24 | } 25 | 26 | audio, 27 | canvas, 28 | progress, 29 | video { 30 | display: inline-block; 31 | } 32 | 33 | audio:not([controls]) { 34 | display: none; 35 | height: 0; 36 | } 37 | 38 | progress { 39 | vertical-align: baseline; 40 | } 41 | 42 | template, 43 | [hidden] { 44 | display: none; 45 | } 46 | 47 | a { 48 | -webkit-text-decoration-skip: objects; 49 | background-color: transparent; 50 | } 51 | 52 | a:active, 53 | a:hover { 54 | outline-width: 0; 55 | } 56 | 57 | abbr[title] { 58 | text-decoration: underline; 59 | text-decoration: underline dotted; 60 | border-bottom: none; 61 | } 62 | 63 | b, 64 | strong { 65 | font-weight: inherit; 66 | } 67 | 68 | b, 69 | strong { 70 | font-weight: bolder; 71 | } 72 | 73 | dfn { 74 | font-style: italic; 75 | } 76 | 77 | h1 { 78 | margin: .67em 0; 79 | font-size: 2em; 80 | } 81 | 82 | mark { 83 | color: #000; 84 | background-color: #ff0; 85 | } 86 | 87 | small { 88 | font-size: 80%; 89 | } 90 | 91 | sub, 92 | sup { 93 | position: relative; 94 | font-size: 75%; 95 | line-height: 0; 96 | vertical-align: baseline; 97 | } 98 | 99 | sub { 100 | bottom: -.25em; 101 | } 102 | 103 | sup { 104 | top: -.5em; 105 | } 106 | 107 | img { 108 | border-style: none; 109 | } 110 | 111 | svg:not(:root) { 112 | overflow: hidden; 113 | } 114 | 115 | code, 116 | kbd, 117 | pre, 118 | samp { 119 | font-family: monospace; 120 | font-size: 1em; 121 | } 122 | 123 | figure { 124 | margin: 1em 40px; 125 | } 126 | 127 | hr { 128 | box-sizing: content-box; 129 | height: 0; 130 | overflow: visible; 131 | } 132 | 133 | button, 134 | input, 135 | optgroup, 136 | select, 137 | textarea { 138 | margin: 0; 139 | font: inherit; 140 | } 141 | 142 | optgroup { 143 | font-weight: bold; 144 | } 145 | 146 | button, 147 | input { 148 | overflow: visible; 149 | } 150 | 151 | button, 152 | select { 153 | text-transform: none; 154 | } 155 | 156 | button, 157 | html [type="button"], 158 | [type="reset"], 159 | [type="submit"] { 160 | -webkit-appearance: button; 161 | } 162 | 163 | button::-moz-focus-inner, 164 | [type="button"]::-moz-focus-inner, 165 | [type="reset"]::-moz-focus-inner, 166 | [type="submit"]::-moz-focus-inner { 167 | padding: 0; 168 | border-style: none; 169 | } 170 | 171 | button:-moz-focusring, 172 | [type="button"]:-moz-focusring, 173 | [type="reset"]:-moz-focusring, 174 | [type="submit"]:-moz-focusring { 175 | outline: 1px dotted ButtonText; 176 | } 177 | 178 | fieldset { 179 | padding: .35em .625em .75em; 180 | margin: 0 2px; 181 | border: 1px solid #c0c0c0; 182 | } 183 | 184 | legend { 185 | box-sizing: border-box; 186 | display: table; 187 | max-width: 100%; 188 | padding: 0; 189 | color: inherit; 190 | white-space: normal; 191 | } 192 | 193 | textarea { 194 | overflow: auto; 195 | } 196 | 197 | [type="checkbox"], 198 | [type="radio"] { 199 | box-sizing: border-box; 200 | padding: 0; 201 | } 202 | 203 | [type="number"]::-webkit-inner-spin-button, 204 | [type="number"]::-webkit-outer-spin-button { 205 | height: auto; 206 | } 207 | 208 | [type="search"] { 209 | -webkit-appearance: textfield; 210 | outline-offset: -2px; 211 | } 212 | 213 | [type="search"]::-webkit-search-cancel-button, 214 | [type="search"]::-webkit-search-decoration { 215 | -webkit-appearance: none; 216 | } 217 | 218 | ::-webkit-input-placeholder { 219 | color: inherit; 220 | opacity: .54; 221 | } 222 | 223 | ::-webkit-file-upload-button { 224 | -webkit-appearance: button; 225 | font: inherit; 226 | } 227 | -------------------------------------------------------------------------------- /sass/_rule.scss: -------------------------------------------------------------------------------- 1 | hr { 2 | height: 1px; 3 | color: $color-ui; 4 | background-color: $color-ui; 5 | border: 0 none; 6 | } 7 | -------------------------------------------------------------------------------- /sass/_rwd.scss: -------------------------------------------------------------------------------- 1 | @mixin rwd-breakpoint($rwd-screen-name, $rwd-screen-size) { 2 | @if length($rwd-screen-size) == 2 { 3 | @media screen and (min-width: nth($rwd-screen-size, 1)) and (max-width: nth($rwd-screen-size, 2)) { 4 | @content; 5 | } 6 | } @else { 7 | $rwd-width-attr: min-width; 8 | 9 | @if $rwd-type == desktop-first { 10 | $rwd-width-attr: max-width; 11 | } 12 | 13 | @media screen and (#{$rwd-width-attr}: nth($rwd-screen-size, 1)) { 14 | @content; 15 | } 16 | } 17 | } 18 | 19 | @mixin rwd-helpers { 20 | @each $rwd-screen-name, $rwd-screen-size in $rwd-map { 21 | @include rwd-breakpoint($rwd-screen-name, $rwd-screen-size) { 22 | @include rwd-helpers-content($rwd-screen-name); 23 | } 24 | } 25 | } 26 | 27 | @mixin rwd($rwd-screen-name) { 28 | @if map-has-key($rwd-map, $rwd-screen-name) { 29 | $rwd-screen-size: map-get($rwd-map, $rwd-screen-name); 30 | 31 | @include rwd-breakpoint($rwd-screen-name, $rwd-screen-size) { 32 | @content; 33 | } 34 | } @else { 35 | @warn 'Screen "#{$rwd-screen-name}" is not defined in $rwd-screen'; 36 | } 37 | } 38 | 39 | @mixin hidpi($rwd-resolution: 192, $rwd-pixel-ratio: $rwd-resolution / 96) { 40 | @media (-webkit-min-device-pixel-ratio: $rwd-pixel-ratio), 41 | (min-resolution: #{$rwd-pixel-ratio}dppx), 42 | (min-resolution: #{$rwd-resolution}dpi) { 43 | @content; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /sass/_sticky-footer.scss: -------------------------------------------------------------------------------- 1 | .sticky-footer { 2 | display: flex; 3 | flex-direction: column; 4 | min-height: 100vh; 5 | 6 | > *:first-child { 7 | flex: 1; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sass/_table.scss: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | border-collapse: collapse; 4 | } 5 | 6 | thead { 7 | text-align: left; 8 | } 9 | 10 | td, th { 11 | padding: $spacing-unit / 4; 12 | } 13 | 14 | .table-bordered { 15 | > tr > th, 16 | > tr > td, 17 | > thead > tr > th, 18 | > tbody > tr > td { 19 | border: 1px solid $color-ui; 20 | } 21 | } 22 | 23 | .table-zebra { 24 | > tr:nth-child(odd) > td, 25 | > tbody > tr:nth-child(odd) > td { 26 | background-color: $table-zebra-background; 27 | } 28 | } 29 | 30 | .table-hover { 31 | > tr:hover > td, 32 | > tbody > tr:hover > td { 33 | background-color: $table-hover-background; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /sass/_type.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: $font-size-base; 3 | line-height: $font-leading; 4 | } 5 | 6 | h1, 7 | .h1 { 8 | margin-bottom: $spacing-unit * 2; 9 | font-size: $font-size-h1; 10 | } 11 | 12 | h2, 13 | .h2 { 14 | font-size: $font-size-h2; 15 | } 16 | 17 | h3, 18 | .h3 { 19 | font-size: $font-size-h3; 20 | } 21 | 22 | h4, 23 | .h4 { 24 | font-size: $font-size-h4; 25 | } 26 | 27 | h5, 28 | .h5 { 29 | font-size: $font-size-h5; 30 | } 31 | 32 | h6, 33 | .h6 { 34 | font-size: $font-size-h6; 35 | } 36 | 37 | h1, h2, h3, h4, h5, h6, 38 | .h1, .h2, .h3, .h4, .h5, .h6 { 39 | margin-bottom: $spacing-unit; 40 | font-family: $font-family-headings; 41 | font-weight: $font-weight-headings; 42 | } 43 | 44 | strong, em, small, code, hr { 45 | line-height: 1; 46 | } 47 | 48 | strong { 49 | font-weight: $font-weight-bold; 50 | } 51 | 52 | em { 53 | font-style: italic; 54 | } 55 | 56 | a { 57 | color: $color-link; 58 | text-decoration: none; 59 | word-wrap: break-word; 60 | 61 | @if $link-underline { 62 | text-decoration: underline; 63 | } 64 | 65 | @if $link-active { 66 | &:active { 67 | position: relative; 68 | top: 1px; 69 | } 70 | } 71 | } 72 | 73 | sup, sub { 74 | position: relative; 75 | vertical-align: baseline; 76 | } 77 | 78 | sup { 79 | top: -.4em; 80 | } 81 | 82 | sub { 83 | bottom: -.25em; 84 | } 85 | 86 | blockquote { 87 | padding-left: $spacing-unit; 88 | color: $color-muted; 89 | border-left: 3px solid $color-ui; 90 | 91 | > *:last-child { 92 | margin-bottom: 0; 93 | } 94 | } 95 | 96 | code { 97 | font-family: $font-family-monospace; 98 | white-space: nowrap; 99 | } 100 | 101 | pre code { 102 | white-space: pre-wrap; 103 | } 104 | 105 | small { 106 | font-size: $font-size-small; 107 | color: $color-small; 108 | } 109 | 110 | .text-small { 111 | font-size: $font-size-small; 112 | } 113 | 114 | .text-micro { 115 | font-size: $font-size-micro; 116 | } 117 | 118 | .text-lead { 119 | font-size: $font-size-lead; 120 | } 121 | 122 | .text-mono { 123 | font-family: $font-family-monospace; 124 | } 125 | 126 | .text-left { 127 | text-align: left; 128 | } 129 | 130 | .text-center { 131 | text-align: center; 132 | } 133 | 134 | .text-right { 135 | text-align: right; 136 | } 137 | 138 | .text-light { 139 | font-weight: $font-weight-light; 140 | } 141 | 142 | .text-normal { 143 | font-weight: $font-weight-normal; 144 | } 145 | 146 | .text-bold { 147 | font-weight: $font-weight-bold; 148 | } 149 | 150 | .text-lowercase { 151 | text-transform: lowercase; 152 | } 153 | 154 | .text-uppercase { 155 | text-transform: uppercase; 156 | } 157 | 158 | .text-capitalize { 159 | text-transform: capitalize; 160 | } 161 | --------------------------------------------------------------------------------