From f33b87fedb77e6035fea1578aac1a0215817b26a Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 15 Nov 2017 13:24:13 +0200 Subject: [PATCH] Added headings to documentation Somehow I had deleted them. --- docs/doc-fragments/docFragments.js | 2 +- docs/v3/docs.html | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/docs/doc-fragments/docFragments.js b/docs/doc-fragments/docFragments.js index d100d2f..751b1f8 100644 --- a/docs/doc-fragments/docFragments.js +++ b/docs/doc-fragments/docFragments.js @@ -6,5 +6,5 @@ var images = require('./images'); var codeAndQuotations = require('./codeAndQuotations'); module.exports = [ - gettingStarted, commonTextualElements, images, lists, codeAndQuotations + gettingStarted, commonTextualElements, headings, images, lists, codeAndQuotations ] diff --git a/docs/v3/docs.html b/docs/v3/docs.html index b0b26e9..6fa06f5 100644 --- a/docs/v3/docs.html +++ b/docs/v3/docs.html @@ -60,6 +60,25 @@ }

Don't: Avoid altering the base font size of 16px directly in your CSS code, as it can cause problems with the display of certain elements.

Customization

+
+

Headings

+

All of the HTML5 heading elements are styled, using a customizable ratio and simple rules, providing a clean base for your web app's titles. Apart from the headings themselves, customized rules are provided for displaying subheadings or explanatory text below your web app's headings.

+

Example

Heading 1Subheading

+

Heading 2Subheading

+

Heading 3Subheading

+

Heading 4Subheading

+
Heading 5Subheading
+
Heading 6Subheading
+

Sample code

<h1>Heading 1 <small>Subheading</small></h1>
+<h2>Heading 2 <small>Subheading</small></h2>
+<h3>Heading 3 <small>Subheading</small></h3>
+<h4>Heading 4 <small>Subheading</small></h4>
+<h5>Heading 5 <small>Subheading</small></h5>
+<h6>Heading 6 <small>Subheading</small></h6>
+
+ + +

Customization

  • Text color can be changed globally by changing the value of the --fore-color variable. This will affect the color of the headings' main text.
  • Secondary text color can be changed globally by changing the value of the --secondary-fore-color variable. This will affect the color of subheadings.
  • Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.
  • You can change the ratio of headings' size by chaning the value of the --heading-ratio variable. Bear in mind that the value of this variable must be unitless to work properly.

Images & captions

Image elements are responsive by default, without the need for any special classes or anything similar. They automatically scale down as necessary to display properly on smaller devices, while retaining their original aspect ratio, while they will never scale above their original size.