New Typography prefix and default styles

assets/styles/components/_heading.scss

@@ -1,28 +0,0 @@
-.c-heading {
-    line-height: $line-height-h;
-    margin-bottom: rem(30px);
-
-    &.-h1 {
-        font-size: rem($font-size-h1);
-    }
-
-    &.-h2 {
-        font-size: rem($font-size-h2);
-    }
-
-    &.-h3 {
-        font-size: rem($font-size-h3);
-    }
-
-    &.-h4 {
-        font-size: rem($font-size-h4);
-    }
-
-    &.-h5 {
-        font-size: rem($font-size-h5);
-    }
-
-    &.-h6 {
-        font-size: rem($font-size-h6);
-    }
-}

assets/styles/elements/_page.scss

@@ -2,6 +2,17 @@
 // Base / Page
 // ==========================================================================
 
+:root {
+
+    // Font sizes
+    --font-size-h1:  #{rem(36px)};
+    --font-size-h2:  #{rem(28px)};
+    --font-size-h3:  #{rem(24px)};
+    --font-size-h4:  #{rem(20px)};
+    --font-size-h5:  #{rem(18px)};
+    --font-size-h6:  #{rem(16px)};
+}
+
 //
 // Simple page-level setup.
 //

assets/styles/main.scss

@@ -31,6 +31,11 @@
 @import "elements/fonts";
 @import "elements/page";
 
+// Typography
+// ==========================================================================
+@import "typography/headings";
+@import "typography/wysiwyg";
+
 // Objects
 // ==========================================================================
 @import "objects/scroll";
@@ -47,7 +52,6 @@
 // Components
 // ==========================================================================
 @import "components/scrollbar";
-@import "components/heading";
 @import "components/button";
 @import "components/form";
 

assets/styles/settings/_config.scss

@@ -21,14 +21,6 @@ $font-size:   16px;
 $line-height: 24px / $font-size;
 $font-family: $font-sans-serif;
 $color:       #222222;
-// Headings
-$font-size-h1:  36px  !default;
-$font-size-h2:  28px  !default;
-$font-size-h3:  24px  !default;
-$font-size-h4:  20px  !default;
-$font-size-h5:  18px  !default;
-$font-size-h6:  16px  !default;
-$line-height-h: $line-height;
 // Weights
 $light:  300;
 $normal: 400;

assets/styles/typography/_headings.scss

@@ -0,0 +1,38 @@
+// ==========================================================================
+// Typography / Headings
+// ==========================================================================
+
+.t-h1,
+.t-h2,
+.t-h3,
+.t-h4,
+.t-h5,
+.t-h6 {
+    --heading-line-height: #{$line-height};
+
+    line-height: var(--heading-line-height);
+}
+
+.t-h1 {
+    font-size: var(--font-size-h1);
+}
+
+.t-h2 {
+    font-size: var(--font-size-h2);
+}
+
+.t-h3 {
+    font-size: var(--font-size-h3);
+}
+
+.t-h4 {
+    font-size: var(--font-size-h4);
+}
+
+.t-h5 {
+    font-size: var(--font-size-h5);
+}
+
+.t-h6 {
+    font-size: var(--font-size-h6);
+}

assets/styles/typography/_wysiwyg.scss

@@ -0,0 +1,55 @@
+// ==========================================================================
+// Typography / Wysiwyg
+// ==========================================================================
+
+.t-wysiwyg {
+
+    p,
+    ul,
+    ol,
+    blockquote {
+        margin-bottom: $line-height * 1em;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 1em 0 0.5em;
+    }
+
+    h1 { @extend .t-h1; }
+    h2 { @extend .t-h2; }
+    h3 { @extend .t-h3; }
+    h4 { @extend .t-h4; }
+    h5 { @extend .t-h5; }
+    h6 { @extend .t-h6; }
+
+    ul,
+    ol {
+        padding-left: 2em;
+    }
+
+    ul {
+        list-style: disc;
+    }
+
+    ol {
+        list-style: decimal;
+    }
+
+    b,
+    strong {
+        font-weight: 700;
+    }
+
+    > *:first-child {
+        margin-top: 0;
+    }
+
+    > *:last-child {
+        margin-bottom: 0;
+    }
+}

