RITMO is a fork from Compass vertical-rhythm. It rules the vertical rhythm of the site based on the initial font size, managing the vertical margins, paddings and line-height.
It keeps your site organized and structured on a coherent baseline grid. It uses rem unit by default but it can also use em or px values for measurement.
The only dependency is SASS. We also provide an npm package.
The default font size for all text in pixels
The unit of vertical rhythm.
$base-line-unit * $base-line-multi = base-line-height
(5 * 5 = 25px by default)The multiplication factor used to define the distance between text baselines
The length unit in which to output rhythm values. Supported values: px, em, rem. Percent units can't be used since they make calculating padding and margins impractical, and percentage borders are not valid or supported in css.
Whether to output fallback values in px when using rem as the $ritmo-unit.
Default values for rhythm borders width.
Allows the adjust-font-size-to mixin and the lines-for-font-size function to round the line height to the nearest half line height instead of the nearest integral line height to avoid large spacing between lines.
Ensure there is at least this many pixels of vertical padding above and below the text.
The leader is the amount of whitespace in a line. It might be useful in your calculations.
The half-leader is the amount of whitespace above and below a line. It might be useful in your calculations.
ritmo($lines, $font-size, $offset)Calculate rhythm units.
lines-for-font-size($font-size)Calculate the minimum multiple of rhythm units needed to contain the font-size.
ritmo-baseline($font-size: $base-font-size)Establishes a font baseline for the given font-size. Usefull for initial setting of document font size and also variations on media queries.
Uses the $base-font-size variable as a default.
ritmo-font-size($to-size, $lines: auto, $from-size: $base-font-size)Adjust a block to have a different font size and line height to maintain the rhythm. $lines specifies how many multiples of the baseline rhythm each line of this font should use up. It does not have to be an integer, but it defaults to the smallest integer that is large enough to fit the font. Use $from-size to adjust from a font-size other than the base font-size.
ritmo-leading($lines, $font-size: $base-font-size)Adjust a block to have different line height to maintain the rhythm. $lines specifies how many multiples of the baseline rhythm each line of this font should use up. It does not have to be an integer, but it defaults to the smallest integer that is large enough to fit the font. Use $font-size to adjust from a font-size other than the base font-size.
ritmo($leader: 1, $padding-leader: 0, $padding-trailer: $padding-leader, $trailer: $leader, $font-size: $base-font-size)Shorthand mixin to apply whitespace for top and bottom margins and padding.
ritmo-top($lines: 1, $font-size: $base-font-size, $property: margin)Apply leading whitespace. Defaults to a margin of 1 unit of spacing, using the $base-font-size. The $property can be margin or padding.
ritmo-top-padding($lines: 1, $font-size: $base-font-size)Apply leading whitespace as padding.
ritmo-top-margin($lines: 1, $font-size: $base-font-size)Apply leading whitespace as margin.
ritmo-bottom($lines: 1, $font-size: $base-font-size, $property: margin)Apply trailing whitespace. The $property can be margin or padding.
ritmo-bottom-padding($lines: 1, $font-size: $base-font-size)Apply trailing whitespace as padding.
ritmo-bottom-margin($lines: 1, $font-size: $base-font-size)Apply trailing whitespace as margin.
ritmo-margins($leader: 1, $trailer: $leader, $font-size: $base-font-size)Shorthand mixin to apply whitespace for top and bottom margins.
ritmo-paddings($padding-leader: 1, $padding-trailer: $padding-leader, $font-size: $base-font-size)Shorthand mixin to apply whitespace for top and bottom padding.
ritmo-side-border($side, $width: $ritmo-border-width, $lines: 1, $font-size: $base-font-size)Apply a border and whitespace to any side without destroying the vertical rhythm. The whitespace must be greater than the width of the border.
ritmo-top-border($width: $ritmo-border-width, $lines: 1, $font-size: $base-font-size)Apply a leading border.
ritmo-bottom-border($width: $ritmo-border-width, $lines: 1, $font-size: $base-font-size)Apply a trailing border.
ritmo-horizontal-borders($width: $ritmo-border-width, $lines: 1, $font-size: $base-font-size)Apply both leading and trailing borders.
ritmo-borders($width: $ritmo-border-width, $lines: 1, $font-size: $base-font-size)Apply borders and whitespace equally to all sides.