https://github.com/oddbird/accoutrement-scale

Size and scale helpers for typography and layout
https://github.com/oddbird/accoutrement-scale

Last synced: 8 days ago
JSON representation

Size and scale helpers for typography and layout

• Host: GitHub
• URL: https://github.com/oddbird/accoutrement-scale
• Owner: oddbird
• License: mit
• Created: 2014-10-30T07:12:12.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2018-04-04T16:05:18.000Z (over 6 years ago)
• Last Synced: 2024-10-29T18:48:44.283Z (16 days ago)
• Language: CSS
• Homepage:
• Size: 1.05 MB
• Stars: 9
• Watchers: 6
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
accoutrement-scale

==================

Sass size & scale management tools

by [OddBird][oddbird].

Gather all your sizes into a single map,

generate new sizes based on [modular scales][ms]

or arbitrary functions,

and access them by name.

[oddbird]: http://oddbird.net/

[ms]: http://www.modularscale.com/

More Accoutrement Tools

-----------------------

- [Init](http://oddbird.net/accoutrement-init/)

  provides light-weight browser-normalization.

- [Color](http://oddbird.net/accoutrement-color/)

  provides color-palette management and contrast-ratio utilities.

- [Type](http://oddbird.net/accoutrement-type/)

  provides webfont management tools,

  and other typography helpers.

- [Layout](http://oddbird.net/accoutrement-layout/)

  provides layout utilities such as

  box-sizing, intrinsic ratios, z-index management,

  named media-queries, and a clearfix.

Quick Start

-----------

Install the package with npm or yarn:

```bash

npm install accoutrement-scale

yarn add accoutrement-scale

```

Import the library:

```scss

@import '/accoutrement-scale/sass/scale';

```

Establish your palette of ratios (modular scales) and sizes:

```scss

$ratios: (

  'my-ratio': 1.25,

);

$sizes: (

  // define explicit values

  'root': 24px,

  'icons': 1em,

  'page': 8in,

  // reference existing sizes

  'text': 'root'

  // apply adjustments and conversions

  // using named-ratios or arbitrary functions

  'rhythm': 'root' ('fifth': 1, 'convert-units': 'rem'),

  'h1': 'root' ('my-ratio': 3),

  'h2': 'root' ('my-ratio': 2),

  'h3': 'root' ('my-ratio': 1),

  // define calc() output based on existing sizes

  'viewport-relative': calc(%s + %s) ('root', 2vw),

);

```

Access your named sizes using the `size()` function,

and even convert-units on-the-fly:

```scss

.example {

  font-size('text');

  width: size('page', 'px');

}

```

We can only calculate integer steps along an exponential modular scale,

but if you want more power,

install [MathSass][mathsass],

and we'll let them do the hard math.

```scss

$sizes: (

  'complex': 'root' ('my-scale': 1.25),

);

```

[mathsass]: https://github.com/terkel/mathsass