www/form.html

@@ -31,7 +31,7 @@
 
                 <main data-scroll-section>
                     <div class="o-container">
-                        <h1 class="c-heading -h1">Page</h1>
+                        <h1 class="t-h1">Page</h1>
 
                         <div class="o-layout">
                             <div class="o-layout_item u-1/2@from-small">

www/images.html

@@ -31,19 +31,19 @@
 
                 <main data-scroll-section>
                     <div class="o-container">
-                        <h1 class="c-heading -h1">Images</h1>
+                        <h1 class="t-h1">Images</h1>
 
                         <section>
-                            <h2 class="c-heading -h2">Lazy load demo</h2>
+                            <h2 class="t-h2">Lazy load demo</h2>
 
-                            <h3 class="c-heading -h3">Basic</h3>
+                            <h3 class="t-h3">Basic</h3>
 
                             <div style="width: 640px; max-width: 100%;">
                                 <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=1" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
                                 <div class="o-ratio u-4:3"><img data-load-src="http://picsum.photos/640/480?v=2" alt="" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></div>
                             </div>
 
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+                            <h4 class="t-h3">Using o-ratio & background-image</h3>
 
                             <div style="width: 480px; max-width: 100%;">
                                 <div class="o-ratio u-16:9" data-load-style="background-size: cover; background-position: center; background-image: url(http://picsum.photos/640/480?v=1);"></div>
@@ -52,9 +52,9 @@
                         </section>
 
                         <section>
-                            <h3 class="c-heading -h3">Relative to scroll</h3>
+                            <h3 class="t-h3">Relative to scroll</h3>
 
-                            <h4 class="c-heading -h3">Using o-ratio & img</h3>
+                            <h4 class="t-h3">Using o-ratio & img</h3>
 
                             <div style="width: 640px; max-width: 100%;">
                                 <div class="o-ratio u-4:3">
@@ -74,7 +74,7 @@
                                 </div>
                             </div>
 
-                            <h4 class="c-heading -h3">Using o-ratio & background-image</h3>
+                            <h4 class="t-h3">Using o-ratio & background-image</h3>
 
                             <div style="width: 480px; max-width: 100%;">
                                 <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=1"></div>
@@ -84,7 +84,7 @@
                                 <div style="background-size: cover; background-position: center;" class="o-ratio u-16:9" data-scroll data-scroll-call="lazyLoad, Scroll, main" data-src="http://picsum.photos/640/480?v=5"></div>
                             </div>
 
-                            <h4 class="c-heading -h3">Using SVG viewport for ratio</h3>
+                            <h4 class="t-h3">Using SVG viewport for ratio</h3>
 
                             <div style="width: 480px; max-width: 100%;">
                                 <img

www/index.html

@@ -50,7 +50,17 @@
 
             <main data-scroll-section>
                 <div class="o-container">
-                    <h1 class="c-heading -h1">Hello</h1>
+                    <h1 class="t-h1">Hello</h1>
+                    <div class="t-wysiwyg">
+                        <h2>Crucifix de charrue de cibouleau.</h2>
+                        <p>Cossin de ciarge de sacristi de calvaire de <strong>bâtard de caltor</strong> de mosus d'étole de boswell de sacrament de sapristi de gériboire de Jésus de plâtre.</p>
+                        <ul>
+                            <li>Viande à chien de saint-cimonaque.</li>
+                            <li>Sacristi de calvince de charogne de saint-ciarge.</li>
+                        </ul>
+                        <h3>Calvaire de gériboire de saintes fesses.</h3>
+                        <p>Viande à chien de boswell de sacristi de patente à gosse de mangeux d'marde de <i>Jésus de plâtre de gériboire de purée de charrue</i> de christie de torrieux de cimonaque de saint-ciarge de bâtard de maudite marde de cochonnerie.</p>
+                    </div>
                 </div>
             </main>