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.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
_tmg-media-query.scss
_tmg-soratra-responsive.scss
sache.json

README.md

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.

Install

  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:

    https://github.com/thonymg/soratra-responsive.git
  2. Include it in your main Scss file:

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

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

Demo

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

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 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.