Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
@shiftbrainstd/harmonic-modular-scale
Advanced tools
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.
npm install @shiftbrainstd/harmonic-modular-scale
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
functionThe get-sizes
function accepts the following arguments:
argument | type | default | description |
---|---|---|---|
$font-size-degree | number | 0 | An integer indicating the font size in the harmonic scale. The returned value will be relative to the base font size. |
$line-height-degree | number | null | The 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
functionThe get-line-height
function accepts the following arguments:
argument | type | default | description |
---|---|---|---|
$font-size-degree | number | 0 | An integer indicating the font size in the harmonic scale. The returned value will be relative to the base font size. |
$line-height-degree | number | null | The increments of line height relative to the minimum height that can contain the current font size. It must be an integer. |
$lines | number | 1 | The number to multiply the line height for. |
$as-line-height | boolean | false | If 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
mixinThe 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.
While the default settings should fit most scenarios, you can customize the module output by setting the following parameters:
parameter | type | default | description |
---|---|---|---|
$scale-factor | number | 8 | the scale factor |
$base-font-size | number | 1rem | base font size (used as the 0 scale value) |
$line-height-unit | number | 0.25rem | the base increment value at which line-height is calculated |
$use-calc | boolean | true | if 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
);
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.
npm start
npm run test
👤 Shiftbrain Standard Design Unit (https://standard.shiftbrain.com/)
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Copyright © 2019 Shiftbrain Standard Design Unit.
This project is MIT licensed.
This README was generated with ❤️ by readme-md-generator
FAQs
Harmonic Modular Scale Typography
The npm package @shiftbrainstd/harmonic-modular-scale receives a total of 0 weekly downloads. As such, @shiftbrainstd/harmonic-modular-scale popularity was classified as not popular.
We found that @shiftbrainstd/harmonic-modular-scale demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.