From 27058d2fbad292204d94dede6aa8471fa3d727af Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 11 Apr 2017 20:27:15 +0300 Subject: [PATCH] Customization documentation for core Fully documented core module, fixed an issue with the blockquote border styling and added box-shadow customization to samp elements. --- docs/customization/core.html | 295 +++++++++++++++++++++++++++++++++- docs/v2/DEVLOG.md | 3 + src/flavors/mini-default.scss | 2 + src/mini/_core.scss | 9 +- 4 files changed, 303 insertions(+), 6 deletions(-) diff --git a/docs/customization/core.html b/docs/customization/core.html index c30ab07..98cfd32 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -60,8 +60,7 @@

Quick start

-

To use the core module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


- 
<meta name="viewport" content="width=device-width, initial-scale=1">

+

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


@@ -72,7 +71,7 @@

Typography & headings

-

The core module's typography rules are quite extensive and deal with background & foreground colors, used fonts, sizing and line height, along with heading and paragraph styling.


+

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.


@@ -158,6 +157,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableTypeDescriptionSample value
$heading-smalltext-b-top-marginMargin Top margin for <small> elements inside headings2-4px
$paragraph-marginMarginMargin for <p> elements1px 8px
$bold-font-weightFont weightFont weight for <b> and <strong> elements700
$small-font-sizeFont size (percentage preferred)Font size for <small> elements75%
$sup-font-sizeFont size (percentage preferred)Font size for <sup> elements75%
$sup-topPosition topPosition top for <sup> elements-8px
$sub-font-sizeFont size (percentage preferred)Font size for <sub> elements75%
$sub-bottomPosition bottomPosition bottom for <sub> elements-4px
$link-fore-colorColorText color for links (unvisited)#0277bd
$link-visited-fore-colorColorText color for links (visited)#01579b
$link-hover-fore-colorColorText color for links (on hover)3#0288d1
$apply-link-hover-fadeLogicalApplies fading to links on hover3true
$link-font-weightFont weightFont weight for links500
$apply-link-underlineLogicalApplies underlining to links on hovertrue

