https://github.com/maxbeatty/goldentype
compass extension for golden ratio typography
https://github.com/maxbeatty/goldentype
Last synced: 12 months ago
JSON representation
compass extension for golden ratio typography
- Host: GitHub
- URL: https://github.com/maxbeatty/goldentype
- Owner: maxbeatty
- Created: 2012-01-17T01:20:09.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2012-05-27T20:53:10.000Z (about 14 years ago)
- Last Synced: 2025-07-10T10:55:32.814Z (about 1 year ago)
- Language: Ruby
- Size: 166 KB
- Stars: 15
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.mkdn
Awesome Lists containing this project
README
Compass Golden Type
====================
Golden Type applies ["Golden Ratio Typography"](http://www.pearsonified.com/2011/12/golden-ratio-typography.php) outlined by [@pearsonified](https://github.com/pearsonified). This Compass plugin will generate the values [his calculator does](http://www.pearsonified.com/typography/).
**As of Compass [0.12.rc.2 (03/11/2012)](http://compass-style.org/CHANGELOG/), `sqrt` is included in the [Math Helpers](http://compass-style.org/reference/compass/helpers/math/#sqrt) which makes installing this plugin unecessary.**
You can now use the mixins as-is from the [core](https://github.com/maxbeatty/goldentype/blob/master/stylesheets/goldentype/core.sass) and [adjusted](https://github.com/maxbeatty/goldentype/blob/master/stylesheets/goldentype/adjusted.sass) files, but I'm leaving up the documentation for anyone who hasn't or doesn't upgrade to >0.12.rc.2.
##Installation
###From the command line:
(sudo) gem install goldentype
###Add to a project:
1. add to your config.rb
`require 'goldentype'`
2. install via command line
`compass install goldentype`
3. import to sass/scss file
`@import goldentype`
##Available Defaults and Mixins
###Defaults:
####[_golden-typography.sass](https://github.com/maxbeatty/goldentype/blob/master/templates/project/_golden-typography.sass)
@import goldentype
$base-font-size: 16px
$content-width: 550px
.goldentype
+golden-text($base-font-size, $content-width)
.goldentype-adjusted
+golden-text-adjusted($base-font-size, $content-width)
###Mixins:
####Arguments
**$font-size**: Set to 0 if unknown or if you want to calculate based on content width. If no units are given, pixels will be used by default. Defaults to `16px`..
**$line-width**: Can be ommitted if unknown or if you want to calculate based on line height. If no units are given, pixels will be used by default. Defaults to `550px`.
####[Golden Type using Phi](https://github.com/maxbeatty/goldentype/blob/master/stylesheets/goldentype/core.sass)
+golden-text($font-size, $line-width)
####[Adjusted Golden Type](https://github.com/maxbeatty/goldentype/blob/master/stylesheets/goldentype/adjusted.sass)
Uses adjusted ratio as outlined in article.
+golden-text-adjusted($font-size, $line-width)