Citrine

A typography library for stylus to make working with vertical rhythm a little bit easier (comes with a nice set of defaults too !).

Installation

npm install citrine

Compilation using the command line

stylus -u citrine -w my_file.styl

Compilation using gulp

gulp        = require 'gulp'
stylus      = require 'gulp-stylus'
citrine     = require 'citrine'

gulp.task 'stylesheets', () ->
  gulp.src './src/my_file.styl'
  .pipe stylus
    use: [citrine()]
  .pipe gulp.dest('./build')

gulp.task 'watch', () ->
  gulp.watch 'src/**/*.styl', ['stylesheets']

gulp.task 'start', ['stylesheets', 'watch']

Usage

@import 'citrine'

// Optional : Define your own settings
citrine-base-font-size = 16
citrine-base-line-height = 1.5
citrine-ratio = major-third

// Optional : Select the packages you want to include
citrine-box-sizing()
citrine-reset()
citrine-presets()

// Optional : Or simply include all of them
citrine()

p
  font-size remify(16) // converts pixel units to rem
  margin-bottom rhythm(1, 16) // add a margin equal to 1 empty line

h1
  font-size remify(ms(4, golden))
  margin-bottom rhythm(1, ms(4, golden))
  margin-left rhythm(1, ms(4, golden))

Available options

citrine-base-font-size : Set the base font-size for rem conversion

citrine-base-line-height : Set the base line-height (you can fine tune it depending on the font you use, the recommended values are between 1.4 and 1.6)

citrine-ratio : Set the modular scale used to calculate the presets, for a complete list, refer to the modular scales section.

citrine-definition-list-style : Definition lists should be inline or indented ? It's indented by default, but you have the ability to change it, just in case.

citrine-blockquote-border-color : Set the border color for quote blocks.

Available mixins

citrine-box-sizing() : Set box-sizing to border-box by default.

citrine-reset() : Include Eric Meyer's reset.

citrine-preset() : A set of defaults to help you out.

citrine() : Include all the above mixins.

ms(number[, ratio]) : x value (up or down) the modular scale (or 0 to get the base font size).

remify(font_size) : Convert the pixel values to rem.

rhythm(number_of_lines, font_size[, correction]) : For use in margin and paddings, it adds empty lines relative to the chosen font-size, with the ability to use a correction in pixels to help you center the elements. (For example if you have a Header with an inset box shadow of 4px, set the correction to 4).

Modular scales ratios

minor-second   = 1.067
major-second   = 1.125
minor-third    = 1.2
major-third    = 1.25
perfect-fourth = 1.333
aug-fourth     = 1.414
perfect-fifth  = 1.5
minor-sixth    = 1.6
golden         = 1.618
major-sixth    = 1.667
minor-seventh  = 1.778
major-seventh  = 1.875
octave         = 2
major-tenth    = 2.5
major-eleventh = 2.667
major-twelfth  = 3
double-octave  = 4

Demo

http://citrine.frostwind.me

Change log

0.0.7

• It is now possible to pass a ratio as an optional parameter to ms().
• Updated README

0.0.6

• Added a new function (ms) to calculate the modular scale.
• Updated README

0.0.5

• Added new presets for definition lists, s and em tags, and block quotes.
• Improved demo.html
• Improved README

0.0.3

BREAKING CHANGE : Using citrine-presets alone while keeping the old behaviour is not possible anymore (box-sizing and reset should be called explicitely now) Please use either citrine() to include all the packages, or refer to the Usage section to see all the available options)

License

The MIT License (MIT)

Copyright (c) 2014 Frostwind [email protected]

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.