@@ -166,11 +217,249 @@
  1. The value of $base-font-size will only be applied if $apply-defaults-to-all is set to true.
  2. 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.
    3. +
  3. 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.


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableTypeDescriptionSample value
$list-marginMarginMargin for <ul> and <ol> elements8px
$list-left-paddingPadding leftLeft padding for <ul> and <ol> elements8px
$horizontal-rule-line-heightLine heightLine height for <hr> elements1.25em
$horizontal-rule-marginMarginMargin for <hr> elements8px
$horizontal-rule-border-styleBorderBorder style for <hr> elements11px solid #757575
$horizontal-rule-fancy-styleLogicalApplies gradient styling to <hr> elements2true
$horizontal-rule-fancy-gradientGradientGradient styling for <hr> elements2to right, #616161, #bdbdbd
$blockquote-back-colorColorBackground color for <blockquote> elements#eeeeee
$blockquote-fore-colorColorText color for <blockquote> elements$fore-color
$blockquote-marginMarginMargin for <blockquote> elements8px 10px
$blockquote-paddingPaddingPadding for <blockquote> elements8px
$blockquote-border-styleBorderBorder style for <blockquote> elements1px solid #424242
$blockquote-border-radiusBorder radiusBorder radius for <blockquote> elements2px
$blockquote-box-shadowBox shadowBox shadow for <blockquote> elements0 1px 3px rgba(0,0,0, 0.1)
$blockquote-sidebar-styleBorderStyle for the sidebar of <blockquote> elements3px solid #616161
$blockquote-cite-font-sizeFont sizeFont size for citations in <blockquote> elements0.85em
$blockquote-cite-fore-colorColorText color for citations in <blockquote> elements#616161
$blockquote-cite-left-positionPosition leftPosition left for citations in <blockquote> elements10px
$blockquote-cite-bottom-positionPosition bottomPosition bottom for citations in <blockquote> elements0
$use-default-code-fontsLogicalUse default fonts for code elements3true
$code-font-familyFont familyFont for code elements3monospace
$code-element-paddingPaddingPadding for <code> elements4px
$code-element-fore-colorColorText color for <code> elements$fore-color
$code-element-back-colorColorBackground color for <code> elements#e0e0e0
$code-element-border-styleBorderBorder style for <code> elements1px solid #424242
$code-element-border-radiusBorder radiusBorder radius for <code> elements2px
$code-element-box-shadowBox shadowBox shadow for <code> elements0 1px 2px rgba(0,0,0, 0.1)
$pre-element-paddingPaddingPadding for <pte> elements12px
$pre-element-marginMarginMargin for <pte> elements8px
$pre-element-fore-colorColorText color for <pre> elements$fore-color
$pre-element-back-colorColorBackground color for <pre> elements#e0e0e0
$pre-element-border-styleBorderBorder style for <pre> elements1px solid #424242
$pre-element-border-radiusBorder radiusBorder radius for <pre> elements2px
$pre-element-box-shadowBox shadowBox shadow for <pre> elements0 1px 2px rgba(0,0,0, 0.1)
$add-pre-element-sidebarLogicalAdds a sidebar to <pre> elements4true
$pre-element-sidebar-styleBorderStyle of the sidebar for <pre> elements43px solid #1565c0
$kbd-element-paddingPaddingPadding for <kbd> elements4px
$kbd-element-fore-colorColorText color for <kbd> elements#fafafa
$kbd-element-back-colorColorBackground color for <kbd> elements$fore-color
$kbd-element-border-styleBorderBorder style for <kbd> elements1px solid #212121
$kbd-element-border-radiusBorder radiusBorder radius for <kbd> elements2px
$kbd-element-box-shadowBox shadowBox shadow for <kbd> elements0 1px 2px rgba(0,0,0, 0.1)
$style-samp-elementLogicalApplies styling to <samp> elements5true
$samp-element-paddingPaddingPadding for <samp> elements54px
$samp-element-fore-colorColorText color for <samp> elements5$fore-color
$samp-element-back-colorColorBackground color for <samp> elements5#2196f3
$samp-element-border-styleBorderBorder style for <samp> elements51px solid #424242
$samp-element-border-radiusBorder radiusBorder radius for <samp> elements52px
$samp-element-box-shadowBox shadowBox shadow for <samp> elements50 1px 2px rgba(0,0,0, 0.1)
$include-dfn-fixLogicalIncludes a display fix for <dfn> elements for Android 4.3true
$figcaption-font-sizeFont size (percentage preferred)Font size for <figcaption> elements80%
$figcaption-fore-colorColorText 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. +
  2. The value of $horizontal-rule-fancy-gradient will only be applied if $horizontal-rule-fancy-style is set to true.
    3. +
  3. The value of $code-font-family will only be applied if $use-default-code-fonts is set to false.
    4. +
  4. The value of $pre-element-sidebar-style will only be applied if $add-pre-element-sidebar is set to true.
    5. +
  5. The values of all the variables that refer to <samp> elements will only be applied if $style-samp-element is set to true.
    6. +
+
+
+
+
+

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.

diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 2a12979..e80316a 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -956,3 +956,6 @@ ## 20170411 - *TODO* Actually explain what the deal with Pull requests is, using a `dev` branch OR use `cdnjs`, provided the fact that it is now updated to the latest release (will it stay that way?). +- Tweaked the way `border` was used inside `blockquote`, ordering wasn't doing me any favors. Should not cause any problems now. Random catch, thank you **hugging cat**! +- Added `$samp-element-box-shadow` for consistency, mostly. +- Fully documented customization page for `core` module. diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index fba485a..a4ea0ff 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -84,6 +84,8 @@ $style-samp-element: false; // Should styles for be included? //$samp-element-back-color: #2196f3; // Background color for //$samp-element-border-style: 0; // Border style for //$samp-element-border-radius:2px; // Border radius for +//$samp-element-box-shadow: // Box shadow for +//0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); $include-dfn-fix: true; // Should the fix for Android 4.3 concerning be included (`true`/`false`) [9] $small-font-size: 75%; // Font size for elements $sup-font-size: 75%; // Font size for elements diff --git a/src/mini/_core.scss b/src/mini/_core.scss index afcea3b..5cf07a8 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -165,12 +165,12 @@ blockquote { // Overwrite defaults margin: $blockquote-margin; padding: $blockquote-padding; - @if $blockquote-sidebar-style != 0 { - border-left: $blockquote-sidebar-style; - } @if $blockquote-border-style != 0 { border: $blockquote-border-style; } + @if $blockquote-sidebar-style != 0 { + border-left: $blockquote-sidebar-style; + } @if $blockquote-border-radius != 0 { border-radius: $blockquote-border-radius; } @@ -290,6 +290,9 @@ $style-samp-element: false !default; @if $samp-element-padding != 0 { padding: $samp-element-padding; } + @if $samp-element-box-shadow != none { + box-shadow: $samp-element-box-shadow; + } } }