Soratra responsive — Tools for responsive typography in Sass/Scss

Install

1. Clone soratra somewhere to your project:

   https://github.com/thonymg/soratra-responsive.git

2. Include it in your main Scss file:

   @import "soratra.scss";

Installing with npm and using a Node-based asset pipeline

1. Add Soratra as a dependency:

   npm install --save soratra

2. If you’re using eyeglass, skip to Step 3. Otherwise, you’ll need to add Soratra to your node-sass includePaths option. require("soratra").includePaths is an array of directories that you should pass to node-sass. How you do this depends on how node-sass is integrated into your project.

3. Import Soratra into your Sass files:

@import "soratra";

if you are some trouble, try

@import "path/to/node_modules/soratra/core/soratra";

or

@import "~soratra/core/soratra";

Config

Soratra-responsive use compass & modular-scale mixins, variables & function.

you can use different modular-scale configuration for each device.

// Modular scale variables

$tmg-mobile-ms: 13px 14px, $octave;
$tmg-tablette-ms: 14px 16px, $octave;
$tmg-desktop-ms: 16px 18px, 1.25;
$tmg-large-ms: 18px, 1.25;
$tmg-x-large-ms: 18px, 1.25;

you can configure the compass vertical rhythm.

// Compass Vertical Rhythm variables

$base-line-height: 24px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;

config

The first option corespond to modular-scale $ms-base variable used in h6 selector, soratra-responsive automaticaly calculate each other heading size

$tmg-mobile-ms: 13px;

the second option corespond to modular scale $ms-ratio. By defaut soratra-responsive use $golden if any option is passed

$tmg-mobile-ms: 13px, $golden;

the third option corespond to modular-scale starting point. generaly you don't have to change the default value. By default soratra-responsive starts at 6 (the modular-scale starting count) and decrement this value.

$tmg-mobile-ms: 13px, $golden, 8;

use

Demo

for the responsive typography

@include tmg-base-vertical-rhythm();

Mixins for easy heading style

@include tmg-base-heading-style() {
  color: red;
}

Mixins for easy heading style with a selector

@include tmg-select-heading-style(".truc") {
  color: blue;
}

Mixins for easy block container style with selector

@include tmg-others-block-container(".foo") {
  color: green;
}

my other project

my library for advanced bem selector

alternative

other library for responsive typography

other documentation

See the modular-scale & compass documentation

Je suis un peuple d'Anosibe. follow Anosibe on twitter. Or follow me on twitter.

Paix et Guerisons - with 💘 Thony