Soratra responsive — mixins for responsive typography Sass/Scss
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Soratra responsive — mixins for responsive typography Sass/Scss -

##Mixin pour créer de la typography responsive en Sass/Scss.

  • Note: Not tested with libSass and Sass < 3.4.


  1. You need
  • Sass (v3.4.14) or +
  • Compass (v1.0.3) or +
  • Modular Scale (v2.1.1) or +
  1. Clone soratra-responsive somewhere to your project:
  2. Include it in your main Scss file:

    @import "tmg-soratra-responsive.scss";


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;



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;


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


other library for responsive typography

other documentation

See the compass & modular-scale documentation

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

  • Paix et guérrisons pour les tiens.