Merge pull request #10 from sippy-platform/typography

Typography

mellow-css/.stylelintrc.json

@@ -18,6 +18,7 @@
     "value-no-vendor-prefix": true,
     "scss/at-extend-no-missing-placeholder": null,
     "scss/at-rule-conditional-no-parentheses": null,
+    "scss/dollar-variable-empty-line-before": null,
     "scss/no-global-function-names": null
   }
 }

mellow-css/hugo/assets/sass/main.scss

@@ -1,14 +1,44 @@
 @import "../../../scss/mellow";
 
+.docs-navigation {
+  a {
+    display: inline-flex;
+    text-decoration: none;
+    padding: .25rem .5rem;
+    border-radius: .25rem;
+    color: #666;
+
+    &:hover {
+      background-color: rgba($primary, .1);
+      color: inherit;
+    }
+  }
+}
+
+.docs-content {
+  & > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  & > h3:not(:first-child) {
+    margin-top: 2.5rem;
+  }
+}
+
 .docs-example {
   border: 1px solid #ddd;
   border-radius: .5rem;
+  margin-bottom: 1rem;
 
   .docs-preview {
     padding: 1.5rem;
     margin: 0;
     border-bottom: 1px solid #ddd;
 
+    & > :last-child {
+      margin-bottom: 0;
+    }
+
     .grid {
       border-radius: .5rem;
       background-image: linear-gradient(45deg, rgba($primary, .4) 10%, transparent 0, transparent 50%, rgba($primary, .4) 0, rgba($primary, .4) 60%, transparent 0, transparent);

mellow-css/hugo/content/_index.md

@@ -1,8 +1,8 @@
 ---
+title: Mellow CSS
+description: Get started with Mellow CSS.
 ---
 
-# Mellow CSS
-
 To get started with Mellow CSS, install it through npm.
 
 ```

mellow-css/hugo/content/breakpoints.md

@@ -1,7 +1,8 @@
 ---
+title: Breakpoints
+description: All you need to know about the breakpoints in Mellow.
 ---
 
-# Breakpoints
 Breakpoints determine at which points Mellow changes the behavior of any breakpoint-related class.
 
 | Breakpoint | Suffix | Pixels |

mellow-css/hugo/content/grid.md

@@ -1,10 +1,8 @@
 ---
-layout: single
+title: Grid
+description: The grid allows you to create layouts anyway you want.
 ---
 
-# Grid system
-The grid allows you to create layouts anyway you want.
-
 ## Grid columns
 By default, the grid will create a CSS grid with 1 column. Every element inserted as a child will take on 1 column if no other classes are given.
 

mellow-css/hugo/content/typography.md

@@ -0,0 +1,98 @@
+---
+title: Typography
+description: Get started with the basics of typography for body text, headings, various text decorations, and lists.
+---
+
+## Headings
+All default HTML heading are available.
+
+{{< example >}}
+<h1>Heading 1</h1>
+<h2>Heading 2</h2>
+<h3>Heading 3</h3>
+<h4>Heading 4</h4>
+<h5>Heading 5</h5>
+<h6>Heading 6</h6>
+{{</ example >}}
+
+Additionally, styles are provided to style any text as any of the 6 headings.
+
+{{< example >}}
+<p class="h1">Heading 1</p>
+<p class="h2">Heading 2</p>
+<p class="h3">Heading 3</p>
+<p class="h4">Heading 4</p>
+<p class="h5">Heading 5</p>
+<p class="h6">Heading 6</p>
+{{</ example >}}
+
+## Marketing
+The `.marketing-*`-heading classes are designed as an extension of the default headings. These are great for when you need a more obvious heading. Note that beyond the `font-size`-scaling from the headings, all other custom styling is lost.
+
+{{< example >}}
+<h1 class="marketing-1">Marketing 1</h1>
+<h1 class="marketing-2">Marketing 2</h1>
+<h1 class="marketing-3">Marketing 3</h1>
+<h1 class="marketing-4">Marketing 4</h1>
+<h1 class="marketing-5">Marketing 5</h1>
+<h1 class="marketing-6">Marketing 6</h1>
+{{</ example >}}
+
+## Text decorations
+All of the usual inline styling options are available in Mellow. They are mostly untouched given their accessibility-related purposes.
+
+{{< example >}}
+<p>This may not be important, but <mark>this highlighted section</mark> is.</p>
+<p><del>This text has been deleted.</del></p>
+<p><s>This text is wrong.</s></p>
+<p><ins>This text has been added to the document.</ins></p>
+<p><u>This text is underlined.</u></p>
+<p><small>This text is small, and styles as .small.</small></p>
+<p><strong>This text is rendered in bold.</strong></p>
+<p><b>This text is rendered in bold, but visual only.</b></p>
+<p><em>This text is rendered in italics.</em></p>
+<p><i>This text is rendered in italics, but visual only.</i></p>
+{{</ example >}}
+
+## Small
+The `<small>`-element and `.small`-class share their styling. Using these in any context will reduce the size of the text to 87.5% of its parent.
+
+{{< example >}}
+<h1>Heading 1 <small>Small 1</small></h1>
+<h2>Heading 2 <small>Small 2</small></h2>
+<h3>Heading 3 <small>Small 3</small></h3>
+<h4>Heading 4 <small>Small 4</small></h4>
+<h5>Heading 5 <small>Small 5</small></h5>
+<h6>Heading 6 <small>Small 6</small></h6>
+<p>Paragraph <small>Small paragraph</small></p>
+{{</ example >}}
+
+## Lists
+
+### Unstyles
+Often, you don't want most of a lists default styling. The `list-none`-class makes sure that any list styling is removed.
+
+{{< example >}}
+<ul class="list-none">
+  <li>Hello list.</li>
+  <li>No padding.</li>
+  <li>No dots.</li>
+  <li>And yet
+    <ul>
+      <li>Children do still have list styling.</li>
+      <li>Look at those dots go!</li>
+    </ul>
+  </li>
+</ul>
+{{</ example >}}
+
+### Inline
+Making a horizontal menu? Showing your list in a row is a useful first step. The `list-inline`-classes help you with that.
+
+{{< example >}}
+<ul class="list-inline">
+  <li>Hello list</li>
+  <li>In-a-line</li>
+  <li>No dots either</li>
+</ul>
+{{</ example >}}

mellow-css/hugo/content/vivify.md

@@ -1,8 +1,8 @@
 ---
+title: Vivify
+description: The CSS reset used by Mellow is a simple and clean fresh start for all browsers to build amazing designs.
 ---
 
-# Vivify
-
 `vivify` is Mellow's CSS reset. It takes care of a number of important inconsistencies with the goal to provide a usable default environment for unstyled HTML.
 
 Beyond the margin and padding reset you expect from any CSS reset, Vivify does the following too:

mellow-css/hugo/layouts/_default/baseof.html

@@ -11,7 +11,9 @@
         <div class="col-12 col-md-4 col-lg-2">
           {{ partialCached "navigation" . }}
         </div>
-        <div class="col-12 col-md-8 col-lg-10">
+        <div class="col-12 col-md-8 col-lg-10 docs-content">
+          <h1>{{ .Title }}</h1>
+          <p class="lead">{{ .Description }}</p>
           {{ .Content }}
         </div>
       </div>

mellow-css/hugo/layouts/_default/home.html

@@ -11,7 +11,9 @@
         <div class="col-12 col-md-4 col-lg-2">
           {{ partialCached "navigation" . }}
         </div>
-        <div class="col-12 col-md-8 col-lg-10">
+        <div class="col-12 col-md-8 col-lg-10 docs-content">
+          <h1>{{ .Title }}</h1>
+          <p class="lead">{{ .Description }}</p>
           {{ .Content }}
         </div>
       </div>

mellow-css/hugo/layouts/_default/list.html

@@ -11,7 +11,9 @@
         <div class="col-12 col-md-4 col-lg-2">
           {{ partialCached "navigation" . }}
         </div>
-        <div class="col-12 col-md-8 col-lg-10">
+        <div class="col-12 col-md-8 col-lg-10 docs-content">
+          <h1>{{ .Title }}</h1>
+          <p class="lead">{{ .Description }}</p>
           {{ .Content }}
         </div>
       </div>

mellow-css/hugo/layouts/_default/single.html

@@ -11,7 +11,9 @@
         <div class="col-12 col-md-4 col-lg-2">
           {{ partialCached "navigation" . }}
         </div>
-        <div class="col-12 col-md-8 col-lg-10">
+        <div class="col-12 col-md-8 col-lg-10 docs-content">
+          <h1>{{ .Title }}</h1>
+          <p class="lead">{{ .Description }}</p>
           {{ .Content }}
         </div>
       </div>

mellow-css/hugo/layouts/partials/navigation.html

@@ -1,10 +1,16 @@
-<h3>Get started</h3>
-<ul>
-  <li><a href="/">Installation</a></li>
-  <li><a href="/vivify">Vivify</a></li>
-</ul>
-<h3>Grid</h3>
-<ul>
-  <li><a href="/breakpoints">Breakpoints</a></li>
-  <li><a href="/grid">Grid</a></li>
-</ul>
+<aside class="docs-navigation">
+  <p class="h5">Get started</p>
+  <ul class="list-none">
+    <li><a href="/">Installation</a></li>
+    <li><a href="/vivify">Vivify</a></li>
+  </ul>
+  <p class="h5">Basics</p>
+  <ul class="list-none">
+    <li><a href="/typography">Typography</a></li>
+  </ul>
+  <p class="h5">Grid</p>
+  <ul class="list-none">
+    <li><a href="/breakpoints">Breakpoints</a></li>
+    <li><a href="/grid">Grid</a></li>
+  </ul>
+</aside>

mellow-css/scss/_typography.scss

@@ -0,0 +1,67 @@
+// Heading, and heading classes
+@each $heading, $font-size in $font-sizes-heading {
+  #{$heading} {
+    font-size: $font-size;
+  }
+}
+
+.h1 {
+  @extend h1;
+}
+
+.h2 {
+  @extend h2;
+}
+
+.h3 {
+  @extend h3;
+}
+
+.h4 {
+  @extend h4;
+}
+
+.h5 {
+  @extend h5;
+}
+
+.h6 {
+  @extend h6;
+}
+
+// Text
+.lead {
+  font-size: $font-size-base * 1.5;
+  font-weight: 600;
+}
+
+small,
+.small {
+  font-size: $font-size-small;
+}
+
+// Marketing classes
+@each $marketing, $font-size in $font-sizes-marketing {
+  .marketing-#{$marketing} {
+    font-size: $font-size;
+    font-weight: 500;
+  }
+}
+
+// Lists
+.list-none {
+  padding-left: 0;
+  list-style: none;
+}
+
+.list-inline {
+  @extend .list-none;
+
+  & > li {
+    display: inline-block;
+
+    &:not(:last-child) {
+      margin-right: .5rem;
+    }
+  }
+}

mellow-css/scss/_variable.scss

@@ -41,3 +41,25 @@ $gaps: (
   4: $gap * 1.5,
   5: $gap * 3,
 ) !default;
+
+// Fonts and typogrpahy
+$font-size-base: 1rem !default;
+$font-size-small: .875em !default; // Relative to its parent
+
+$font-sizes-heading: (
+  h1: $font-size-base * 2.5,
+  h2: $font-size-base * 2,
+  h3: $font-size-base * 1.75,
+  h4: $font-size-base * 1.5,
+  h5: $font-size-base * 1.25,
+  h6: $font-size-base
+) !default;
+
+$font-sizes-marketing: (
+  1: 5rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem
+) !default;

mellow-css/scss/_vivify.scss

@@ -46,13 +46,14 @@ h4,
 h5,
 h6 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: 1rem;
+  font-weight: 700;
   font-family: $font-family-sans-heading;
 }
 
 p {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: 1rem;
 }
 
 b,

mellow-css/scss/mellow.scss

@@ -10,5 +10,7 @@
 @import "root";
 @import "vivify";
 
+@import "typography";
+
 @import "container";
 @import "grid";