// Dependencies. @import 'components/divider/divider'; // Grouping content // Block quotes // // The `

` element is for quoting blocks of content from another // source within your document. Wrap the `
` around any HTML as the quote. For straight // quotes, we recommend a `
`. // // Optionally, add a `
` to identify the source of the quote, wrapping // the name of the source work in ``. blockquote { // Set 1 unit of vertical rhythm on the top and bottom margin. // Also indent the quote on both sides. @include margin(1 $indent-amount); } // Lists // // Style guide: base.grouping.lists // Unordered list // // The `
` element is a list of items in which the order does not // explicitly matter. // Ordered list // // The `
` element is a list of items in which the order does // explicitly matter. // Description list // // The `
` element is a list of terms with their associated descriptions. dl, ol, ul { // Add vertical rhythm margins. @include margin(1 0); } dt { // Add your styles. } dd { margin: 0 0 0 $indent-amount; @include rtl { margin: 0 $indent-amount 0 0; } } ol, ul { padding: 0 0 0 $indent-amount; @include rtl { padding: 0 $indent-amount 0 0; } // Turn off margins on nested lists. ol, ul { margin: 0; } } // Figures // // The `
` element can be used to annotate illustrations, diagrams, // photos, code listings, etc. // // Optionally, a `
` element inside the `
` represents the // caption of the figure. figure { // Add vertical rhythm margins. @include margin(1 0); } figcaption { // Add your styles. } // Horizontal rule // // The `
` element represents a paragraph-level thematic break, e.g. a scene // change in a story, or a transition to another topic within a section of a // reference book. hr { @extend %divider; // Add the correct box sizing in Firefox. box-sizing: content-box; height: 0; // Show the overflow in Edge and IE. overflow: visible; } // Main // // The `
` element represents the main content of the page. main { // Add your styles. } // Body copy // // The default `font-size` and `line-height` properties are applied to the // `` element and all paragraphs. In addition, `
` (paragraphs) receive // a top and bottom margin. p, pre { @include margin(.75 0); } // Preformatted text // // The `
` element represents a block of preformatted text, such as // fragments of computer code, ASCII art, etc. %monospace { // Correct the inheritance and scaling of font size in all browsers. // The font-family value ends with ", serif". @include typeface(monospace); // Correct the odd `em` font sizing in all browsers. font-size: 1em; } pre { @extend %monospace; }