Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tommikaikkonen/type-up
A nifty Compass plugin for quick and precise typesetting without hours of math churning.
https://github.com/tommikaikkonen/type-up
Last synced: 3 months ago
JSON representation
A nifty Compass plugin for quick and precise typesetting without hours of math churning.
- Host: GitHub
- URL: https://github.com/tommikaikkonen/type-up
- Owner: tommikaikkonen
- Created: 2013-02-05T13:29:48.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2013-02-28T08:37:50.000Z (almost 12 years ago)
- Last Synced: 2024-10-10T12:26:00.558Z (3 months ago)
- Language: Ruby
- Homepage: http://tommikaikkonen.github.com/type-up/
- Size: 1.13 MB
- Stars: 53
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Type Up
[See more](http://tommikaikkonen.github.com/type-up/) and read [the docs](http://tommikaikkonen.github.com/type-up/documentation/) on the website.
A nifty Compass plugin for quick and precise typesetting without hours of math churning.
Type Up gives you the CSS rules for beautiful vertical rhythm (line-heights, paddings, margins) based on font size and line length. Customize the details as you please or use the defaults.
## Features
* Line height is based on both font size and line length for optimized readability at all measures
* Everything is in `em`s
* [Modular scale](https://github.com/scottkellum/modular-scale) for heading sizes
* Headings work with half a baseline as needed
## Usage
Get started with the defaults:
```scss
@include typeup-body(
1em, /* font size */
35em /* line length */
1 /* x-height ratio */
);
// Your container element for text
.text-wrapper {
width: 35em;
}
```
## Installation
1. Install the gem with `gem install typeup`
2. Require TypeUp in your config.rb with `require "typeup"`
2. Import TypeUp in your stylesheet with `@import "typeup";`
3. Apply styles to body with `@include typeup-body($fontSize, $lineLength, $xHeight)` or to a container with `@include typeup-container($fontSize, $lineLength, $xHeight)`
4. Cool typesetting, bro!
## Settings
Declare settings before importing typeup!
```scss
$h1LinesBefore: 2;
@import "typeup";
```
or, make a settings file:
```scss
@import "mytypeupsettings";
@import "typeup";
```
## List of Settings
Variable
Default
Description
$fontSize
1em
The size of your font in ems or pixels. Pixels will be converted to ems inside Type Up.
$lineLength
35em
The width of your text, in ems or pixels. Pixels will be converted to ems inside Type Up.
$xHeight
1
Use this to adjust the global line height (for example with fonts with very short or tall x-heights).
$ratio
fourth()
The ratio for modular scale. Can be set as a number, such as 11/10.
$headingLinesBefore
1
Multiplier for heading spacing above it. The value to be multiplied is the calculated line height of the heading.
$headingLinesAfter
0
Multiplier for heading spacing below it. The value to be multiplied is the calculated line height of the heading.
$headingBaselineShift
0em
The amount of baseline shift for all headings.
$h[1-6]LinesBefore
$headingLinesBefore
Multiplier for the specific heading's spacing above. The value to be multiplied is the calculated line height of the heading.
$h[1-6]LinesAfter
$headingLinesAfter
Multiplier for the specific heading's spacing below. The value to be multiplied is the calculated line height of the heading.
$h[1-6]BaselineShift
$headingBaselineShift
The amount of baseline shift for a specific heading level.
$pixelSnapBaseSize: true
true
A boolean deciding whether the fontSize value you give TypeUp is pixel snapped.
$baseFontSize
16px
The browser base font size that TypeUp does its calculations from. You shouldn't have to change this.
$minimumLineHeight
0.7
The minimum line height that TypeUp sets for any element. Unless you're working with some funky typesetting, you don't need to change this.
$doubleStrandedHeadingClasses
false
If set to true, will clone each headings styles into a corresponding .headingN class using @extend.
$startModularScaleAt
4
The modular scale number that is assigned to h1. Next one gets 3, next one gets 2, etc. The modular scale cuts off at 0, so with the default settings h5 and h6 get a modular scale number of 0.
## Mixins
### Body
```scss
@include typeup-body($fontSize, $lineLength, $xHeight);
```
The typeup-body mixin should be included by itself, not under any selector.
### Container
```scss
@include typeup-container($fontSize, $lineLength, $xHeight);
```
The typeup-container mixin should be used when you want the rules to apply only under a specific element. It should be included inside a selector. This mixin also establishes the width of the element with $lineLength.
### Spacer
```scss
@include typeup-spacer(
$size-in-ems,
$before: $headingLinesBefore, // uses default value if not supplied
$after: $headingLinesAfter, // uses default value if not supplied
$baselineShift: $headingBaselineShift, // optional
$overrideSpacingWithBaseline: $overrideSpacingWithBaseline // uses default value if not supplied
);
```
The spacer mixin is used to give vertical rhythm to headings inside TypeUp, but you can use it for other things.
This is how it works:
1. See how many baselines are needed to meet $size-in-ems, in half increments
2. Multiply by the global line height, pixel snap it
3. Multiply that number with `before` to get `margin-top` and `after` to get `margin-bottom`
4. Apply baseline shift if larger than 0 em with `position:relative` and `top`
If `$overrideSpacingWithBaseline` is true (default is false), the `before` and `after` values are multiplied by the global line height instead of the calculated one.
You could use the mixin to make simple paragraphs: `@include typeup-spacer($fontSize, 0, 1, 0, false);` which would apply a line-height and some margin to the bottom. Or any other element where you have a differing font size - line height will be adjusted correctly.
## Limitations
* Not tested on older browsers
## Author
Type Up is created by [Tommi Kaikkonen](http://www.kaikkonendesign.fi).
## License
Copyright 2013 Tommi Kaikkonen. Released under MIT License.