Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ianrose/typesettings

A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
https://github.com/ianrose/typesettings

baseline sass scale scss stylus typography vertical-rhythm

Last synced: 11 days ago
JSON representation

A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.

Awesome Lists containing this project

README 

        
[![npm](https://img.shields.io/npm/dt/typesettings.svg)]() [![GitHub release](https://img.shields.io/github/release/ianrose/typesettings.svg)]() [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ianrose/typesettings/master/LICENSE) [![Gitter](https://badges.gitter.im/ianrose/typesettings.svg)](https://gitter.im/ianrose/typesettings?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)



Typesettings

============



Set your type in Ems with modular scale, vertical rhythm, and responsive ratio based headlines using Sass. **Why create another type toolkit in Sass?** I wanted to and I couldn't find exactly what I was looking for. Typesettings uses techniques from many different amazing tools while trying to keep it simple.



 * Its only dependency is Sass

 * It uses Ems not REMs or pixels

 * Handles all the math for Ems including the compounding

 * It maintains vertical rhythm with pixel based borders using padding set in Ems

 * It comes with a default 6px baseline to maintain rhythm on all block elements

 * It relies more on using Sass functions combined with vanilla CSS rules rather than mixins to style

 * It uses modular scale values to set font-size

 * It has optional default type styles that includes settings for adjusting headlines based on screen width



## How to setup



There are four ways you can download Typesettings.



* [Download the latest release](https://github.com/ianrose/typesettings/releases/latest)

* Clone the repo: `git clone https://github.com/ianrose/typesettings.git`

* Install with [Bower](http://bower.io/): `bower install typesettings --save`

* Install with [npm](https://www.npmjs.com): `npm install typesettings --save`

  * Check out [Eyeglass](https://github.com/sass-eyeglass/eyeglass)



To start using Typesettings `@import` the `_typesettings.scss` partial into your Sass project after your CSS reset.



There is also the bundled single file versions. For example, using Typesettings on [Codepen](https://codepen.io/ianrose/pen/wDids) or you are looking to simply copy and paste Typesettings into your project. You can also start by `@import` the `_typsettings.bundle.scss` into your Sass project after your CSS reset.



```scss

 @import "path/your-reset";



 // Your settings for Typesettings :)

 $font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

 $font-serif: Georgia, 'Times New Roman', serif;

 $font-mono: 'Lucida Console', Monaco, monospace;

 $text-color: #000;

 $base-vertical-unit: 6px;

 $base-line-multi: 4;

 $base-font-size: 16px;

 $ms-ratio: 1.414;

 $paragraph-indent: true;

 $paragraph-justify: true;

 $load-typesetted: true;

 $global-init: false; // By default set to false, loaded with typesetted



 @import "path/typesettings"; // Here is the _typesettings.scss partial



 @import "path/your-styles";

```



### Advanced Usage



You have the ability to easily import Typesettings' mixins, functions, and internal variables separately and use them how you see fit within your project. For example:



```scss

 @import "path/your-reset";



 // Your settings for Typesettings :)

 $font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

 $font-serif: Georgia, 'Times New Roman', serif;

 $font-mono: 'Lucida Console', Monaco, monospace;

 $text-color: #000;

 $base-vertical-unit: 6px;

 $base-line-multi: 4;

 $base-font-size: 16px;

 $ms-ratio: 1.414;



 // Import only the functionality of Typesettings you want

 @import "path/typesettings/settings";

 @import "path/typesettings/internal";

 @import "path/typesettings/functions";

 @import "path/typesettings/mixins";



 @include typesettingsInit();



 @import "path/your-styles";

```



## How to use



After Typesettings is setup in your project the default type styles should be looking good. However I bet you want to use modular scale and vertical rhythm in the rest of your project. Here is an example of how to do that:



The Scss:



```scss

// This example is using Typesettings' default settings

// [1] 3 times the baseline grid value for margin-bottom.

// The second argument is the context font-size. In this case it is 1 step down in

// the modular scale.

//

// [2] Using an optional mixin, a 2px border bottom is set with padding bottom

// set to 3 times the baseline grid with 2px subtracted. By subtracting the 2px from

// the padding bottom, vertical rhythm is maintained.

//

// [3] Using an optional mixin, the line-height is set to 3 * baseline grid. Then

// the font-size is passed using our modular scale value.

.your-module {

   margin-bottom: emRhythm(3, $ms-down1); // [1]

   border-color: #000;

   border-style: solid;

   @include rhythmBorderBottom(2px, 3, $ms-down1); // [2]

   @include setType(3, $ms-down1); // [3]

}

```



The outputted CSS:



```css

.your-module {

    margin-bottom: 1.59075em; /* 18px */

    border-color: #000;

    border-style: solid;

    border-bottom-width: 2px;

    padding-bottom: 1.414em; /* 16px */

    font-size: 0.70721em;

    line-height: 1.59075; /* 18px (Okay, not pixel perfect, 17.9999999999px) */

}

```



You can also look at the [source code](https://github.com/ianrose/typesettings-site) of the document site to see how it was made using Typesettings.



## Requirements



Sass or Stylus, that's it.



## Precision



Typesettings uses relative units and many of the values outputted are a result of dividing and multiplying. So a computed pixel value like `17.999999px` will sometimes happen.



## Thanks and Resources



* [@johngerom](https://github.com/johngerome): [Stylus version](https://github.com/ianrose/typesettings/blob/master/_typesettings.styl)

* [Type-scale.com](http://type-scale.com/)

* [Typeplate](https://github.com/typeplate/typeplate.github.io)

* [Typecsset](https://github.com/csswizardry/typecsset)

* [Compass](https://github.com/chriseppstein/compass)

* [Sassaparilla](http://sass.fffunction.co/)



Please ask questions on [Gitter](https://gitter.im/ianrose/typesettings?utm_source=share-link&utm_medium=link&utm_campaign=share-link) and use [GitHub issues](https://github.com/ianrose/typesettings/issues) for bugs.



## License



[The MIT License (MIT)](https://github.com/ianrose/typesettings/blob/master/LICENSE)