New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@shiftbrainstd/harmonic-modular-scale

Package Overview
Dependencies
Maintainers
3
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@shiftbrainstd/harmonic-modular-scale

Harmonic Modular Scale Typography

  • 1.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
decreased by-85.71%
Maintainers
3
Weekly downloads
 
Created
Source

Harmonic Modular Scale

Version Documentation Maintenance

Harmonic Modular Scale Typography

A Sass module to manage your project’s typographic scale using a harmonic progression.

See the explanatory article for details (Japanese).

This documentation refers to the Sass APIs. To use the library with JavaScript read the documentation here.

Install

npm install @shiftbrainstd/harmonic-modular-scale

Usage

Import the module in your Sass file:

@use "@shiftbrainstd/harmonic-modular-scale" as hms;

This module exposes a main function and a mixin:

  • get-sizes: a function returning a list containing a font-size and an optional line-height.
  • sizes: a mixin outputting a font-size and line-height. Uses get-sizes internally.

get-sizes function

The get-sizes function accepts the following arguments:

argumenttypedefaultdescription
$font-size-degreenumber0An integer indicating the font size in the harmonic scale. The returned value will be relative to the base font size.
$line-height-degreenumbernullThe increments of line height relative to the minimum height that can contain the current font size. It must be an integer.

It will return a list containing the calculated font-size and line-height values.

Example:

$sizes: hms.get-sizes(3, 2);
// $sizes == (calc(1rem * 8 / 5), calc(1em * 45 / 32))

If the first argument passed to the function is a list, its first and second elements will be used as the $font-size-degree and $line-height-degree argument.

$list: (3, 2)
$sizes: hms.get-sizes($list);

// equivalent to hms.get-sizes(3, 2);

Note: when $line-height-degree is null the returned list will contain only the font-size value.

get-line-height function

The get-line-height function accepts the following arguments:

argumenttypedefaultdescription
$font-size-degreenumber0An integer indicating the font size in the harmonic scale. The returned value will be relative to the base font size.
$line-height-degreenumbernullThe increments of line height relative to the minimum height that can contain the current font size. It must be an integer.
$linesnumber1The number to multiply the line height for.
$as-line-heightbooleanfalseIf true, returns the value relative to the current font-size. If false, returns the value relative to the root font size.

It will returns line-hieght value related to the $base-font-size. It is helpful when you need to set sizes based on typographic scale.

Input:

.my-selector {
  margin-top: hms.get-line-height(0, 3, 2);
  margin-bottom: hms.get-line-height(0, 3);
}

Output:

.my-selector {
  margin-top: calc(1rem * 56 / 32 * 2);
  margin-bottom: calc(1rem * 56 / 32);
}

sizes mixin

The sizes mixin accepts the same arguments as get-sizes and outputs font-size and line-height rules.

Input:

.my-selector {
  @include hms.sizes(3, 2);
}

Output:

.my-selector {
  font-size: calc(1rem * 8 / 5);
  line-height: calc(1em * 45 / 32);
}

Note: when $line-height-degree is null the mixin outputs only the font-size rule.

Setup

While the default settings should fit most scenarios, you can customize the module output by setting the following parameters:

parametertypedefaultdescription
$scale-factornumber8the scale factor
$base-font-sizenumber1rembase font size (used as the 0 scale value)
$line-height-unitnumber0.25remthe base increment value at which line-height is calculated
$use-calcbooleantrueif true returns a CSS calc expression

Example:

@use 'harmonic-modular-scale' as hms with (
  $use-calc: false, // output rem values
  $base-font-size: 1.25rem // set 20px as the base font-size
);

Integration with polyrhythm-typography

You can use the get-sizes function as the polyrhythm-typography’s type scaler:

// main.scss
@use "sass:meta";
@use "@shiftbrainstd/harmonic-modular-scale";

@use "@shiftbrainstd/polyrhythm-typography" as pt with (
  $type-scaler: meta.get-function("get-sizes", $module: "harmonic-modular-scale")
);

See the polyrhythm-typography documentation for more details.

Run demo

npm start

Run tests

npm run test

Author

👤 Shiftbrain Standard Design Unit (https://standard.shiftbrain.com/)

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

📝 License

Copyright © 2019 Shiftbrain Standard Design Unit.
This project is MIT licensed.


This README was generated with ❤️ by readme-md-generator

FAQs

Package last updated on 19 Dec 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc