🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

typographic

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typographic - npm Package Compare versions

Comparing version

to
0.0.2

2

package.json

@@ -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