From 133390f2a745ad5462c2fda62e7c92431d576868 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Fri, 16 Dec 2016 01:13:14 +0200 Subject: [PATCH] Customization documentation complete --- docs/v2/DEVLOG.md | 1 + docs/v2/customization.html | 55 +++++++++++++++++++++++++++++------ src/flavors/mini-default.scss | 6 ++-- 3 files changed, 49 insertions(+), 13 deletions(-) diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index e4416a0..be0e79d 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -653,3 +653,4 @@ - Updated table of sized in `index`. - Started writing `customization`. - Documented `core` in `customization`. +- `customization` documentation complete (very simplistic, but I think the flavor file is better as a guideline). diff --git a/docs/v2/customization.html b/docs/v2/customization.html index 9ea3fd9..a6d621d 100644 --- a/docs/v2/customization.html +++ b/docs/v2/customization.html @@ -131,7 +131,7 @@

Grid

-

+

The grid module contains two importan variables, the boolean $use-four-step-grid which determines if the grid has 3 or 4 breakpoints and the $grid-column-count which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.

@@ -139,7 +139,7 @@

Navigation

-

+

The navigation module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing and similar things. Bear in mind that the presentation of buttons inside the <header> element will be affected by the styling of all button elements, as defined in the input_control module. The variable stands out in this module is $nav-sublink-depth which determines how deep a navigational hierarchy tree can be.

@@ -147,7 +147,12 @@

Input Control

-

+

The input_control module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <input> elements utilize variables that concern color, spacing, sizing etc. Button variables are more interesting, especially the ones concerning the opacity of button elements ($button-back-opacity and $button-hover-back-opacity). The $hide-file-inputs boolean variable determines how <input type="file"> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the $checkbox-size variable, as it determines a few attributes of both elements.

+

There are two mixins in the input_control module, specifically:

+
@@ -155,7 +160,7 @@

Table

-

+

The table module's variables deal mostly with basic table styling. The $table-mobile-breakpoint is very important as it determines the breakpoint for responsive tables' mobile view, along with $table-mobile-card-label which determines the attribute that will be used to display the table headings on mobile devices.

@@ -163,7 +168,13 @@

Card

-

+

The card modules' variables mostly deal with things like class names, spacing, sizing and colors. Cards offer a handful of mixins, specifically:

+
@@ -171,7 +182,7 @@

Tab

-

+

The tab module utilizes a few naming and color variables, along with some sizing and spacing variables to deal with presentation and functionality. Many of the sizing variables are very dependent on each other's values. The $tab-stacked-breakpoint variable is especially important, as it determines the mobile view breakpoint for the tabs component.

@@ -179,7 +190,13 @@

Contextual

-

+

The contextual module features, apart from basic naming and styling variables, a few things of note. The boolean variable $alert-include-animated determines if animted alerts will be inluded or not. There are also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:

+
@@ -187,7 +204,14 @@

Progress

-

+

The progress module contains lots of variables that affect basic styling, but it also features a few interesting mixins:

+
@@ -195,11 +219,24 @@

Utility

-

+

The utility module contains a few variables dealing with naming and basic styling, but its most important feature is its mixins:

+
+
+
+

If you would rather use one of the pre-defined flavors, check out our flavors page for a list of all flavors currently available.

+
+
diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index dc057a0..ef1b086 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -223,7 +223,7 @@ $input-readonly-border-color: #bdbdbd; // Border color for readonly inp $input-placeholder-fore-color: #616161; // Text color for input placeholder $button-back-color: #bdbdbd; // Back color for button elements $button-back-opacity: 0.65; // Background opacity for button elements -$button-hover-back-opacity: 0.8; // Background opacity for button elements +$button-hover-back-opacity: 0.8; // Background opacity for button elements // on hover or focus $button-fore-color: $fore-color; // Text color for button elements $button-border-style: 0; // Border style for button elements @@ -358,7 +358,7 @@ $card-section-padding1-name: 'double-padded'; // Class name for card sect $card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1 // Notes: // [1] - The cards module depends heavily on the grid system module. -// Variables for tabs [1] +// Variables for tabs $tab-container-name: 'tabs'; // Class name for the tabs' container $tab-container-box-shadow: // Box shadow for the tabs' container 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); @@ -525,8 +525,6 @@ $responsive-padding-large-value:6px 8px; // Padding value for responsiv $float-prefix: 'float'; // Prefix for float classes $clearfix-name: 'clearfix'; // Class name for clearfix $center-block-name: 'center-block'; // Class name for center block -// Notes: -// [1] - The tabs module is somewhat dependent on the grid system module. // Enable mini.css @import '../mini/core'; // Use mixins for forms and inputs