1 | The cf-core component acts as the backbone for Capital Framework.
|
2 | It's made up of four child components `cf-vars`, `cf-media-queries`,
|
3 | `cf-utilities`, and `cf-base`.
|
4 |
|
5 | > NOTE: If you use any cf-core Less file directly,
|
6 | be sure to run the files through
|
7 | [Autoprefixer](https://github.com/postcss/autoprefixer),
|
8 | or your compiled Capital Framework CSS will
|
9 | not work perfectly in older browsers.
|
10 |
|
11 | [//]: # (NOTE: The markdown adds a `p` element inside the `blockquote`, we need to explore a style fix so this is more obviously a `blockquote`.)
|
12 |
|
13 | ## Table of contents
|
14 |
|
15 | - [Variables](#variables)
|
16 | - [Color variables](#color-variables)
|
17 | - [Sizing variables](#sizing-variables)
|
18 | - [Breakpoint variables](#breakpoint-variables)
|
19 | - [Webfont variables](#webfont-variables)
|
20 | - [Media queries](#media-queries)
|
21 | - [Respond to min and max mixins](#respond-to-min-and-max-width-mixins)
|
22 | - [Respond to range mixin](#respond-to-range-mixin)
|
23 | - [Respond to dpi mixin](#respond-to-dpi-mixin)
|
24 | - [Respond to print mixin](#respond-to-print-mixin)
|
25 | - [Utilities](#utilities)
|
26 | - [Helper classes](#helper-classes)
|
27 | - [Mixins](#mixins)
|
28 | - [Base typography](#base-typography)
|
29 | - [Webfonts](#webfonts)
|
30 | - [Type hierarchy](#type-hierarchy)
|
31 | - [Body copy vertical margins](#body-copy-vertical-margins)
|
32 | - [Default links](#default-links)
|
33 | - [Underlined links](#underlined-links)
|
34 | - [Lists](#lists)
|
35 | - [Tables](#tables)
|
36 | - [Block quote](#block-quote)
|
37 | - [Base images](#base-images)
|
38 | - [Full-width images](#full-width-images)
|
39 | - [Figure](#figure)
|
40 |
|
41 |
|
42 | ## Variables
|
43 |
|
44 | Theme variables for setting the color and sizes throughout the project.
|
45 | Overwrite them in your own project by duplicating the variable `@key: value`.
|
46 |
|
47 | ### Color variables
|
48 |
|
49 | Color variables referenced in comments are from [cf-core brand-palette.less](https://github.com/cfpb/capital-framework/blob/master/src/cf-core/src/cf-brand-colors.less).
|
50 |
|
51 | ```
|
52 | // body
|
53 | @text: @black;
|
54 |
|
55 | // a
|
56 | @link-text: @pacific;
|
57 | @link-underline: @pacific;
|
58 | @link-text-visited: @teal;
|
59 | @link-underline-visited: @teal;
|
60 | @link-text-hover: @pacific-60;
|
61 | @link-underline-hover: @pacific-60;
|
62 | @link-text-active: @navy;
|
63 | @link-underline-active: @navy;
|
64 |
|
65 | // table
|
66 |
|
67 | @thead-text: @text;
|
68 | @thead-bg: @gray-10;
|
69 |
|
70 | @table-head-bg: @thead-bg;
|
71 | @table-cell-bg: @white;
|
72 | @table-cell-bg_alt: @gray-5;
|
73 | @table-scrolling-border: @gray-40;
|
74 | @table-border: @gray;
|
75 |
|
76 | // code
|
77 | @code-text: @text;
|
78 | @code-bg: @gray-5;
|
79 | ```
|
80 |
|
81 | ### Sizing variables
|
82 |
|
83 | ```
|
84 | @base-font-size-px: 16px;
|
85 | @base-line-height-px: 22px;
|
86 | @base-line-height: unit(@base-line-height-px / @base-font-size-px);
|
87 |
|
88 | @size-xl: 48px; // Super-size
|
89 |
|
90 | @size-i: 34px; // h1-size
|
91 | @size-ii: 26px; // h2-size
|
92 | @size-iii: 22px; // h3-size
|
93 | @size-iv: 18px; // h4-size
|
94 | @size-v: 14px; // h5-site
|
95 | @size-vi: 12px; // h6-size
|
96 | @size-code: 13px; // Custom size only for Mono code blocks
|
97 | ```
|
98 |
|
99 | ### Breakpoint variables
|
100 |
|
101 | ```
|
102 | @bp-xs-max: 600px;
|
103 | @bp-sm-min: @bp-xs-max + 1px;
|
104 | @bp-sm-max: 900px;
|
105 | @bp-med-min: @bp-sm-max + 1px;
|
106 | @bp-med-max: 1020px;
|
107 | @bp-lg-min: @bp-med-max + 1px;
|
108 | @bp-lg-max: 1230px;
|
109 | @bp-xl-min: @bp-lg-max + 1px;
|
110 | ```
|
111 |
|
112 | ### Webfont variables
|
113 |
|
114 | ```
|
115 | @webfont-regular: Arial;
|
116 | @webfont-italic: Arial;
|
117 | @webfont-medium: Arial;
|
118 | @webfont-demi: Arial;
|
119 | ```
|
120 |
|
121 |
|
122 | ## Media queries
|
123 |
|
124 | Mixins for consistent media queries that take `px` values and convert them
|
125 | to `em`s.
|
126 |
|
127 | ### Respond to min and max width mixins
|
128 |
|
129 | These mixins take a `px` value breakpoint and set of style rules and converts
|
130 | them to the corresponding min or max width media query.
|
131 |
|
132 | ```
|
133 | .respond-to-min(@bp, @rules);
|
134 |
|
135 | .respond-to-max(@bp, @rules);
|
136 | ```
|
137 |
|
138 | Ex.
|
139 |
|
140 | ```
|
141 | .respond-to-min( @bp-sm-min, {
|
142 | .title {
|
143 | font-size: 2em;
|
144 | }
|
145 | } );
|
146 |
|
147 | // Compiles to
|
148 |
|
149 | @media only all and (min-width: 37.5625em) {
|
150 | .title {
|
151 | font-size: 2em;
|
152 | }
|
153 | }
|
154 | ```
|
155 |
|
156 | ### Respond to range mixin
|
157 |
|
158 | This mixin takes both min and max `px` values and a set of style rules and
|
159 | converts them to the corresponding min and max media query.
|
160 |
|
161 | ```
|
162 | .respond-to-range(@bp1, @bp2, @rules);
|
163 | ```
|
164 |
|
165 | Ex.
|
166 |
|
167 | ```
|
168 | .respond-to-range( @bp-sm-min, @bp-sm-max, {
|
169 | .title {
|
170 | font-size: 2em;
|
171 | }
|
172 | } );
|
173 |
|
174 | // Compiles to
|
175 |
|
176 | @media only all and (min-width: 37.5625em) and (max-width: 56.25em) {
|
177 | .title {
|
178 | font-size: 2em;
|
179 | }
|
180 | }
|
181 | ```
|
182 |
|
183 | ### Respond to dpi mixin
|
184 |
|
185 | This mixin allows us to easily write styles
|
186 | that target high-resolution screens,
|
187 | such as Apple retina screens
|
188 |
|
189 | ```less
|
190 | // The following LESS...
|
191 | .example {
|
192 | background: url(regular-resolution-image.png);
|
193 | .respond-to-dpi(2, {
|
194 | background-image: url(retina-image.png);
|
195 | });
|
196 | }
|
197 |
|
198 | // ...Exports to
|
199 | .example {
|
200 | background: url(regular-resolution-image.png);
|
201 | }
|
202 | @media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
203 | .example {
|
204 | background-image: url(retina-image.png);
|
205 | }
|
206 | }
|
207 | ```
|
208 |
|
209 | ### Respond to print mixin
|
210 |
|
211 | This mixin allows us to easily write styles that target both
|
212 | `@media print` and `.print`.
|
213 |
|
214 | ```less
|
215 | // The following LESS...
|
216 | .example {
|
217 | color: @gray;
|
218 | .respond-to-print({
|
219 | color: @black;
|
220 | });
|
221 | }
|
222 |
|
223 | // ...Exports to
|
224 | .example {
|
225 | color: #75787B;
|
226 | }
|
227 | @media print {
|
228 | .example {
|
229 | color: #101820;
|
230 | }
|
231 | }
|
232 | .print .example {
|
233 | color: #101820;
|
234 | }
|
235 | ```
|
236 |
|
237 |
|
238 | ## Utilities
|
239 |
|
240 | ### Helper classes
|
241 |
|
242 | #### JS only
|
243 |
|
244 | Hide an element when JavaScript isn't available. Requires a small script in the
|
245 | `<head>` of your `<html>` document that removes a `.no-js` class.
|
246 |
|
247 | 1. Add a `no-js` class added to the `html`
|
248 |
|
249 | ```
|
250 | <html class="no-js">
|
251 | ```
|
252 |
|
253 | 2. Add a script to remove the `no-js` class after confirming JavaScript is available
|
254 |
|
255 | ```
|
256 | <script>
|
257 | // Confirm availability of JavaScript and remove no-js class from html
|
258 | var docElement = document.documentElement;
|
259 | docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2');
|
260 | </script>
|
261 | ```
|
262 |
|
263 | 3. Add the utility class to the element you want to hide
|
264 |
|
265 | ```
|
266 | <div class="u-js-only"></div>
|
267 | ```
|
268 |
|
269 | #### Clearfix
|
270 |
|
271 | Clear floated elements to avoid following elements from flowing into the
|
272 | previous one.
|
273 |
|
274 | For example, to float an element to the left, but prevent the following text
|
275 | from flowing into it.
|
276 |
|
277 | _More information see: <http://css-tricks.com/snippets/css/clear-fix>_
|
278 |
|
279 | ```
|
280 | <div class="u-clearfix">
|
281 | <div style="float:left; width:100%; height:60px; background:black;"></div>
|
282 | </div>
|
283 | <em>This text would normally flow up into the black box if the box above</em>
|
284 | ```
|
285 |
|
286 | #### Visually hidden
|
287 |
|
288 | Hide an element from view while keeping it accessible to screen readers.
|
289 |
|
290 | For example, to create a link with a social network icon, but allow non-sighted
|
291 | users to understand the context, add descriptive text with the
|
292 | `u-visually-hidden` class.
|
293 |
|
294 | ```
|
295 | <h1>
|
296 | <a href="#">
|
297 | <span class="cf-icon cf-icon-twitter-square"></span>
|
298 | <span class="u-visually-hidden">Share on Twitter</span>
|
299 | </a>
|
300 | </h1>
|
301 | ```
|
302 |
|
303 | #### Inline block
|
304 |
|
305 | *DEPRECATED*. Identical to `display: inline-block`.
|
306 |
|
307 | ```
|
308 | <div class="u-inline-block"></div>
|
309 | ```
|
310 |
|
311 | #### Float right
|
312 |
|
313 | ```
|
314 | <div class="u-right"></div>
|
315 | ```
|
316 |
|
317 | #### Break word
|
318 |
|
319 | Force word breaks within an element. Useful for small containers where text may
|
320 | over-run the width of the container.
|
321 |
|
322 | _This only works in Internet Explorer 8 when the element with the
|
323 | `.u-break-word` class has layout. See
|
324 | <http://stackoverflow.com/questions/3997223/word-wrapbreak-word-not-working-in-ie8>
|
325 | for more information._
|
326 |
|
327 | <div class="u-break-word u-mb30"
|
328 | style="width: 100px; padding: 0.5em; border: 1px solid silver;">
|
329 | This link should break:
|
330 | <a href="#">
|
331 | something@something.com
|
332 | </a>
|
333 | </div>
|
334 |
|
335 | <div class="u-mb30"
|
336 | style="width: 100px; padding: 0.5em; border: 1px solid silver;">
|
337 | This link should not:
|
338 | <a href="#">
|
339 | something@something.com
|
340 | </a>
|
341 | </div>
|
342 |
|
343 | ```
|
344 | <div class="u-break-word">
|
345 | This link should break:
|
346 | <a href="#">
|
347 | something@something.com
|
348 | </a>
|
349 | </div>
|
350 |
|
351 | <div>
|
352 | This link should not:
|
353 | <a href="#">
|
354 | something@something.com
|
355 | </a>
|
356 | </div>
|
357 | ```
|
358 |
|
359 | #### Margin utilities
|
360 |
|
361 | Force a `margin` top or bottom on an element in pixels.
|
362 |
|
363 | `.u-m[p][#]`
|
364 |
|
365 | _`[p]` is the position, use `t` for top or `b` for bottom. `[#]` is the pixel
|
366 | value, available options are 0, 5, 10, 15, 20, 30, 45, 60_
|
367 |
|
368 | ```
|
369 | <h1 class="u-mb0">Heading with zero bottom margin</h1>
|
370 | ```
|
371 |
|
372 | #### Width utilities
|
373 |
|
374 | Set the `width` of an element in percentages.
|
375 |
|
376 | **NOTE: Inline style properties for demonstration only.**
|
377 |
|
378 | <div class="u-w100pct" style="background: #f4edf3; margin-bottom: 1px;">
|
379 | <code>.u-w100pct</code>
|
380 | </div>
|
381 | <div class="u-w90pct" style="background: #f4edf3; margin-bottom: 1px;">
|
382 | <code>.u-w90pct</code>
|
383 | </div>
|
384 | <div class="u-w80pct" style="background: #f4edf3; margin-bottom: 1px;">
|
385 | <code>.u-w80pct</code>
|
386 | </div>
|
387 | <div class="u-w70pct" style="background: #f4edf3; margin-bottom: 1px;">
|
388 | <code>.u-w70pct</code>
|
389 | </div>
|
390 | <div class="u-w60pct" style="background: #f4edf3; margin-bottom: 1px;">
|
391 | <code>.u-w60pct</code>
|
392 | </div>
|
393 | <div class="u-w50pct" style="background: #f4edf3; margin-bottom: 1px;">
|
394 | <code>.u-w50pct</code>
|
395 | </div>
|
396 | <div class="u-w40pct" style="background: #f4edf3; margin-bottom: 1px;">
|
397 | <code>.u-w40pct</code>
|
398 | </div>
|
399 | <div class="u-w30pct" style="background: #f4edf3; margin-bottom: 1px;">
|
400 | <code>.u-w30pct</code>
|
401 | </div>
|
402 | <div class="u-w20pct" style="background: #f4edf3; margin-bottom: 1px;">
|
403 | <code>.u-w20pct</code>
|
404 | </div>
|
405 | <div class="u-w10pct" style="background: #f4edf3; margin-bottom: 1px;">
|
406 | <code>.u-w10pct</code>
|
407 | </div>
|
408 | <div class="u-w75pct" style="background: #f4edf3; margin-bottom: 1px;">
|
409 | <code>.u-w75pct</code>
|
410 | </div>
|
411 | <div class="u-w25pct" style="background: #f4edf3; margin-bottom: 1px;">
|
412 | <code>.u-w25pct</code>
|
413 | </div>
|
414 | <div class="u-w66pct" style="background: #f4edf3; margin-bottom: 1px;">
|
415 | <code>.u-w66pct</code>
|
416 | </div>
|
417 | <div class="u-w33pct" style="background: #f4edf3; margin-bottom: 1px;">
|
418 | <code>.u-w33pct</code>
|
419 | </div>
|
420 |
|
421 | ```
|
422 | <div class="u-w100pct" style="background: #f4edf3; margin-bottom: 1px;">
|
423 | <code>.u-w100pct</code>
|
424 | </div>
|
425 | <div class="u-w90pct" style="background: #f4edf3; margin-bottom: 1px;">
|
426 | <code>.u-w90pct</code>
|
427 | </div>
|
428 | <div class="u-w80pct" style="background: #f4edf3; margin-bottom: 1px;">
|
429 | <code>.u-w80pct</code>
|
430 | </div>
|
431 | <div class="u-w70pct" style="background: #f4edf3; margin-bottom: 1px;">
|
432 | <code>.u-w70pct</code>
|
433 | </div>
|
434 | <div class="u-w60pct" style="background: #f4edf3; margin-bottom: 1px;">
|
435 | <code>.u-w60pct</code>
|
436 | </div>
|
437 | <div class="u-w50pct" style="background: #f4edf3; margin-bottom: 1px;">
|
438 | <code>.u-w50pct</code>
|
439 | </div>
|
440 | <div class="u-w40pct" style="background: #f4edf3; margin-bottom: 1px;">
|
441 | <code>.u-w40pct</code>
|
442 | </div>
|
443 | <div class="u-w30pct" style="background: #f4edf3; margin-bottom: 1px;">
|
444 | <code>.u-w30pct</code>
|
445 | </div>
|
446 | <div class="u-w20pct" style="background: #f4edf3; margin-bottom: 1px;">
|
447 | <code>.u-w20pct</code>
|
448 | </div>
|
449 | <div class="u-w10pct" style="background: #f4edf3; margin-bottom: 1px;">
|
450 | <code>.u-w10pct</code>
|
451 | </div>
|
452 | <div class="u-w75pct" style="background: #f4edf3; margin-bottom: 1px;">
|
453 | <code>.u-w75pct</code>
|
454 | </div>
|
455 | <div class="u-w25pct" style="background: #f4edf3; margin-bottom: 1px;">
|
456 | <code>.u-w25pct</code>
|
457 | </div>
|
458 | <div class="u-w66pct" style="background: #f4edf3; margin-bottom: 1px;">
|
459 | <code>.u-w66pct</code>
|
460 | </div>
|
461 | <div class="u-w33pct" style="background: #f4edf3; margin-bottom: 1px;">
|
462 | <code>.u-w33pct</code>
|
463 | </div>
|
464 | ```
|
465 |
|
466 | #### Width-specific display
|
467 |
|
468 | Show or hide content based on the current display size.
|
469 |
|
470 | __NOTE: Inline style properties for demonstration only__
|
471 |
|
472 | ##### Show on mobile
|
473 |
|
474 | Displays content on screen widths under `601px`.
|
475 |
|
476 | <div style="border: 1px solid black; height: 22px; padding: 5px;">
|
477 | <p class="u-show-on-mobile">Visible on mobile</p>
|
478 | </div>
|
479 |
|
480 | ```
|
481 | <div style="border: 1px solid black; height: 22px; padding: 5px;">
|
482 | <p class="u-show-on-mobile">Visible on mobile</p>
|
483 | </div>
|
484 | ```
|
485 |
|
486 | ##### Hide on mobile
|
487 |
|
488 | Hides content on screens widths under `601px`.
|
489 |
|
490 | <div style="border: 1px solid black; height: 22px; padding: 5px;">
|
491 | <p class="u-hide-on-mobile">Hidden on mobile</p>
|
492 | </div>
|
493 |
|
494 | ```
|
495 | <div style="border: 1px solid black; height: 22px; padding: 5px;">
|
496 | <p class="u-hide-on-mobile">Hidden on mobile</p>
|
497 | </div>
|
498 | ```
|
499 |
|
500 | ### Mixins
|
501 |
|
502 | #### Align with button
|
503 |
|
504 | Align an element vertically with the text within a button that may be to either
|
505 | side.
|
506 |
|
507 | _Pass `font-size` as the argument for calculating spacing, default value is
|
508 | `@base-font-size-px`._
|
509 |
|
510 | ```
|
511 | .u-align-with-btn(@font-size: @base-font-size-px);
|
512 | ```
|
513 |
|
514 | #### Flexible proportional containers
|
515 |
|
516 | Utilize intrinsic ratios to create a flexible container that retains an aspect
|
517 | ratio. When `<img>` tags scale they retain their aspect ratio, but if you need
|
518 | a flexible video you will need to use this mixin.
|
519 |
|
520 | _Read more about intrinsic ratios:
|
521 | <http://alistapart.com/article/creating-intrinsic-ratios-for-video>_
|
522 |
|
523 | ```
|
524 | .u-flexible-container-mixin(@width: 16, @height: 9);
|
525 | ```
|
526 |
|
527 | In addition to the mixin, there are two default classes available for building
|
528 | 16:9 and 4:3 containers.
|
529 |
|
530 | _When using the mixin, pass the `width` as the first argument, and the `height`
|
531 | as the second argument. Default values are `16, 9`._
|
532 |
|
533 | _Original mixin credit: <https://gist.github.com/craigmdennis/6655047>_
|
534 |
|
535 | __NOTE: Inline style properties for demonstration only__
|
536 |
|
537 | To create a 16:9 flexible video player, wrap the video element in an element
|
538 | with `u-flexible-container` and add the `u-flexible-container_inner` to the
|
539 | video element.
|
540 |
|
541 | <div class="u-flexible-container">
|
542 | <video class="u-flexible-container_inner"
|
543 | style="background:#75787B;"
|
544 | controls>
|
545 | </video>
|
546 | </div>
|
547 |
|
548 | ```
|
549 | <div class="u-flexible-container">
|
550 | <video class="u-flexible-container_inner"
|
551 | style="background:#75787B;"
|
552 | controls>
|
553 | </video>
|
554 | </div>
|
555 | ```
|
556 |
|
557 | To create a flexible container with only a background (no inner video or object
|
558 | element), ommit the inner container.
|
559 |
|
560 | <div class="u-flexible-container"
|
561 | style="background-image: url(http://placekitten.com/700/394);
|
562 | background-position: center center;
|
563 | background-repeat: no-repeat;"></div>
|
564 |
|
565 | ```
|
566 | <div class="u-flexible-container"
|
567 | style="background-image: url(http://placekitten.com/700/394);
|
568 | background-position: center center;
|
569 | background-repeat: no-repeat;"></div>
|
570 | ```
|
571 |
|
572 | To create a 4:3 flexible video player, add the `__4_3` modifier to the container
|
573 |
|
574 | <div class="u-flexible-container u-flexible-container__4-3">
|
575 | <video class="u-flexible-container_inner"
|
576 | style="background:#75787B;"
|
577 | controls>
|
578 | </video>
|
579 | </div>
|
580 |
|
581 | ```
|
582 | <div class="u-flexible-container u-flexible-container__4-3">
|
583 | <video class="u-flexible-container_inner"
|
584 | style="background:#75787B;"
|
585 | controls>
|
586 | </video>
|
587 | </div>
|
588 | ```
|
589 |
|
590 | #### Link modifiers
|
591 |
|
592 | Modify link properties using the following mixins.
|
593 |
|
594 | ##### Link colors
|
595 |
|
596 | Calling the mixin without arguments will set the following states:
|
597 | default - `#0071bc`, `:hover` - `#205493`, `focus:` - `#0071bc`,
|
598 | `:visited` - `#4c2c92`, `:active` - `#046b99`.
|
599 |
|
600 | [//]: # (NOTE: These aren't the default colors within this project, only once the brand theme has been applied.)
|
601 |
|
602 | `u-link__colors()`
|
603 |
|
604 | Passing a single argument into the mixin will set the color for the
|
605 | default, `:visited`, `:hover`, `:focus`, `:active` states.
|
606 |
|
607 | `u-link__colors(@c)`
|
608 |
|
609 | Passing two arguments into the mixin will set the color for the default,
|
610 | `:visited`, and `:active` states as the first argument, and `:hover` and
|
611 | `:focus` as the second argument.
|
612 |
|
613 | `u-link__colors(@c, @h)`
|
614 |
|
615 | Passing five arguments will set the color for the default, `:visited`,
|
616 | `:hover`, `:focus`, and `:active` states respectively.
|
617 |
|
618 | `u-link__colors(@c, @v, @h, @f, @a)`
|
619 |
|
620 | Passing ten arguments will set the text (default, `:visited`, `:hover`,
|
621 | `:focus`, and `:active` states in the first five arguments) and border colors
|
622 | (default, `:visited`, `:hover`, `:focus`, and `:active` states in the
|
623 | following five arguments) separately.
|
624 |
|
625 | `u-link__colors(@c, @v, @h, @f, @a, @bc, @bv, @bh, @bf, @ba)`
|
626 |
|
627 | __A base mixin of `u-link__colors-base()` exists, but please refrain from
|
628 | using this mixin directly in order to promote consistent naming throughout
|
629 | this project. If you need to set colors for all states of a link, use
|
630 | `.u-link__colors(@c, @v, @h, @f, @a)`.__
|
631 |
|
632 | ##### Link borders
|
633 |
|
634 | Force the default bottom `border` on the default and `:hover` states.
|
635 |
|
636 | `.u-link__border()`
|
637 |
|
638 | Turn off the default bottom `border` on the default and `:hover` states.
|
639 |
|
640 | `.u-link__no-border()`
|
641 |
|
642 | Turn off the default bottom `border` on the default state but force a bottom
|
643 | `border` on the `:hover` state.
|
644 |
|
645 | `.u-link__hover-border()`
|
646 |
|
647 | ##### Link children
|
648 |
|
649 | Calling this mixin without arguments will set the default color for the
|
650 | `:hover` state of a child within a link, without affecting the link itself.
|
651 |
|
652 | `.u-link__hover-child()`
|
653 |
|
654 | Passing a single argument into the mixin will set a custom color for the
|
655 | `:hover` state of a child within a link, without affecting the link itself.
|
656 |
|
657 | `.u-link__hover-child(@c)`
|
658 |
|
659 | #### Small text utility
|
660 |
|
661 | ##### Class
|
662 |
|
663 | Sets the element to `14px` (in `em`s).
|
664 |
|
665 | _To be used on default `16px` text only. To use on text set to another size,
|
666 | use the mixin below._
|
667 |
|
668 | `.u-small-text`
|
669 |
|
670 | ##### Mixin
|
671 |
|
672 | Sets the element to `14px` (in `em`s) based on the text size passed as
|
673 | `@context`.
|
674 |
|
675 | `.u-small-text(@context)`
|
676 |
|
677 | ```
|
678 | // Ex.
|
679 | .example {
|
680 | font-size: unit(20px / @base-font-size-px, em);
|
681 |
|
682 | small {
|
683 | .u-small-text(20px);
|
684 | }
|
685 | }
|
686 |
|
687 | // Compiles to
|
688 | .example {
|
689 | font-size: 1.25em;
|
690 | }
|
691 |
|
692 | .example small {
|
693 | font-size: 0.7em;
|
694 | }
|
695 | ```
|
696 |
|
697 |
|
698 | ## Base typography
|
699 |
|
700 | ### Webfonts
|
701 |
|
702 | Sets the font-stack, weight, and style of an element.
|
703 |
|
704 | ```
|
705 | .u-webfont-regular();
|
706 | .u-webfont-italic();
|
707 | .u-webfont-medium();
|
708 | .u-webfont-demi();
|
709 | ```
|
710 |
|
711 | To use your own fonts in the webfont mixins, set your own font with the
|
712 | `@webfont-regular/italic/medium/demi` variables in your `cf-theme-overrides.less`
|
713 | file.
|
714 |
|
715 | _These mixins also add the appropriate `.lt-ie9` overrides. `.lt-ie9`
|
716 | overrides are necessary to override `font-style` and `font-weight` each time
|
717 | the webfont is used. These overrides are built into the webfont mixins so you
|
718 | get them automatically. Note that this requires you to use conditional
|
719 | classes on the `html` element:
|
720 | <https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/html.md#conditional-html-classes.>_
|
721 |
|
722 | ### Type hierarchy
|
723 |
|
724 | #### Default body type
|
725 |
|
726 | <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do
|
727 | eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.
|
728 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
729 | aliquip ex ea commodo consequat.</p>
|
730 |
|
731 | ```
|
732 | <p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do
|
733 | eiusmod <strong>tempor incididunt</strong> ut labore et dolore magna aliqua.
|
734 | Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
|
735 | aliquip ex ea commodo consequat.</p>
|
736 | ```
|
737 |
|
738 | #### Heading level 1
|
739 |
|
740 | _Responsive heading. At small screen sizes, displays as heading level 2._
|
741 |
|
742 | <h1>Example heading element</h1>
|
743 | <p class="h1">A non-heading element</p>
|
744 |
|
745 | ```
|
746 | <h1>Example heading element</h1>
|
747 | <p class="h1">A non-heading element</p>
|
748 | ```
|
749 |
|
750 | #### Heading level 2
|
751 |
|
752 | _Responsive heading. At small screen sizes, displays as heading level 3._
|
753 |
|
754 | <h2>Example heading element</h2>
|
755 | <p class="h2">A non-heading element</p>
|
756 |
|
757 | ```
|
758 | <h2>Example heading element</h2>
|
759 | <p class="h2">A non-heading element</p>
|
760 | ```
|
761 |
|
762 | #### Heading level 3
|
763 |
|
764 | _Responsive heading. At small screen sizes, displays as heading level 4._
|
765 |
|
766 | <h3>Example heading element</h3>
|
767 | <p class="h3">A non-heading element</p>
|
768 |
|
769 | ```
|
770 | <h3>Example heading element</h3>
|
771 | <p class="h3">A non-heading element</p>
|
772 | ```
|
773 |
|
774 | #### Heading level 4
|
775 |
|
776 | _Not a responsive heading._
|
777 |
|
778 | <h4>Example heading element</h4>
|
779 | <p class="h4">A non-heading element</p>
|
780 |
|
781 | ```
|
782 | <h4>Example heading element</h4>
|
783 | <p class="h4">A non-heading element</p>
|
784 | ```
|
785 |
|
786 | #### Heading level 5
|
787 |
|
788 | _Not a responsive heading._
|
789 |
|
790 | <h5>Example heading element</h5>
|
791 | <p class="h5">A non-heading element</p>
|
792 |
|
793 | ```
|
794 | <h5>Example heading element</h5>
|
795 | <p class="h5">A non-heading element</p>
|
796 | ```
|
797 |
|
798 | #### Heading level 6
|
799 |
|
800 | _Not a responsive heading._
|
801 |
|
802 | <h6>Example heading element</h6>
|
803 | <p class="h6">A non-heading element</p>
|
804 |
|
805 | ```
|
806 | <h6>Example heading element</h6>
|
807 | <p class="h6">A non-heading element</p>
|
808 | ```
|
809 |
|
810 | #### Lead paragraph
|
811 |
|
812 | _Responsive text. Displays as a Heading 3 on large screens; displays at Heading
|
813 | 4 size (but still Regular weight) on small screens._
|
814 |
|
815 | <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation
|
816 | ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
817 |
|
818 | ```
|
819 | <p class="lead-paragraph">Ut enim ad minim veniam, quis nostrud exercitation
|
820 | ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
821 | ```
|
822 |
|
823 | #### Display heading (aka "superheading")
|
824 |
|
825 | <h1 class="superheading">Example display heading</h1>
|
826 |
|
827 | ```
|
828 | <h1 class="superheading">Example display heading</h1>
|
829 | ```
|
830 |
|
831 | ### Body copy vertical margins
|
832 |
|
833 | - Applies `15px` bottom `margin` to all `p`, `ul`, `ol`, `dl`, `figure`,
|
834 | `table`, and `blockquote` elements.
|
835 | - Applies `-5px` top `margin` to lists following paragraphs to reduce `margin`
|
836 | between them to `10px`.
|
837 | - Applies `8px` bottom `margin` to list items that are not within a `nav`
|
838 | element.
|
839 | - Assumes that the font size of each of these items remains the default.
|
840 |
|
841 | <p>Paragraph margin example</p>
|
842 | <p>Paragraph margin example</p>
|
843 | <ul>
|
844 | <li>List item 1</li>
|
845 | <li>List item 2</li>
|
846 | <li>List item 3</li>
|
847 | </ul>
|
848 | <p>Paragraph margin example</p>
|
849 |
|
850 | ```
|
851 | <p>Paragraph margin example</p>
|
852 | <p>Paragraph margin example</p>
|
853 | <ul>
|
854 | <li>List item 1</li>
|
855 | <li>List item 2</li>
|
856 | <li>List item 3</li>
|
857 | </ul>
|
858 | <p>Paragraph margin example</p>
|
859 | ```
|
860 |
|
861 | ### Default links
|
862 |
|
863 | _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for
|
864 | demonstration purposes only and should not be used in production._
|
865 |
|
866 | #### Default state
|
867 |
|
868 | <a href="#">Default link style</a>
|
869 |
|
870 | ```
|
871 | <a href="#">Default link style</a>
|
872 | ```
|
873 |
|
874 | #### Visited state
|
875 |
|
876 | <a href="#" class="visited">Visited link style</a>
|
877 |
|
878 | ```
|
879 | <a href="#" class="visited">Visited link style</a>
|
880 | ```
|
881 |
|
882 | #### Hovered state
|
883 |
|
884 | <a href="#" class="hover">Visited link style</a>
|
885 |
|
886 | ```
|
887 | <a href="#" class="hover">Visited link style</a>
|
888 | ```
|
889 |
|
890 | #### Focused state
|
891 |
|
892 | <a href="#" class="focus">Visited link style</a>
|
893 |
|
894 | ```
|
895 | <a href="#" class="focus">Visited link style</a>
|
896 | ```
|
897 |
|
898 | #### Active state
|
899 |
|
900 | <a href="#" class="active">Visited link style</a>
|
901 |
|
902 | ```
|
903 | <a href="#" class="active">Visited link style</a>
|
904 | ```
|
905 |
|
906 | ### Underlined links
|
907 |
|
908 | Links are automatically underlined when they are a child of a `p`, `li`, or
|
909 | `dd`. To enable them elsewhere, simply add a `border-bottom-width: 1px;` to
|
910 | the link.
|
911 |
|
912 | _Note that the `.visited`, `.hover`, `.focus`, `.active` classes are for
|
913 | demonstration purposes only and should not be used in production._
|
914 |
|
915 | #### States
|
916 |
|
917 | <p>
|
918 | <a href="#">Default</a>,
|
919 | <a href="#" class="visited">Visited</a>,
|
920 | <a href="#" class="hover">Hovered</a>,
|
921 | <a href="#" class="focus">Focused</a>,
|
922 | <a href="#" class="active">Active</a>
|
923 | </p>
|
924 |
|
925 | ```
|
926 | <p>
|
927 | <a href="#">Default</a>,
|
928 | <a href="#" class="visited">Visited</a>,
|
929 | <a href="#" class="hover">Hovered</a>,
|
930 | <a href="#" class="focus">Focused</a>,
|
931 | <a href="#" class="active">Active</a>
|
932 | </p>
|
933 | ```
|
934 |
|
935 | #### Underline conditions
|
936 |
|
937 | <p>
|
938 | <a href="#">A child of a paragraph</a>
|
939 | </p>
|
940 | <ul>
|
941 | <li>
|
942 | <a href="#">A child of a list item</a>
|
943 | </li>
|
944 | </ul>
|
945 | <dl>
|
946 | <dt>
|
947 | Definition list term
|
948 | </dt>
|
949 | <dd>
|
950 | <a href="#">A child of a definition list description</a>
|
951 | </dd>
|
952 | </dl>
|
953 |
|
954 | ```
|
955 | <p>
|
956 | <a href="#">A child of a paragraph</a>
|
957 | </p>
|
958 | <ul>
|
959 | <li>
|
960 | <a href="#">A child of a list item</a>
|
961 | </li>
|
962 | </ul>
|
963 | <dl>
|
964 | <dt>
|
965 | Definition list term
|
966 | </dt>
|
967 | <dd>
|
968 | <a href="#">A child of a definition list description</a>
|
969 | </dd>
|
970 | </dl>
|
971 | ```
|
972 |
|
973 | #### Exceptions for underlined links
|
974 |
|
975 | Links within a `nav` element are not underlined.
|
976 |
|
977 | <nav>
|
978 | <p>
|
979 | <a href="#">A child of a paragraph</a>
|
980 | </p>
|
981 | <ul>
|
982 | <li>
|
983 | <a href="#">A child of a list item</a>
|
984 | </li>
|
985 | </ul>
|
986 | <dl>
|
987 | <dt>
|
988 | Definition list term
|
989 | </dt>
|
990 | <dd>
|
991 | <a href="#">A child of a definition list description</a>
|
992 | </dd>
|
993 | </dl>
|
994 | </nav>
|
995 |
|
996 | ```
|
997 | <nav>
|
998 | <p>
|
999 | <a href="#">A child of a paragraph</a>
|
1000 | </p>
|
1001 | <ul>
|
1002 | <li>
|
1003 | <a href="#">A child of a list item</a>
|
1004 | </li>
|
1005 | </ul>
|
1006 | <dl>
|
1007 | <dt>
|
1008 | Definition list term
|
1009 | </dt>
|
1010 | <dd>
|
1011 | <a href="#">A child of a definition list description</a>
|
1012 | </dd>
|
1013 | </dl>
|
1014 | </nav>
|
1015 | ```
|
1016 |
|
1017 | ### Lists
|
1018 |
|
1019 | #### Unordered list
|
1020 |
|
1021 | <p> Paragraph example for visual reference</p>
|
1022 | <ul>
|
1023 | <li>List item 1</li>
|
1024 | <li>List item 2</li>
|
1025 | <li>List item 3</li>
|
1026 | </ul>
|
1027 |
|
1028 | ```
|
1029 | <p> Paragraph example for visual reference</p>
|
1030 | <ul>
|
1031 | <li>List item 1</li>
|
1032 | <li>List item 2</li>
|
1033 | <li>List item 3</li>
|
1034 | </ul>
|
1035 | ```
|
1036 |
|
1037 | #### Ordered list
|
1038 |
|
1039 | <p>Paragraph example for visual reference</p>
|
1040 | <ol>
|
1041 | <li>List item 1</li>
|
1042 | <li>List item 2</li>
|
1043 | <li>List item 3</li>
|
1044 | </ol>
|
1045 |
|
1046 | ```
|
1047 | <p>Paragraph example for visual reference</p>
|
1048 | <ol>
|
1049 | <li>List item 1</li>
|
1050 | <li>List item 2</li>
|
1051 | <li>List item 3</li>
|
1052 | </ol>
|
1053 | ```
|
1054 |
|
1055 | ### Tables
|
1056 |
|
1057 | #### Standard table
|
1058 |
|
1059 | <table>
|
1060 | <thead>
|
1061 | <tr>
|
1062 | <th>Column 1 header</th>
|
1063 | <th>Column 2 header</th>
|
1064 | <th>Column 3 header</th>
|
1065 | </tr>
|
1066 | </thead>
|
1067 | <tbody>
|
1068 | <tr>
|
1069 | <td>Row 1, column 1</td>
|
1070 | <td>Row 1, column 2</td>
|
1071 | <td>Row 1, column 3</td>
|
1072 | </tr>
|
1073 | <tr>
|
1074 | <td>Row 2, column 1</td>
|
1075 | <td>Row 2, column 2</td>
|
1076 | <td>Row 2, column 3</td>
|
1077 | </tr>
|
1078 | <tr>
|
1079 | <td>Row 3, column 1</td>
|
1080 | <td>Row 3, column 2</td>
|
1081 | <td>Row 3, column 3</td>
|
1082 | </tr>
|
1083 | </tbody>
|
1084 | </table>
|
1085 |
|
1086 | ```
|
1087 | <table>
|
1088 | <thead>
|
1089 | <tr>
|
1090 | <th>Column 1 header</th>
|
1091 | <th>Column 2 header</th>
|
1092 | <th>Column 3 header</th>
|
1093 | </tr>
|
1094 | </thead>
|
1095 | <tbody>
|
1096 | <tr>
|
1097 | <td>Row 1, column 1</td>
|
1098 | <td>Row 1, column 2</td>
|
1099 | <td>Row 1, column 3</td>
|
1100 | </tr>
|
1101 | <tr>
|
1102 | <td>Row 2, column 1</td>
|
1103 | <td>Row 2, column 2</td>
|
1104 | <td>Row 2, column 3</td>
|
1105 | </tr>
|
1106 | <tr>
|
1107 | <td>Row 3, column 1</td>
|
1108 | <td>Row 3, column 2</td>
|
1109 | <td>Row 3, column 3</td>
|
1110 | </tr>
|
1111 | </tbody>
|
1112 | </table>
|
1113 | ```
|
1114 |
|
1115 | ### Block quote
|
1116 |
|
1117 | _Note that the use of a `blockquote` is to quote an external work. See
|
1118 | `.pull-quote` if you need to highlight an excerpt from the current work._
|
1119 |
|
1120 | _Note that it is best practice to document the URL of a quoted work using
|
1121 | the `cite` attribute._
|
1122 |
|
1123 | <blockquote cite="link-to-source">
|
1124 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
|
1125 | similique fugit hic eligendi praesentium officiis illum optio iusto
|
1126 | commodi eum tempore nisi ad in perferendis enim quo dolores.
|
1127 | Reprehenderit similique earum quibusdam possimus vitae esse
|
1128 | nesciunt mollitia sed beatae aliquid dolores iure a impedit quam
|
1129 | minus eum modi illum ducimus eligendi eveniet labore non sequi
|
1130 | voluptate et totam praesentium animi itaque asperiores dolorum
|
1131 | sunt laudantium repellat nam commodi. Perspiciatis natus aliquam
|
1132 | veniam officiis ducimus voluptatum ut necessitatibus non!
|
1133 | </blockquote>
|
1134 |
|
1135 | ```
|
1136 | <blockquote cite="link-to-source">
|
1137 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa
|
1138 | similique fugit hic eligendi praesentium officiis illum optio iusto
|
1139 | commodi eum tempore nisi ad in perferendis enim quo dolores.
|
1140 | Reprehenderit similique earum quibusdam possimus vitae esse
|
1141 | nesciunt mollitia sed beatae aliquid dolores iure a impedit quam
|
1142 | minus eum modi illum ducimus eligendi eveniet labore non sequi
|
1143 | voluptate et totam praesentium animi itaque asperiores dolorum
|
1144 | sunt laudantium repellat nam commodi. Perspiciatis natus aliquam
|
1145 | veniam officiis ducimus voluptatum ut necessitatibus non!
|
1146 | </blockquote>
|
1147 | ```
|
1148 |
|
1149 |
|
1150 | ## Base images
|
1151 |
|
1152 | ### Full-width images
|
1153 |
|
1154 | Gives all images a default `max-width` of `100%` of their container.
|
1155 |
|
1156 | <img src="http://placekitten.com/800/40" alt="">
|
1157 |
|
1158 | ```
|
1159 | <img src="http://placekitten.com/800/40" alt="">
|
1160 | ```
|
1161 |
|
1162 | ### Figure
|
1163 |
|
1164 | Resets browser default side `margins` for `figure` to `0`,
|
1165 | and removes bottom inline spacing from `img` elements within.
|
1166 |
|
1167 | <figure>
|
1168 | <img src="http://placekitten.com/340/320">
|
1169 | </figure>
|
1170 |
|
1171 | ```
|
1172 | <figure>
|
1173 | <img src="http://placekitten.com/340/320">
|
1174 | </figure>
|
1175 | ```
|
1176 |
|
1177 | ## Code blocks
|
1178 |
|
1179 | ### Inline code
|
1180 |
|
1181 | <p>This is an example of paragraph text <code><a href="#">Test Link</a></code> with an inline code block</p>
|
1182 |
|
1183 | ```
|
1184 | <p>This is an example of paragraph text with an inline code block <code><a href="#" class="a-btn" title="Test button">Anchor Tag</a></code></p>
|
1185 | ```
|
1186 |
|
1187 | ### Fenced code block
|
1188 |
|
1189 | This is an example of a fenced code block following some paragraph text.
|
1190 |
|
1191 | <pre>
|
1192 | <code><a href="#" class="a-btn" title="Test button">Anchor Tag</a>
|
1193 | <button class="a-btn" title="Test button">Button Tag</button>
|
1194 | <input type="submit" value="Input Tag" class="a-btn"></code>
|
1195 | </pre>
|
1196 |
|
1197 | ```
|
1198 | <pre>
|
1199 | <code><a href="#" class="a-btn" title="Test button">Anchor Tag</a>
|
1200 | <button class="a-btn" title="Test button">Button Tag</button>
|
1201 | <input type="submit" value="Input Tag" class="a-btn"></code>
|
1202 | </pre>
|
1203 | ```
|
1204 |
|
1205 | _Do not include indentation or white space within the `<code>` tags unless you want it to be rendered._
|
1206 |
|
\ | No newline at end of file |