From 35d737e57d87c96d6e7c7d1755a7ea493cfd3ba6 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 11 Apr 2017 18:51:12 +0300 Subject: [PATCH] Partially written typography customization docs --- docs/customization/core.html | 109 +++++++++++++++++++++++++++++++---- docs/v2/DEVLOG.md | 4 ++ 2 files changed, 103 insertions(+), 10 deletions(-) diff --git a/docs/customization/core.html b/docs/customization/core.html index 1eae499..c30ab07 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -22,6 +22,8 @@ .col-sm-12.col-sm-last.col-md-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; } @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } } header.sticky a.button { padding: 4px 6px; font-size: 0.95em; } + td:first-child, td:last-child { font-family: monospace, monospace; } + td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @@ -68,17 +70,104 @@
-

Image responsiveness

-
-
-
-
-
-

Image elements (<img>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.

-

Sample code

- 
<img src="...">

-
+

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.


+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableTypeDescriptionSample value
$fore-colorColorText and foregound color#212121
$back-colorColorBody background color#f5f5f5
$base-font-familyFont familyDefault font stack for all elementssans-serif
$base-root-font-sizeFont size (px only)Root font size16px
$apply-defaults-to-allLogicalApplies default font sizing be to all elements1true
$base-font-sizeFont size (em or rem only)Default font sizing for all elements1sans-serif
$base-line-heightLine heightDefault line height for all elements1.5
$body-marginMarginMargin for the body4px
$h1-font-sizeFont size (em preferred)Font size for <h1> elements2em
$h2-font-sizeFont size (em preferred)Font size for <h2> elements1.5em
$h3-font-sizeFont size (em preferred)Font size for <h3> elements1.25em
$h4-font-sizeFont size (em preferred)Font size for <h4> elements1.1em
$h5-font-sizeFont size (em preferred)Font size for <h5> elements1em
$h6-font-sizeFont size (em preferred)Font size for <h6> elements0.85em
$heading-line-heightLine heightDefault line height for heading elements1.2
$heading-font-weightFont weightDefault font weight for heading elements500
$heading-smalltext-fore-colorColorFont color for <small> elements inside headings#424242
$make-heading-smalltext-blockLogicalMakes <small> elements inside headings display below them2true
$heading-smalltext-b-font-sizeFont size (percentage preferred)Font size for <small> elements inside headings275%
$heading-smalltext-b-top-marginMarginTop margin for <small> elements inside headings2-4px

+
+

Notes:

+
    +
  1. The value of $base-font-size will only be applied if $apply-defaults-to-all is set to true.
    2. +
  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. +
+
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index aadafca..2a12979 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -952,3 +952,7 @@ - Decided to change preferred CDN from `rawgit` to `gitCDN` as it seems more stable and easier to use. - Opened issue in `cdnjs`'s repo for the library not auto-updating. - Created mostly empty pages for all modules under `/customization`. + +## 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?).