Release v2.0.0

Squashed commit of the following: commit 8736da0 Author: Francesco Improta <[email protected]> Date: Thu Apr 1 14:34:47 2021 +0200 Updated README commit 29ddc34 Author: Francesco Improta <[email protected]> Date: Thu Apr 1 12:19:55 2021 +0200 Added What Is to readme commit fd074e5 Author: Francesco Improta <[email protected]> Date: Tue Mar 30 15:11:20 2021 +0200 Changed README commit ab4900d Author: Francesco Improta <[email protected]> Date: Tue Mar 30 15:11:15 2021 +0200 Bumped version commit 153a78f Author: Francesco Improta <[email protected]> Date: Tue Mar 30 15:11:07 2021 +0200 Breakpoint is a parameter commit 5f74a8d Author: Francesco Improta <[email protected]> Date: Tue Mar 30 12:14:59 2021 +0200 Simplified library inclusion commit 92b2389 Author: Francesco Improta <[email protected]> Date: Mon Mar 29 16:08:04 2021 +0200 Added $rhythm variable commit b03ae2a Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:06:55 2021 +0100 Added demo page commit dbd34ce Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:06:51 2021 +0100 Added more info commit f04e049 Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:06:44 2021 +0100 Renamed base font size commit 0032381 Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:06:30 2021 +0100 Added ratio and bp option to mixin commit 5017683 Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:05:58 2021 +0100 Using Custom Properties for vertical rhythm commit c885b10 Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:05:39 2021 +0100 New default files commit 7b97fab Author: Francesco Improta <[email protected]> Date: Thu Mar 25 17:05:08 2021 +0100 Packages update
zetareticoli · Apr 1, 2021 · dd4e8d2 · dd4e8d2
1 parent f6bc679
commit dd4e8d2
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -1,37 +1,100 @@
 ![typesmith cover](cover.png)
 
 # typesmith
