You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP →
typographic
Advanced tools
typographic - npm Package Compare versions
to
0.0.2
@@ -5,3 +5,3 @@ { | ||
| "main": "typographic.js", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "Stylus typography with modular scale, font stacks, and more", | ||
@@ -8,0 +8,0 @@ "keywords": [ |
@@ -7,8 +7,33 @@ typographic | ||
| #### Installation | ||
| `npm install rupture typographic` | ||
| ``` | ||
| npm install -g rupture typographic | ||
| cd ~/Project | ||
| echo "@import 'typographic'" > css/foo.styl | ||
| ``` | ||
| #### Usage | ||
| ``` | ||
| cd ~/Project/css | ||
| stylus -u rupture -u typographic -w foo.styl | ||
| stylus -u rupture -u typographic -w css/foo.styl | ||
| ``` | ||
| #### Settings | ||
| - **`typo_breakpoint ?= 800px`** - Set your mobile-to-desktop breakpoint. | ||
| - **`typo_typo_headers ?= helvetica`** - The font stack for all `<h1>`-`<h6>` elements. You can find a list of these [here](_settings.styl). | ||
| - **`typo_typo_header_color ?= #111`** - Colors for all `<h1>`-`<h6>` elements. | ||
| - **`typo_typo_header_weight ?= 200`** - Font weight for `<h1>`-`<h6>` elements. | ||
| - **`typo_typo_tagline_color ?= #aaa`** - The color of `<p>` elements within a `<header>` element. | ||
| - **`typo_body ?= helvetica`** - `<body>` font stack. You can find a list of these [here](_settings.styl). | ||
| - **`typo_typo_body_color ?= #444`** - `<body>` color. | ||
| - **`typo_mobile ?= major_third`** - The named ratio size for mobile devices. You can use a custom float number as well. You can find a list of these [here](_settings.styl). | ||
| - **`typo_desktop ?= octave`** - The named ratio size for desktop devices. You can use a custom float number as well. You can find a list of these [here](_settings.styl). | ||
| ### Override Settings | ||
| - Create a `settings.styl` file as a sibling to `foo.styl` | ||
| - At the top of `settings.styl` put: | ||
| ``` | ||
| @import 'settings' | ||
| @import 'typographic' | ||
| ``` | ||
| - Modify `settings.styl` to override any of the above settings |
| module.exports = function(opts) { | ||
| var implicit = (opts && opts.implicit == false) ? false : true; | ||
| return function(style){ | ||
| return function(style) { | ||
| style.include(__dirname); | ||
| if (implicit) { style.import('typographic'); } | ||
| } | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
Fixed alerts
Trivial Package
Supply chain riskPackages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
44181
3.26%- Number of lines in readme file
39
178.57%Worsened metrics
- Lines of code
5
-28.57%No dependency changes