Last active
February 8, 2018 01:11
-
-
Save TylerBarnes/efa5970d3ae56e4d2af4664fe8f90e7a to your computer and use it in GitHub Desktop.
breakpoint support for typography.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Here is the unminified output | |
| html { | |
| font: 112.5%/1.6 HalisGR, helvetica; | |
| box-sizing: border-box; | |
| overflow-y: scroll | |
| } | |
| * { | |
| box-sizing: inherit | |
| } | |
| *:before { | |
| box-sizing: inherit | |
| } | |
| *:after { | |
| box-sizing: inherit | |
| } | |
| body { | |
| color: hsla(0, 0%, 0%, 0.8); | |
| font-family: 'HalisGR', 'helvetica'; | |
| font-weight: 300; | |
| word-wrap: break-word; | |
| font-kerning: normal; | |
| -moz-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -ms-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| font-feature-settings: "kern", "liga", "clig", "calt" | |
| } | |
| img { | |
| max-width: 100%; | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| h1 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.5rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h2 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.27542rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h3 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.17608rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h4 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h5 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.92211rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h6 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.88547rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| hgroup { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| ul { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| ol { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| dl { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| dd { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| p { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| figure { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| pre { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| table { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 1rem; | |
| line-height: 1.6rem; | |
| border-collapse: collapse; | |
| width: 100% | |
| } | |
| fieldset { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| blockquote { | |
| margin: 0 1.6rem 1.6rem; | |
| padding: 0 | |
| } | |
| form { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| noscript { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| iframe { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| hr { | |
| margin: 0 0 calc(1.6rem - 1px); | |
| padding: 0; | |
| background: hsla(0, 0%, 0%, 0.2); | |
| border: 0; | |
| height: 1px | |
| } | |
| address { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| b { | |
| font-weight: bold | |
| } | |
| strong { | |
| font-weight: bold | |
| } | |
| dt { | |
| font-weight: bold | |
| } | |
| th { | |
| font-weight: bold | |
| } | |
| li { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| ol li { | |
| padding-left: 0 | |
| } | |
| ul li { | |
| padding-left: 0 | |
| } | |
| li>ol { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| li>ul { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| blockquote *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li *:last-child { | |
| margin-bottom: 0 | |
| } | |
| p *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li>p { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| code { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| kbd { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| samp { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| abbr { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| acronym { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| text-decoration: none | |
| } | |
| thead { | |
| text-align: left | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); | |
| font-feature-settings: "tnum"; | |
| -moz-font-feature-settings: "tnum"; | |
| -ms-font-feature-settings: "tnum"; | |
| -webkit-font-feature-settings: "tnum"; | |
| padding: 0.8rem 1.06667rem calc(0.8rem - 1px) | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 0 | |
| } | |
| th:last-child, | |
| td:last-child { | |
| padding-right: 0 | |
| } | |
| @media only screen and (min-width:800px) { | |
| html { | |
| font: 112.5%/1.6 HalisGR, helvetica; | |
| box-sizing: border-box; | |
| overflow-y: scroll | |
| } | |
| * { | |
| box-sizing: inherit | |
| } | |
| *:before { | |
| box-sizing: inherit | |
| } | |
| *:after { | |
| box-sizing: inherit | |
| } | |
| body { | |
| color: hsla(0, 0%, 0%, 0.8); | |
| font-family: 'HalisGR', 'helvetica'; | |
| font-weight: 300; | |
| word-wrap: break-word; | |
| font-kerning: normal; | |
| -moz-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -ms-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| font-feature-settings: "kern", "liga", "clig", "calt" | |
| } | |
| img { | |
| max-width: 100%; | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| h1 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.5rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h2 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.27542rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h3 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.17608rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h4 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h5 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.92211rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h6 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.88547rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| hgroup { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| ul { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| ol { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| dl { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| dd { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| p { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| figure { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| pre { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| table { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 1rem; | |
| line-height: 1.6rem; | |
| border-collapse: collapse; | |
| width: 100% | |
| } | |
| fieldset { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| blockquote { | |
| margin: 0 1.6rem 1.6rem; | |
| padding: 0 | |
| } | |
| form { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| noscript { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| iframe { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| hr { | |
| margin: 0 0 calc(1.6rem - 1px); | |
| padding: 0; | |
| background: hsla(0, 0%, 0%, 0.2); | |
| border: 0; | |
| height: 1px | |
| } | |
| address { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| b { | |
| font-weight: bold | |
| } | |
| strong { | |
| font-weight: bold | |
| } | |
| dt { | |
| font-weight: bold | |
| } | |
| th { | |
| font-weight: bold | |
| } | |
| li { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| ol li { | |
| padding-left: 0 | |
| } | |
| ul li { | |
| padding-left: 0 | |
| } | |
| li>ol { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| li>ul { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| blockquote *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li *:last-child { | |
| margin-bottom: 0 | |
| } | |
| p *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li>p { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| code { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| kbd { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| samp { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| abbr { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| acronym { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| text-decoration: none | |
| } | |
| thead { | |
| text-align: left | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); | |
| font-feature-settings: "tnum"; | |
| -moz-font-feature-settings: "tnum"; | |
| -ms-font-feature-settings: "tnum"; | |
| -webkit-font-feature-settings: "tnum"; | |
| padding: 0.8rem 1.06667rem calc(0.8rem - 1px) | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 0 | |
| } | |
| th:last-child, | |
| td:last-child { | |
| padding-right: 0 | |
| } | |
| } | |
| @media only screen and (min-width:1200px) { | |
| html { | |
| font: 112.5%/1.6 HalisGR, helvetica; | |
| box-sizing: border-box; | |
| overflow-y: scroll | |
| } | |
| * { | |
| box-sizing: inherit | |
| } | |
| *:before { | |
| box-sizing: inherit | |
| } | |
| *:after { | |
| box-sizing: inherit | |
| } | |
| body { | |
| color: hsla(0, 0%, 0%, 0.8); | |
| font-family: 'HalisGR', 'helvetica'; | |
| font-weight: 300; | |
| word-wrap: break-word; | |
| font-kerning: normal; | |
| -moz-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -ms-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; | |
| font-feature-settings: "kern", "liga", "clig", "calt" | |
| } | |
| img { | |
| max-width: 100%; | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| h1 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.5rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h2 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.27542rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h3 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1.17608rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h4 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 1rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h5 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.92211rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| h6 { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| color: inherit; | |
| font: 800 0.88547rem/1.1 'HalisGR', 'helvetica'; | |
| text-rendering: optimizeLegibility | |
| } | |
| hgroup { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| ul { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| ol { | |
| margin: 0 0 1.6rem 1.6rem; | |
| padding: 0; | |
| list-style: outside none | |
| } | |
| dl { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| dd { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| p { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| figure { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| pre { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| table { | |
| margin: 0 0 1.6rem; | |
| padding: 0; | |
| font-size: 1rem; | |
| line-height: 1.6rem; | |
| border-collapse: collapse; | |
| width: 100% | |
| } | |
| fieldset { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| blockquote { | |
| margin: 0 1.6rem 1.6rem; | |
| padding: 0 | |
| } | |
| form { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| noscript { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| iframe { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| hr { | |
| margin: 0 0 calc(1.6rem - 1px); | |
| padding: 0; | |
| background: hsla(0, 0%, 0%, 0.2); | |
| border: 0; | |
| height: 1px | |
| } | |
| address { | |
| margin: 0 0 1.6rem; | |
| padding: 0 | |
| } | |
| b { | |
| font-weight: bold | |
| } | |
| strong { | |
| font-weight: bold | |
| } | |
| dt { | |
| font-weight: bold | |
| } | |
| th { | |
| font-weight: bold | |
| } | |
| li { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| ol li { | |
| padding-left: 0 | |
| } | |
| ul li { | |
| padding-left: 0 | |
| } | |
| li>ol { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| li>ul { | |
| margin-left: 1.6rem; | |
| margin-bottom: calc(1.6rem / 2); | |
| margin-top: calc(1.6rem / 2) | |
| } | |
| blockquote *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li *:last-child { | |
| margin-bottom: 0 | |
| } | |
| p *:last-child { | |
| margin-bottom: 0 | |
| } | |
| li>p { | |
| margin-bottom: calc(1.6rem / 2) | |
| } | |
| code { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| kbd { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| samp { | |
| font-size: 0.85rem; | |
| line-height: 1.6rem | |
| } | |
| abbr { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| acronym { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help | |
| } | |
| abbr[title] { | |
| border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); | |
| cursor: help; | |
| text-decoration: none | |
| } | |
| thead { | |
| text-align: left | |
| } | |
| td, | |
| th { | |
| text-align: left; | |
| border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); | |
| font-feature-settings: "tnum"; | |
| -moz-font-feature-settings: "tnum"; | |
| -ms-font-feature-settings: "tnum"; | |
| -webkit-font-feature-settings: "tnum"; | |
| padding: 0.8rem 1.06667rem calc(0.8rem - 1px) | |
| } | |
| th:first-child, | |
| td:first-child { | |
| padding-left: 0 | |
| } | |
| th:last-child, | |
| td:last-child { | |
| padding-right: 0 | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is done using gulp out of convinience to my build process but it isn't using anything gulp specific. | |
| // It's all js/nodejs | |
| import gulp from "gulp"; | |
| import fs from "fs"; | |
| import Typography from "typography"; | |
| import cssPurge from "css-purge"; | |
| // Helper functions | |
| function update(obj) { | |
| for (var i = 1; i < arguments.length; i++) { | |
| for (var prop in arguments[i]) { | |
| var val = arguments[i][prop]; | |
| if (typeof val == "object") | |
| // this also applies to arrays or null! | |
| update(obj[prop], val); | |
| else obj[prop] = val; | |
| } | |
| } | |
| return obj; | |
| } | |
| function replaceAll(str, mapObj) { | |
| var re = new RegExp(Object.keys(mapObj).join("|"), "gi"); | |
| return str.replace(re, function(matched) { | |
| return mapObj[matched.toLowerCase()]; | |
| }); | |
| } | |
| const typographyjsOptions = { | |
| bodyFontFamily: ["HalisGR", "helvetica"], | |
| headerFontFamily: ["HalisGR", "helvetica"], | |
| bodyWeight: 300, | |
| headerWeight: 800, | |
| baseFontSize: "18px", | |
| baseLineHeight: 1.6, | |
| scaleRatio: 1.5, | |
| includeNormalize: false, | |
| breakpoints: { | |
| "@media only screen and (min-width:800px)": { | |
| // any valid media query. | |
| scaleRatio: 2, // Override the default scale | |
| baseFontSize: "20px" // Change body font size. | |
| }, | |
| "@media only screen and (min-width:1200px)": { | |
| // any valid media query. | |
| scaleRatio: 5, // Override the default scale | |
| baseFontSize: "50px" | |
| } | |
| } | |
| }; | |
| gulp.task("typographyjs", function(cb) { | |
| // add the initial style with no breakpoint | |
| const typeStrings = [new Typography(typographyjsOptions).toString()]; | |
| // take each typography js breakpoint and create a new instance of typographyjs for each and grab the css string | |
| for (const breakPoint in typographyjsOptions.breakpoints) { | |
| const bpOptions = typographyjsOptions.breakpoints[breakPoint]; | |
| if (bpOptions) { | |
| const mergedOptions = update(typographyjsOptions, bpOptions); | |
| const typeString = `${breakPoint} {${new Typography( | |
| mergedOptions | |
| ).toString()}}`; | |
| typeStrings.push(typeString); | |
| } | |
| } | |
| // This string replacement is unrelated to breakpoints. | |
| // I use it to add classes to all heading tags so I can style an h2 like and h1 with class='h1', etc | |
| const replaceMap = { | |
| "h1{": "h1,.h1{", | |
| "h2{": "h2,.h2{", | |
| "h3{": "h3,.h3{", | |
| "h4{": "h4,.h4{", | |
| "h5{": "h5,.h5{", | |
| "h6{": "h6,.h6{" | |
| }; | |
| let typographyWithClasses = replaceAll(typeStrings.join(""), replaceMap); | |
| let finalTypeCss; | |
| // use cssPurge to remove duplicate css. I turned shorten off so the end file will work with scss. | |
| cssPurge.purgeCSS( | |
| typeStrings.join(""), | |
| { | |
| trim: true, | |
| shorten: false, | |
| shorten_zero: false | |
| }, | |
| (error, result) => { | |
| if (error) { | |
| console.log(error); | |
| } else { | |
| finalTypeCss = result; | |
| } | |
| } | |
| ); | |
| // write the end result to an scss file. | |
| fs.writeFile(`./scss/universe/_typographyjs.scss`, finalTypeCss, cb); | |
| }); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment