cssrecipes-vertical-rhythm
Advanced tools
Flexible CSS vertical rhythm
$ npm install cssrecipes-vertical-rhythm
Import index.css (or just files you want) & don't forget import a ratio as well.
(Right now, the only ratio available is minor third, feel free to add more with a PR).
@import "./node_modules/cssrecipes-vertical-rhythm/index.css";
@import "./node_modules/cssrecipes-vertical-rhythm/lib/ratio/minor-third.css";
Then use .r-VerticalRhythm on your <html> (or anywhere you want)
<!doctype html>
<html class="r-VerticalRhythm">
/* ... */
</html>
You can obviously override of the lib, but here is only what you should consider
:root {
--r-fontSizeRatio: 1;
--r-fontSizeUnit: 1rem;
/* fontSizeRatio x fontSizeUnit = fontSize) */
--r-lineHeight: calc(var(--r-fontSize) * 1.5625); /* your line height */
--r-capHeight: calc(var(--r-fontSize) * 0.75); /* adjust according to your font */
}
--r-fontSizeRatio--r-fontSizeUnit--r-fontSize--r-lineHeight--r-capHeight--r-gutter-y--r-gutter-x--r-gutter--r-VerticalRhythm-ratio--r-h1-fontSize--r-h1-lines--r-h1-lineHeight--r-h1-baseLineDistance--r-h1-paddingTop--r-h1-marginBottom--r-h2-fontSize--r-h2-lines--r-h2-lineHeight--r-h2-baseLineDistance--r-h2-paddingTop--r-h2-marginBottom--r-h3-fontSize--r-h3-lines--r-h3-lineHeight--r-h3-baseLineDistance--r-h3-paddingTop--r-h3-marginBottom--r-h4-fontSize--r-h4-lines--r-h4-lineHeight--r-h4-baseLineDistance--r-h4-paddingTop--r-h4-marginBottom--r-h5-fontSize--r-h5-lines--r-h5-lineHeight--r-h5-baseLineDistance--r-h5-paddingTop--r-h5-marginBottom--r-h6-fontSize--r-h6-lines--r-h6-lineHeight--r-h6-baseLineDistance--r-h6-paddingTop--r-h6-marginBottom--r-small-fontSizePlease look the source to see what rules are defined before using this lib ;)
Attach the class .r-VerticalRhythm-helper to <html> to get a visual helper (horizontal lines) to make adjustements for existing content.
You can override the following defaults values to change the appearance of the lines
:root {
--r-VerticalRhythm-helper-color: rgba(0, 0, 0, .25);
--r-VerticalRhythm-helper-color--light: color(var(--r-VerticalRhythm-helper-color) alpha(- 33%));
--r-VerticalRhythm-helper-color--lighter: color(var(--r-VerticalRhythm-helper-color) alpha(- 66%));
}
To generate a build:
$ npm run build
To generate the testing build.
$ npm run build-test
Basic visual tests are in test/index.html.
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/cssrecipes/vertical-rhythm.git
$ git checkout -b patch-1
$ npm install
$ npm test
FAQs
Flexible CSS vertical rhythm
We found that cssrecipes-vertical-rhythm demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Ruby Central’s incident report on the RubyGems.org access dispute sparks backlash from former maintainers and renewed debate over project governance.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.