cssrecipes-vertical-rhythm

v0.6.0

Published

2 years ago

Flexible CSS vertical rhythm

Downloads

0High
0Medium
0Low

moox

style css cssrecipes vertical rhythm grid

Vertical Rhythm

Flexible CSS vertical rhythm

Install

$ npm install cssrecipes-vertical-rhythm

Usage

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>

Defined custom properties

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 */
}

All availables custom props

--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-fontSize

Please look the source to see what rules are defined before using this lib ;)

Helper

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%));
}

Testing

To generate a build:

$ npm run build

To generate the testing build.

$ npm run build-test

Basic visual tests are in test/index.html.

Contributing

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme