From 882519e9f712c1c70fc5f859221f8b0d7aaccac8 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 16 Dec 2016 00:30:40 +0200 Subject: [PATCH] Core customization documentation --- docs/v2/DEVLOG.md | 1 + docs/v2/customization.html | 91 ++++++++++++++++++++++++++++++++++- src/flavors/mini-default.scss | 2 +- 3 files changed, 92 insertions(+), 2 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 64476c4..e4416a0 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -652,3 +652,4 @@ - Demo updated to include the latest addition. - Updated table of sized in `index`. - Started writing `customization`. +- Documented `core` in `customization`. diff --git a/docs/v2/customization.html b/docs/v2/customization.html index 0cb20bd..9ea3fd9 100644 --- a/docs/v2/customization.html +++ b/docs/v2/customization.html @@ -108,7 +108,96 @@

Building a flavor

-

Creating your own flavor can be as easy or as complicated as your needs. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.

+

Creating your own flavor can be as easy or as complicated as your needs. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.


+
+
+

Core

+
+
+

The core module uses a lot of variables, most of which are pretty straightforward. Some of the most important ones are as follows:

+
    +
  • $fore-color - base text color
    • +
  • $back-color - base background color or image
    • +
  • $base-font-family - font stack
    • +
  • $base-root-font-size - font size of the page's root element, must be specified in px units
    • +
  • $base-line-height - base line height for the page's text
    • +
  • $body-margin - margin of the <body> element
    • +
+

Apart from the above variables, you should take note of the boolean $apply-defaults-to-all, which will reset font styling for all elements, utilizing the value of $base-font-size in the process. Certain elements like headings, horizontal rules and code blocks have some opinionated "modern" styles which can be turned on or off, using the boolean variables $make-heading-smalltext-block, $horizontal-rule-fancy-style and $add-pre-element-sidebar. The $style-samp-element and $include-dfn-fix boolean variables will either add styling for the elements they affect or completely omit it. This is part of the code optimization process, as most websites rarely use these elements. Finally, there are two boolean variables for link styling, $apply-link-underline and $apply-link-hover-fade.

+
+
+
+
+

Grid

+
+
+

+
+
+
+
+

Navigation

+
+
+

+
+
+
+
+

Input Control

+
+
+

+
+
+
+
+

Table

+
+
+

+
+
+
+
+

Card

+
+
+

+
+
+
+
+

Tab

+
+
+

+
+
+
+
+

Contextual

+
+
+

+
+
+
+
+

Progress

+
+
+

+
+
+
+
+

Utility

+
+
+

+
+
diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index f89dedb..dc057a0 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -130,7 +130,7 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state // displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included. // [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal // color, as defined in $link-fore-color. -// [11] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or +// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // focused. Otherwise, the color specified in $link-hover-fore-color will be used. // Variables for grid elements $use-four-step-grid: false; // Should the old 4-step grid system be used