Base-Base
Vertical rhythm on fonts is no longer (or at least a little less) painful!
base-base is a sass mix-in which stores all your base-line adjustments for fonts so you don't have to re-create them.
Base-Base Documentation generated with sassdoc
p{
// You write this
@include base-base(24px, "Open Sans", 2);
// And get this
margin-top: 0;
padding-bottom: 0;
padding-top: 0.5625rem;
padding-bottom: 1.4375rem;
font-size: 1.5rem;
line-height: 2rem;
font-family: "Open Sans", Helvetica, Arial, Sans-Serif;
}Dependances
None! (aside from Sass)
Configuration Variables
| Variable | Default | Description |
|---|---|---|
| $fallback-font-stack | Helvetica, Arial, Sans-Serif !default | Fallback fonts appenended to font-family in css output |
| $default-font-family | "Open Sans" !default | Font used when no font family specifically given |
| $baseline-height | 16px !default | baseline height used for calculations and debug background |
| $base-font-size | 16px !default | font size to set the root of the document to and to base all calculations on |
| $visual-grid | true !default | toggle the baseline grid on debug elemenets |
| $min-line-height-gap | 1px !default | minimum space between size of font and line-height before adding another baseline |
| $base-base-font-db | () !default | sass map holding all font settings, fonts should be added to this via register-font
|
Adding new fonts
Every partial file in the core/font-settings directory is automattically added to core/font-settings/_all.scss when a sass build is run on the project.
Each font should have its own configuration file within the font-settings directory following the below format.
$font-settings: (
adjust-ratio: (8/72),
manual-adjust: (
12: 1,
// ...
64: 1,
)
);
@include register-font('Open Sans', $font-settings);| Variable | Description |
|---|---|
| adjust-ratio | this is the bases of base-base calculations, this is essentially the top padding needed to be added to the base-base-ratio-el for it to align with the baseline divided by the font-size of base-base-ratio-el
|
| manual-adjust | sass map indexed by font size, with a value how many pixels to adjust the top padding by at this font-size to align with the baseline |