verticalrythm - Generated by SassMeister.com.

verticalrythm-input-HTML.markdown

Titre de niveau 1

Titre de niveau 2

Titre de niveau 3

Titre de niveau 4

Titre de niveau 5

Titre de niveau 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in erat ut urna cursus vestibulum. Phasellus tempus. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Pellentesque dapibus hendrerit tortor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vivamus consectetuer hendrerit lacus. Curabitur at lacus ac velit ornare lobortis. In hac habitasse platea dictumst.

verticalrythm-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";

// Responsive type with Bourbon
// Useful links :
// http://www.pearsonified.com/typography/
// http://www.modularscale.com/
// http://bourbon.io/docs/#modular-scale

// Optimal line-height : $line-height-base ÷ $fontbase

/* Bourbon : ModularScale : Scaling Variables

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$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;

## Tim Brown : molten-leading-or-fluid-line-height
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
> To find that line-height value, I used this formula: 
((current width − min-width)/(max-width − min-width)) × (line-height − min-line-height) + min-line-height = line-height. 
With actual values, that’s: 
((30em−15em)/(36em−15em)) × (1.4−1.3) + 1.3 = 1.371428571.

## Aligning type to baseline the right way with SASS
https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.u9iulamba
https://gist.github.com/razwan/10662500


*/

// Modular Scale
$modular-scale-ratio: $perfect-fourth;
$modular-scale-base: 16px;


// Globals
$em-base: 16 !default;
$base-line-height: 1.5 !default;
$base-font-size: 16px !default;


// Base-line height debug
$baseline-grid-show: true !default;
$baseline-grid-color : ff0000 !default;


// ------------------------------------------------*/
// MIXINS & FUNCTIONS
// ------------------------------------------------*/
/* # @function vertical-rythme()


@global $em-base                - Bourbon/neat global
@global $base-line-height       - Bourbon/neat global
@param $multiplier              - number of time to repeat the base line height define by $em-base
@param $offset  (0 !default)    - Optional A scope to add
@param $em-base (16 !default)
@return                         - value in em

Styleguide libs.functions.vertical-rythm
*/

@function vertical-rythm($multiplier, $offset: 0, $em-base: 16, $base-line-height: 1.5){
    $vertical-rythm: $base-line-height * em($em-base);
    @return $vertical-rythm;
}

//-------------------------------------------*/
// Custom Settings
//-------------------------------------------*/
$em-base: 16;
$base-line-height: 1.5;


// ------------------------------------------------*/
// Sizes
// http://concisecss.com/documentation/core/breakpoints
// Media-queries Boilerplate : http://app.kodery.com/s/1075
// ------------------------------------------------*/

// xs
$extra-small: em(320);
// s
$small: em(480);
//$small: 480px;
// m
$medium: em(768);
// l
$large: em(960);
// xl
$extra-large: em(1140);

// ------------------------------------------------*/
// Breakpoints
// http://thoughtbot.github.io/neat-docs/latest/#new-breakpoint
// ------------------------------------------------*/

$xs: new-breakpoint(min-width $extra-small, 2);
$s: new-breakpoint(min-width $small, 4);
$m: new-breakpoint(min-width $medium , 8);
$l: new-breakpoint(min-width $large, 8);
$xl: new-breakpoint(min-width $extra-large, 8);
//-------------------------------------------*/
// USAGE
//-------------------------------------------*/

// Utility Debug
@if $baseline-grid-show == true {
    html {
        $size: strip-units(($base-line-height * $em-base));
        background-image: url('http://basehold.it/i/#{$size}/#{$baseline-grid-color}'); 
    }
}

$max-width: 750px;

html {
  font-size: 100%;
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    
    font-size: $base-font-size; 
    line-height: $base-line-height;
      
    max-width: $max-width;
    margin: 0 auto;
}

h1,h2,h3,h4,h5,h6{
  padding-top:5px;
  margin:0;
  }

h1 { 
  $h1-font-size : ceil(modular-scale(6));
  font-size: $h1-font-size;
  line-height: rem($base-line-height * $h1-font-size / 2 ); // $base-line-height / $h1-font-size
  margin-bottom: vertical-rythm(1) ;
} // 50 ÷ 16 = 3.125

h2 {
  $h2-font-size : ceil(modular-scale(5));
  font-size: $h2-font-size;
  line-height: rem($base-line-height * $h2-font-size / 2 );
} // 37 ÷ 16 = 2.3125

h3 {
  font-size: ceil(modular-scale(4));
} // 28 ÷ 16 = 1.75

h4{
  font-size: ceil(modular-scale(3));
}
h5{
  font-size: ceil(modular-scale(2));
}
h6{
  font-size: ceil(modular-scale(1));
}

verticalrythm-output.css

@charset "UTF-8";
/* Bourbon : ModularScale : Scaling Variables

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$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;

## Tim Brown : molten-leading-or-fluid-line-height
http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/
> To find that line-height value, I used this formula: 
((current width − min-width)/(max-width − min-width)) × (line-height − min-line-height) + min-line-height = line-height. 
With actual values, that’s: 
((30em−15em)/(36em−15em)) × (1.4−1.3) + 1.3 = 1.371428571.

## Aligning type to baseline the right way with SASS
https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b#.u9iulamba
https://gist.github.com/razwan/10662500


*/
/* # @function vertical-rythme()


@global $em-base                - Bourbon/neat global
@global $base-line-height       - Bourbon/neat global
@param $multiplier              - number of time to repeat the base line height define by $em-base
@param $offset  (0 !default)    - Optional A scope to add
@param $em-base (16 !default)
@return                         - value in em

Styleguide libs.functions.vertical-rythm
*/
html {
  background-image: url("http://basehold.it/i/24/ff0000");
}

html {
  font-size: 100%;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  max-width: 750px;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
  padding-top: 5px;
  margin: 0;
}

h1 {
  font-size: 90px;
  line-height: 4.21875rem;
  margin-bottom: 1.5em;
}

h2 {
  font-size: 68px;
  line-height: 3.1875rem;
}

h3 {
  font-size: 51px;
}

h4 {
  font-size: 38px;
}

h5 {
  font-size: 29px;
}

h6 {
  font-size: 22px;
}

verticalrythm-rendered.html

<h1>Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>

<h3>Titre de niveau 3</h3>

<h4>Titre de niveau 4</h4>

<h5>Titre de niveau 5</h5>

<h6>Titre de niveau 6</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
Vivamus in erat ut urna cursus vestibulum. Phasellus tempus. Aenean ut eros et nisl sagittis vestibulum. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.<br>
Pellentesque dapibus hendrerit tortor. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vivamus consectetuer hendrerit lacus. Curabitur at lacus ac velit ornare lobortis. In hac habitasse platea dictumst.</p>