# jigsass-tools-typography > Typographic sass tools Latest version **1.4.0** (published 2016-08-14) · MIT license · 0 weekly downloads ## Install ```sh npm install jigsass-tools-typography pnpm add jigsass-tools-typography yarn add jigsass-tools-typography bun add jigsass-tools-typography ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.0 | | Published | 2016-08-14 | | First published | 2016-03-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | TxHawks | | Maintainers | txhawks | | Keywords | jigsass, sass, scss, css, oocss, atomic css, eyeglass-module | ## Links - npm: https://www.npmjs.com/package/jigsass-tools-typography - Repository: https://github.com/txhawks/jigsass-tools-typography - Homepage: https://github.com/txhawks/jigsass-tools-typography#readme - npm.io page: https://npm.io/package/jigsass-tools-typography ## Dependencies (2) - [jigsass-tools-mq](https://npm.io/package/jigsass-tools-mq.md) ^1.5.2 - [jigsass-tools-maps](https://npm.io/package/jigsass-tools-maps.md) ^1.0.10 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.4.0 (latest) — 2016-08-14 - 1.2.4 — 2016-04-25 - 1.2.3 — 2016-04-22 - 1.2.2 — 2016-04-12 - 1.2.1 — 2016-04-10 - 1.2.0 — 2016-04-08 - 1.1.4 — 2016-04-08 - 1.1.3 — 2016-04-02 - 1.1.2 — 2016-03-19 - 1.1.1 — 2016-03-17 - 1.1.0 — 2016-03-16 - 1.0.0 — 2016-03-13 ## README # JigSass Tools typography [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] > A REM-based typographic system with support for responsive vertical rhythms, > named-sizes and flexible [modular scales](http://www.modularscale.com). > Inspired by [accoutrement-scale](https://github.com/oddbird/accoutrement-scale) ## Installation Using npm: ```sh npm i -S jigsass-tools-typography ``` ## Usage ```scss @import 'path/to/jigsass-tools-typography/scss/index'; ``` `jigsass-tools-typography` is based on a typographic system that sets the `font-size` of the `html` element to a fourth of the desired line-height, which will then serve as the base-unit for establishing and maintaining a vertical rhythm. It then sets the `font-size` of the `body` element to the base font size, and its `line-height` to `4rem`. By default, the base font size is set at `16px`, while the vertical rhythm is at `6px`, giving us a default `line-height` 1.5 times the default `font-size` (`24px`). All sizes can be defined on a per-breakpoint level. `jigsass-tools-typography` depends on [`jigsass-tools-mq`](https://TxHawks.github.io/jigsass-tools-mq) to manage media-queries and breakpoints definitions. A good place to start at, is by defining these two sizes and other the other `jigsass-tools-typography` configuration variables so that they match your project's settings and design: ```scss // Default output unit, where applicable $jigsass-defaule-unit: rem; // Should a pixel fallback be included for rem values $jigsass-rem-px-fallback: false; // User-defined ratios for building modular scales. // Extends the default map $jigsass-ratios: ( some-ratio: 1.273; ); $jigsass-default-ratio: major-second; // Extends the default map of named-sizes. $jigsass-sizes: ( // ** Override defaults ** // // Will be set as the font-size of the `html` element // and used as the basic unit of vertical rhythm. rhythm-unit: ( default: 6px, // In `default` breakpoint. medium: 7px // In `medium` breakpoint. ), // Will be used to set the `font-size` of the `body` element. body: ( default: 16px, // In `default` breakpoint. medium: 18px, // In `medium`breakpoint. ), // The minimum amount of pixels above and below text lines min-line-padding: (default: 2px), // ** Named sizes ** // headline: ( default: body 3 golden, // format: base (named-size or number) [exponent [ratio]] ), ) ``` The sizes are then easily available, converted into the unit of your choice: ```scss @include jigsass-set-baseline; .headline { @include jigsass-font-size(headline, $bps: all, $unit: rem); padding-right: jigsass-get-size(rhythm-unit, $unit: rem); } ``` In depth documentation of `jigsass-tools-typography` features can be found in the `sassdoc` directory, or online at [https://TxHawks.github.io/jigsass-tools-typography](https://TxHawks.github.io/jigsass-tools-typography). ## Documention Documentation of JigSass Tools typography's Sass features is generated by [SassDoc](http://sassdoc.com). Run `gulp serve:sassdoc` to fire up a live server serving the documentation. To generate documentation from annotation in the source code, run `gulp sass:doc`. To disable the generation of sass documentation, create an empty `noSassDoc` file at the root jigsass-tools-typography directory. ## Development It is a best practice for JigSass modules to *not* automatically generate css on `@import`, but rather have to user explicitly enable the generation of specific styles from the module. Contributions in the form of pull-requests, issues, bug reports, etc. are welcome. Please feel free to fork, hack or modify JigSass Tools typography in any way you see fit. #### Writing documentation Good documentation is crucial for scalability and maintainability. When writing your module, please do make sure that both its Sass functionality (functions, mixins, variables and placeholder selectors), as well as the CSS it generates (selectors, concepts, usage exmples, etc.) are well documented. As mentioned above, the Sass is documented using SassDoc ([Documention](http://sassdoc.com/annotations/)). #### Running tests `gulp lint` will, well, lint the contents scss files in the `scss` directory. `gulp test` with run module's test using Mocha and Sassaby. `gulp tdd` will watch both the Sass files and the test specs for changes, and will run tests automatically upon them. #### Writing tests JigSass Tools typography tests are written using [Sassaby](https://github.com/ryanbahniuk/sassaby) and Mocha. Spec files are located in the `test` directory. Mocha allows us to place a call to `before()` in the root of any test file and it will be run once, before all the other tests in every `test_*.js` file. We can also `require()` files and assign them to the global object to make them available to all `test_*.js` files. jigsass-tools-typography uses a file called `helper.js` can be used to set up mocha globals requires and `before()`. In addition to Sassaby's testing functions, jigsass-tools-typography makes a few Sass functions available to the test suite, for use inside Sassaby tests:
jig-var-equals($value, $var) -> {boolean}
Check if a variable equals a value.
$value {*}: A value to compare the value of $var to.
$var {*}: The variable to test
jig-var-type-is($type, $var) -> {boolean}
Check if a variable is of a certain type.
$type {string}: A type to compare with the type of $var.
$var {*}: The variable to test
jig-map-key-equals($value, $map, $keys...) -> {boolean}
Check if a map's key is assigned a cerain value.
$value {*}: A value to compare the value of a key in $map with.
$map {map}: The map to test.
$keys... {arglist}: A recursive chain of keys.
jig-map-key-type-is($type, $map, keys...) -> {boolean}
Check if a map's key is of a certain type
$type {string}: A type to compare with the type of $var.
$map {map}: The map to test.
$keys... {arglist}: A recursive chain of keys.
## File structure ```bash ┬ ./ │ ├─┬ scss/ │ └─ index.scss # The module's importable file. │ ├── sassdoc/ # Generated documentation │ # of the module's sass features │ └─┬─ test/ │ ├─┬ helpers/ │ │ │ ├── importer.scss # Used for easilty importing tested scss files │ │ │ └── _test_helpers.scss # JigSass's assertion helpers, │ # for use inside Sassaby tests. │ ├── helper.js # Used for defining global `before()` │ # functions and requiring modules. │ └── test_jigsass-tools-typography # Specs. Mocha will automatically # run all javascript files located # in the `test` directory. ``` **License:** MIT [npm-image]: https://badge.fury.io/js/jigsass-tools-typography.svg [npm-url]: https://npmjs.org/package/jigsass-tools-typography [travis-image]: https://travis-ci.org/TxHawks/jigsass-tools-typography.svg?branch=master [travis-url]: https://travis-ci.org/TxHawks/jigsass-tools-typography [daviddm-image]: https://david-dm.org/TxHawks/jigsass-tools-typography.svg?theme=shields.io [daviddm-url]: https://david-dm.org/TxHawks/jigsass-tools-typography --- _Source: https://npm.io/package/jigsass-tools-typography · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._