1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 12:00:36 +02:00
3
Base
Angelos Chalaris edited this page 2016-09-05 17:50:15 +03:00

The base of the mini.css framework is based on normalize.css, although modified to include typography elements. The idea is to merge basic typography with the fixes in normalize to avoid overlapping css styles. This creates a smaller file than two separate stylesheets.

How to modify

In order to modify the base of mini.css, you should check the flavor.scss file for a list of all the variables that affect the framework's base (as well as other modules for a quick flavor build). These include colors, fonts, border styles, margins, padding, as well as multipliers for headers and other elements.

Variables

  • $base-fonts, $base-font-size, $base-line-height: basic styling and fonts for most elements
  • $body-margin, $body-bg-color, $body-color: styling for body
  • $header-line-height-multiplier, $header-margin, $header-font-weight, ${h1-h5}-multiplier, $header-small-color, $header-small-font-weight: styling and modifiers for headers
  • $hr-line-height-multiplier, $hr-margin, $hr-border-style: styling for horizontal rule
  • $small-font-size, $sub-bottom, $sup-top: styling for small, sub and sup elements
  • $p-margin, $list-margin-top, $list-margin-bottom: styling for paragraphs and lists
  • $code-fonts, $code-padding, $code-bg-color, $code-border-radius, $kbd-bg-color, $kbd-color: styling for code and preformatted elements
  • $a-color, $a-hover-color, $a-visited-color, $a-visited-hover-color: styling for hyperlinks
  • $mark-bg-color, $mark-color: styling for mark elements
  • $button-fonts, $button-font-size, $button-line-height-multiplier, $button-margin: styling for buttons and inputs
  • $fieldset-border, $fieldset-border-radius, $fieldset-margin, $fieldset-padding: styling for fieldset

Remarks

  • More variables could be used to further stylize various elements. However, as the framework tries to be minimal, some styles have been merged to produce smaller stylesheets, thus minimizing the size but somewhat restricting the users when styling certain elements.
  • Responsiveness for images is also part of the base styling. This is in line with the mobile-first philosophy of the framework and can be changed manually.