Vertical rhythm made easy. Typography how you want it, where you want it.
- Import
lib/_shevy.scss
into your project.
@import 'lib/shevy';
- Define a
$shevy: ();
Sass map, like so:
$shevy: (
base-font-size: 1em,
base-line-height: 1.5,
base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1)
);
- Call the
headings
mixin in your code
@include headings;
-
Marvel at your beautiful typography. Assuming you've put something on the page. You have put something on the page, haven't you?
-
You can also pass a custom map into the
headings
andparagraph
mixin. This should enable you to make custom typography per module or responsive typography per breakpoint.
$shevy: (
base-font-size: 1em,
base-line-height: 1.5,
base-font-scale: (3, 2.5, 2, 1.5, 1.25, 1),
paragraph-scale: false,
margin-bottom: true
);
The base-font-size
key is intended to be the standard font-size for the project. font-scale
multiplies its value against the base-font-size
.
The base-line-height
is the standard line-height. If this is set in pixels, this will be the base-spacing value for Shevy. If it is provided as a factor, such as 1.5
, it will be multiplied by the base-font-size
to generate the base-spacing value.
This is a Sass list of factors to multiply by the base-font-size
to generate the font-sizes for headings and paragraphs (if a paragraph-scale
is not provided).
This is intended for use in setting the size of the paragraph font-size, though by default is set to false. When set to false, Shevy uses the last value passed in the font-scale
list to size the paragraph.
By default, margin bottoms are added to all typography to maintain the vertical rhythm. However, you may wish to remove these. In that case, setting margin-bottom: false
in your map will set the margin-bottom
property to 0
for each element.
Currently, Shevy supports px
, em
, and rem
usage. Additional support for other measurement units may be added in the future.
Here are some features/situations we are hoping to account for in the near future.
- Validation
- Exception mixins — The ability to create font sizes that override the main typographical settings.
- Recall mixins — If you use the
font-size: 0
hack forinline-block
layouts, we would like you to be able to write a simple mixin with a heading or paragraph to output the font-sizes for that. Ex:@include recall(h2)
. - Handle situations with less than 6 font-sizes
- Add functionality for custom line-height-scale, similar to current implementation of font-size scale.
- Dunno yet. What do you want?