Core
The core module contains basic reset and fix rules, based on Normalize.css v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.
All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.
Quick overview
Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The core module utilizes the ruleset of Normalize.css v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in core deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.
Quick start
To customize the core module, duplicate an existing flavor file (we suggest you use the mini-default.scss flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using sass-autocompile if you are working with Atom).
Typography & headings
The core module's typography rules are quite extensive and deal with background and foreground colors, used fonts, sizing and line height, along with heading, link and paragraph styling.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $fore-color | Color | Text and foregound color | #212121 |
| $back-color | Color | Body background color | #f5f5f5 |
| $base-font-family | Font family | Default font stack for all elements | sans-serif |
| $base-root-font-size | Font size (px only) |
Root font size | 16px |
| $apply-defaults-to-all | Logical | Applies default font sizing be to all elements1 | true |
| $base-font-size | Font size (em or rem only) |
Default font sizing for all elements1 | sans-serif |
| $base-line-height | Line height | Default line height for all elements | 1.5 |
| $body-margin | Margin | Margin for the body | 4px |
| $h1-font-size | Font size (em preferred) |
Font size for <h1> elements | 2em |
| $h2-font-size | Font size (em preferred) |
Font size for <h2> elements | 1.5em |
| $h3-font-size | Font size (em preferred) |
Font size for <h3> elements | 1.25em |
| $h4-font-size | Font size (em preferred) |
Font size for <h4> elements | 1.1em |
| $h5-font-size | Font size (em preferred) |
Font size for <h5> elements | 1em |
| $h6-font-size | Font size (em preferred) |
Font size for <h6> elements | 0.85em |
| $heading-line-height | Line height | Default line height for heading elements | 1.2 |
| $heading-font-weight | Font weight | Default font weight for heading elements | 500 |
| $heading-smalltext-fore-color | Color | Font color for <small> elements inside headings | #424242 |
| $make-heading-smalltext-block | Logical | Makes <small> elements inside headings display below them2 | true |
| $heading-smalltext-b-font-size | Font size (percentage preferred) | Font size for <small> elements inside headings2 | 75% |
| $heading-smalltext-b-top-margin | Margin | Top margin for <small> elements inside headings2 | -4px |
| $paragraph-margin | Margin | Margin for <p> elements | 1px 8px |
| $bold-font-weight | Font weight | Font weight for <b> and <strong> elements | 700 |
| $small-font-size | Font size (percentage preferred) | Font size for <small> elements | 75% |
| $sup-font-size | Font size (percentage preferred) | Font size for <sup> elements | 75% |
| $sup-top | Position top | Position top for <sup> elements | -8px |
| $sub-font-size | Font size (percentage preferred) | Font size for <sub> elements | 75% |
| $sub-bottom | Position bottom | Position bottom for <sub> elements | -4px |
| $link-fore-color | Color | Text color for links (unvisited) | #0277bd |
| $link-visited-fore-color | Color | Text color for links (visited) | #01579b |
| $link-hover-fore-color | Color | Text color for links (on hover)3 | #0288d1 |
| $apply-link-hover-fade | Logical | Applies fading to links on hover3 | true |
| $link-font-weight | Font weight | Font weight for links | 500 |
| $apply-link-underline | Logical | Applies underlining to links on hover | true |
Notes:
- The value of
$base-font-sizewill only be applied if$apply-defaults-to-allis set totrue. - The values of
$heading-smalltext-b-font-sizeand$heading-smalltext-b-top-marginwill only be applied if$make-heading-smalltext-blockis set totrue. - The value of
$link-hover-fore-colorwill only be applied if$apply-link-hover-fadeis set tofalse.
Common elements & fixes
The core module contains a plethora of styles for horizontal rules, lists and code elements, as well as a few optional display fixes for certain other elements.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $list-margin | Margin | Margin for <ul> and <ol> elements | 8px |
| $list-left-padding | Padding left | Left padding for <ul> and <ol> elements | 8px |
| $horizontal-rule-line-height | Line height | Line height for <hr> elements | 1.25em |
| $horizontal-rule-margin | Margin | Margin for <hr> elements | 8px |
| $horizontal-rule-border-style | Border | Border style for <hr> elements1 | 1px solid #757575 |
| $horizontal-rule-fancy-style | Logical | Applies gradient styling to <hr> elements2 | true |
| $horizontal-rule-fancy-gradient | Gradient | Gradient styling for <hr> elements2 | to right, #616161, #bdbdbd |
| $blockquote-back-color | Color | Background color for <blockquote> elements | #eeeeee |
| $blockquote-fore-color | Color | Text color for <blockquote> elements | $fore-color |
| $blockquote-margin | Margin | Margin for <blockquote> elements | 8px 10px |
| $blockquote-padding | Padding | Padding for <blockquote> elements | 8px |
| $blockquote-border-style | Border | Border style for <blockquote> elements | 1px solid #424242 |
| $blockquote-border-radius | Border radius | Border radius for <blockquote> elements | 2px |
| $blockquote-box-shadow | Box shadow | Box shadow for <blockquote> elements | 0 1px 3px rgba(0,0,0, 0.1) |
| $blockquote-sidebar-style | Border | Style for the sidebar of <blockquote> elements | 3px solid #616161 |
| $blockquote-cite-font-size | Font size | Font size for citations in <blockquote> elements | 0.85em |
| $blockquote-cite-fore-color | Color | Text color for citations in <blockquote> elements | #616161 |
| $blockquote-cite-left-position | Position left | Position left for citations in <blockquote> elements | 10px |
| $blockquote-cite-bottom-position | Position bottom | Position bottom for citations in <blockquote> elements | 0 |
| $use-default-code-fonts | Logical | Use default fonts for code elements3 | true |
| $code-font-family | Font family | Font for code elements3 | monospace |
| $code-element-padding | Padding | Padding for <code> elements | 4px |
| $code-element-fore-color | Color | Text color for <code> elements | $fore-color |
| $code-element-back-color | Color | Background color for <code> elements | #e0e0e0 |
| $code-element-border-style | Border | Border style for <code> elements | 1px solid #424242 |
| $code-element-border-radius | Border radius | Border radius for <code> elements | 2px |
| $code-element-box-shadow | Box shadow | Box shadow for <code> elements | 0 1px 2px rgba(0,0,0, 0.1) |
| $pre-element-padding | Padding | Padding for <pte> elements | 12px |
| $pre-element-margin | Margin | Margin for <pte> elements | 8px |
| $pre-element-fore-color | Color | Text color for <pre> elements | $fore-color |
| $pre-element-back-color | Color | Background color for <pre> elements | #e0e0e0 |
| $pre-element-border-style | Border | Border style for <pre> elements | 1px solid #424242 |
| $pre-element-border-radius | Border radius | Border radius for <pre> elements | 2px |
| $pre-element-box-shadow | Box shadow | Box shadow for <pre> elements | 0 1px 2px rgba(0,0,0, 0.1) |
| $add-pre-element-sidebar | Logical | Adds a sidebar to <pre> elements4 | true |
| $pre-element-sidebar-style | Border | Style of the sidebar for <pre> elements4 | 3px solid #1565c0 |
| $kbd-element-padding | Padding | Padding for <kbd> elements | 4px |
| $kbd-element-fore-color | Color | Text color for <kbd> elements | #fafafa |
| $kbd-element-back-color | Color | Background color for <kbd> elements | $fore-color |
| $kbd-element-border-style | Border | Border style for <kbd> elements | 1px solid #212121 |
| $kbd-element-border-radius | Border radius | Border radius for <kbd> elements | 2px |
| $kbd-element-box-shadow | Box shadow | Box shadow for <kbd> elements | 0 1px 2px rgba(0,0,0, 0.1) |
| $style-samp-element | Logical | Applies styling to <samp> elements5 | true |
| $samp-element-padding | Padding | Padding for <samp> elements5 | 4px |
| $samp-element-fore-color | Color | Text color for <samp> elements5 | $fore-color |
| $samp-element-back-color | Color | Background color for <samp> elements5 | #2196f3 |
| $samp-element-border-style | Border | Border style for <samp> elements5 | 1px solid #424242 |
| $samp-element-border-radius | Border radius | Border radius for <samp> elements5 | 2px |
| $samp-element-box-shadow | Box shadow | Box shadow for <samp> elements5 | 0 1px 2px rgba(0,0,0, 0.1) |
| $include-dfn-fix | Logical | Includes a display fix for <dfn> elements for Android 4.3 | true |
| $figcaption-font-size | Font size (percentage preferred) | Font size for <figcaption> elements | 80% |
| $figcaption-fore-color | Color | Text color for <figcaption> elements | #424242 |
Notes:
- The value of
$horizontal-rule-border-stylewill only be applied if$horizontal-rule-fancy-styleis set tofalse. - The value of
$horizontal-rule-fancy-gradientwill only be applied if$horizontal-rule-fancy-styleis set totrue. - The value of
$code-font-familywill only be applied if$use-default-code-fontsis set tofalse. - The value of
$pre-element-sidebar-stylewill only be applied if$add-pre-element-sidebaris set totrue. - The values of all the variables that refer to
<samp>elements will only be applied if$style-samp-elementis set totrue.
If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.