-Responsive typography system
 
 ![npm Version](https://img.shields.io/npm/v/typesmith-lib?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/zetareticoli/typesmith?style=flat-square) ![npm Downloads](https://img.shields.io/npm/dt/typesmith-lib?logo=npm&style=flat-square)
 
+## What is typesmith
+
+Typesmith is a **typography library designed for the responsive web**. It provides **a set of type sizes** defined in `px` to better align with your design tools (Figma, Sketc, etc.). 
+
+The **type sizes names** come from traditional English speaking world:
+- Canon *32/36* 
+- Double Pica *28/32*
+- Paragon *26/28*
+- Columbian *24*
+- Primer *20*
+- English *18*
+- Pica *16*
+- Brevier *14*
+- Minion *12*
+
+It uses a custom **Type Scale** starting from the Major Second scale (1.125) rounding up numbers to work well with a 4px baseline. Canon, Double Pica and Paragon have responsive sizes only. This is because only the first three sizes used for headlines need to change.
+
 ## Installation
 
-### Install via NPM
+Install via NPM
 
 ```bash
-npm install --save typesmith-lib`
+npm i --save typesmith-lib`
 ```
 
+Import Typesmith in your project:
+
 ```scss
-// your-project/style.scss
-@import 'node_modules/mq/mq';
-@import 'node_modules/typesmith/typesmith';
+// style.scss
+@import 'node_modules/typesmith-lib/_typesmith-lib';
+
 ```
+## Usage
+
+You can use typesmith in two different ways:
+
+1. Using `@type-size` mixin in a selector:
+
+    ```scss
+      .foo {
+        @mixin type-size(canon, medium, ratio)
+      }
+    ```
+
+2. Use default typesmith classes in HTML:
+
+    ```html
+    <h1 class="type-canon">This is a Headline</h1>
+    ```
+## Customizations
+### 1. Vertical Rhythm
 
-### Install manually
+There are two option for vertical rhythm:
 
-#### Using @import
-Download the _typesmith.scss file and move it in your sass/scss folder. You need a Sass @import to include it in your project.
+- baseline - 4px
+- ratio - 1.25
+
+You can customize the vertical rhythm **setting your own custom properties**:
+
+```css
+
+@import '_typesmith.scss'
+
+:root {
+  --baseline: foo; /* Use size values in px or rem */
+  --ratio: bar; /* Use a number value, like 1 or 1.5 */
+}
+```
+### 2. Breakpoints
+You can control the media-query for three type sizes: Canon, Double Pica, Paragon.
+
+Set the `$bp` variable before the `@import` statement like following:
+
+```scss
+// Accepted values: small, medium , large, xlarge
+
+$bp: large;
+
+@import '../_typesmith-lib.scss';
+```
 
-#### Add CSS file
-Download the file located in /dist/ folder choosing between default or minified version. Include in your project as normal CSS file.
+See [typesmit.scss](src/typesmith.scss) file as example.
 
+Breakpoints values are defined in [mq](/node_modules/sass-mq-lib/_mq.scss).
 
 ## Dependencies
 I order to use the libary you will need following tools:
 - [mq](https://github.com/zetareticoli/mq)
 
+## Author
+[Francesco Improta](https://www.francescoimprota.com)
 
 ## License
 MIT License

diff --git a/_typesmith.scss → _typesmith-lib.scss b/_typesmith.scss → _typesmith-lib.scss
diff --git a/dist/typesmith.css b/dist/typesmith.css
@@ -1,57 +1,67 @@
-.canon {
+:root {
+  --baseline: 4px;
+  --ratio: 1.25;
+}
+
+.type-canon {
   font-size: 2rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
 @media screen and (min-width: 740px) {
-  .canon {
+  .type-canon {
     font-size: 2.25rem;
   }
 }
 
-.doublepica {
+.type-doublepica {
   font-size: 1.75rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
 @media screen and (min-width: 740px) {
-  .doublepica {
+  .type-doublepica {
     font-size: 2rem;
   }
 }
 
-.paragon {
+.type-paragon {
   font-size: 1.625rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
 @media screen and (min-width: 740px) {
-  .paragon {
+  .type-paragon {
     font-size: 1.75rem;
   }
 }
 
-.columbian {
+.type-columbian {
   font-size: 1.5rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
-.primer {
+.type-primer {
   font-size: 1.25rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
+}
+
+.type-english {
+  font-size: 1.125rem;
+  line-height: calc(1em + var(--baseline));
 }
 
-.pica {
+.type-pica {
   font-size: 1rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
-.brevier {
+.type-brevier {
   font-size: 0.875rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
 
-.minion {
+.type-minion {
   font-size: 0.75rem;
-  line-height: calc(1em + 4px);
+  line-height: calc(1em + var(--baseline));
 }
diff --git a/dist/typesmith.min.css b/dist/typesmith.min.css
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+
+  <link rel="stylesheet" href="dist/typesmith.css">
+</head>
+<body>
+
+  <h1 class="type-canon">Heading title (Canon)</h1>
+
+  <h2 class="type-doublepica">Heading title (Double Pica)</h2>
+
+  <h3 class="type-paragon">Heading title (Paragon)</h3>
+
+  <h4 class="type-columbian">Heading title (Columbian)</h4>
+
+  <h5 class="type-primer">Heading title (Primer)</h5>
+
+  <h5 class="type-english">Heading title (English)</h5>
+
+</body>
+</html>
diff --git a/lib/_settings.scss b/lib/_settings.scss
@@ -5,10 +5,18 @@
 // Global settings
 //
 
-$baseline: 4px;
-$base: 16px;
-$bodycopy: 18px;
+// Base font-size serves @rem function for px to rem calculation
 
+$base-font-size: 16px;
+
+// Default options for Vertical Rhythm
+// Change these default in your project by overriding it in your settings
+
+:root {
+  --baseline: 4px;
+  --ratio: 1.25;
+}
+
 //
 // Types map
 //
@@ -17,31 +25,31 @@ $types: (
   'canon': (
     'base': 36px,
     'small': 32px
-    ),
+  ),
   'doublepica': (
     'base': 32px,
     'small': 28px
-    ),
+  ),
   'paragon': (
     'base': 28px,
     'small': 26px
-    ),
+  ),
   'columbian': (
     'base': 24px
-    ),
+  ),
   'primer': (
     'base': 20px
-    ),
+  ),
   'english': (
     'base': 18px
   ),
   'pica': (
     'base': 16px
-    ),
+  ),
   'brevier': (
     'base': 14px
-    ),
+  ),
   'minion': (
     'base': 12px
-    )
+  )
 );
diff --git a/lib/_tools.scss b/lib/_tools.scss
@@ -1,40 +1,49 @@
 // TYPESMITH TOOLS
 // @author Francesco Improta
 
-// Px to Rem
-// Convert any size expressed in 'px' to 'rem'
+/// Px to Rem
+/// Convert any size expressed in 'px' to 'rem'
+
 @function rem($value) {
-  $rem-value: $value / $base;
+  $rem-value: $value / $base-font-size;
   @return #{$rem-value}rem;
 }
 
-// Return type value from types map, specifying what $size you need
+/// Return type value from types map, specifying what $size you need
+
 @function type-size($type, $size) {
   @return map-get(map-get($types, $type), $size);
 }
 
-// Resposive type size based on type map values - media query is defined in it, not editable
-@mixin type-size($type) {
+/// Resposive type size based on type map values - media query is defined in it, not editable
+/// @param {String} $rhythm - The vertical rhythm condition - Must be 'baseline' or 'ratio'
+
+@mixin type-size($type, $bp: medium, $rhythm: 'ratio') {
   $size-small-px: type-size($type, small);
   $size-base-px: type-size($type, base);
-
   @if map-has-key(map-get($types, $type), small) {
     font-size: rem($size-small-px);
-
-    @include bp(md) {
+    @include bp($bp) {
       font-size: rem($size-base-px);
     }
   } @else {
     font-size: rem($size-base-px);
   }
-
-  line-height: calc(1em + #{$baseline});
+  @if $rhythm != 'ratio' {
+    line-height: calc(1em + var(--baseline));
+  } @else {
+    line-height: calc(1em * var(--ratio));
+  }
 }
 
-// Loop throught types map printing classnames based on type names
-// Remove // to enable classes
-// @each $type, $sizes in $types {
-//   .#{$type} {
-//     @include type-size($type)
-//   }
-// }
+/// Loop throught types map printing classnames based on type names to enable classes
+///
+/// @param {String} $rhythm - The vertical rhythm condition - Must be 'baseline' or 'ratio'
+
+@if $typesmith-classes == true {
+  @each $type, $sizes in $types {
+    .type-#{$type} {
+      @include type-size($type, $bp, $rhythm)
+    }
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "typesmith-lib",
-  "version": "1.1.3",
-  "description": "Responsive Typography Library",
+  "version": "2.0.0",
+  "description": "Responsive Typgography Lystem",
   "main": "_typesmith.scss",
   "directories": {
     "lib": "lib"