# 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.

## 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.

Variables
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
$use-fluid-typography | Logical | Enables scaling of the font size for the root elements2 | true
$fluid-type-start-breakpoint | Breakpoint | Breakpoint where fluid typography scaling starts2 | sans-serif
$fluid-type-end-breakpoint | Breakpoint | Breakpoint where fluid typography scaling ends2 | sans-serif
$fluid-type-small-type | Font size (`px` only) | Smallest root font size for fluid typography2 | sans-serif
$fluid-type-large-type | Font size (`px` only) | Largest root font size for fluid typography2 | sans-serif
$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 them3 | true
$heading-smalltext-b-font-size | Font size (percentage preferred) | Font size for `<small>` elements inside headings3 | 75%
$heading-smalltext-b-top-margin | Margin | Top margin for `<small>` elements inside headings3 | -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)4 | #0288d1
$apply-link-hover-fade | Logical | Applies fading to links on hover4 | true
$link-font-weight | Font weight | Font weight for links | 500
$apply-link-underline | Logical | Applies underlining to links on hover | true

### Notes:

1. The value of `$base-font-size` will only be applied if `$apply-defaults-to-all` is set to `true`.
2. The values of `$fluid-type-start-breakpoint`, `$fluid-type-end-breakpoint`, `$fluid-type-small-type` and `$fluid-type-large-type` will only be applied if `$use-fluid-typography` is set to `true`.
3. The values of `$heading-smalltext-b-font-size` and `$heading-smalltext-b-top-margin` will only be applied if `$make-heading-smalltext-block` is set to `true`.
4. The value of `$link-hover-fore-color` will only be applied if `$apply-link-hover-fade` is set to `false`.

## 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.

Variables
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:

1. The value of `$horizontal-rule-border-style` will only be applied if `$horizontal-rule-fancy-style` is set to `false`.
2. The value of `$horizontal-rule-fancy-gradient` will only be applied if `$horizontal-rule-fancy-style` is set to `true`.
3. The value of `$code-font-family` will only be applied if `$use-default-code-fonts` is set to `false`.
4. The value of `$pre-element-sidebar-style` will only be applied if `$add-pre-element-sidebar` is set to `true`.
5. The values of all the variables that refer to `<samp>` elements will only be applied if `$style-samp-element` is set to `true`.

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.