Skip to content

Instantly share code, notes, and snippets.

@htmlzengarden
Last active August 29, 2015 14:06
Show Gist options
  • Save htmlzengarden/2a44b55882f36a3ca480 to your computer and use it in GitHub Desktop.
Save htmlzengarden/2a44b55882f36a3ca480 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div lang="la">
<p class="small"><span>lorem ipsum dolor sit amet</span></p>
<p><span>lorem ipsum dolor sit amet</span></p>
<p class="title-6"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-5"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-4"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-3"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-2"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-1"><span>lorem ipsum dolor sit amet</span></p>
</div>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// SassyLists (v2.2.1)
// ----
// dépendance
@import 'SassyLists';
// ratios pré-définis
$phi: 1/1.618!default;
$golden: 1/1.618!default;
$double-octave: 1/4!default;
$major-twelfth: 1/3!default;
$major-eleventh: 3/8!default;
$major-tenth: 2/5!default;
$octave: 1/2!default;
$major-seventh: 8/15!default;
$minor-seventh: 9/16!default;
$major-sixth: 3/5!default;
$minor-sixth: 5/8!default;
$fifth: 2/3!default;
$augmented-fourth: 1/1.4142135!default; // 1/√2
$fourth: 3/4!default;
$major-third: 4/5!default;
$minor-third: 5/6!default;
$major-second: 8/9!default;
$minor-second: 15/16!default;
// paramètres d’entrée
// @param $ratio ratio appliqué pour le calcul des échelles typographiques
// @param $scale1 taille de texte « importante » de l’échelle 1 (utilisée comme niveau 0)
// @param $scale2 taille de texte « importante » de l’échelle 2
$ratio: $golden!default;
$scale1: 20px!default;
$scale2: 25px!default;
// @param $amplitude taille des échelles calculées (pas vraiment besoin d’y toucher)
$amplitude: 10!default;
@function calculatescales($ratio, $scale1, $scale2, $amplitude)
{
// variables internes
$i: 0;
// on calcule les deux échelles
@while $i < $amplitude
{
$next1: nth($scale1, length($scale1)) / $ratio;
$next2: nth($scale2, length($scale2)) / $ratio;
$prev1: nth($scale1, 1) * $ratio;
$prev2: nth($scale2, 1) * $ratio;
$scale1: join($scale1, $next1);
$scale2: join($scale2, $next2);
$scale1: join($prev1, $scale1);
$scale2: join($prev2, $scale2);
$i: $i + 1;
}
// fusion + tri + arrondis sur les échelles
$scale: sl-sort(join($scale1, $scale2));
$roundscale: ();
@each $step in $scale
{
$roundscale: join($roundscale, round($step));
}
@return sl-remove-duplicates($roundscale);
}
// fonction publique
@function scale($level: 0)
{
$lscale: $scale;
@if length($lscale) == 0
{
$lscale: calculatescales($ratio, $scale1, $scale2, $amplitude);
}
$scale: $lscale;
@return nth($scale, index($scale, $scale1) + $level);
}
$scale: ();
// exemple d’utilisation (avec un rythme vertical en bonus)
$bfs: 16px!default; // base-font-size
$fs: scale()!default; // font-size (que l'on va chercher sur l’échelle typographique)
$lh: round($fs * 3 / 2)!default; // line-height (par défaut 1.5 fois plus grand que le font-size)
// conversion de pixels en ems, en fonction du contexte
@function em($px, $contexte: $bfs)
{
@return($px / $contexte * 1em);
}
// on charge normalize
@import 'http://necolas.github.io/normalize.css/3.0.1/normalize.css';
body
{
// on applique le font-size et le line-height
font-size: em($fs);
line-height: em($lh, $fs);
padding: 0 em($lh, $fs);
// grille horizontale
background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
background-position: 0 0;
background-size: em($lh / 2, $fs) em($lh / 2, $fs);
}
p
{
// on revoit les marges par défaut des paragraphes en fonction du line-height
margin: em($lh, $fs) 0;
}
p
{
// pour mettre en évidence les paragraphes et les hauteurs de lignes
background-color: transparentize(#000, 0.95);
& > *
{
background-color: transparentize(#F00, 0.95);
}
}
.small
{
// on va chercher sur l’échelle typographique la valeur à -1
$size: scale(-1);
// cette valeur est convertie en ems, en fonction du contexte sur le body
// et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
// ici le line-height est divisé par 2 car le texte est très petit
font-size: em($size, $fs);
margin: em($lh / 2, $size) 0;
}
.title-6
{
// on va chercher sur l’échelle typographique la valeur à 1
$size: scale(1);
// cette valeur est convertie en ems, en fonction du contexte sur le body
// et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
font-size: em($size, $fs);
margin: em($lh, $size) 0;
}
.title-5
{
// on va chercher sur l’échelle typographique la valeur à 2
$size: scale(2);
// cette valeur est convertie en ems, en fonction du contexte sur le body
// et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
// ici le line-height est multiplié par 1.5 car le texte est assez gros
font-size: em($size, $fs);
line-height: em($lh * 1.5, $size);
margin: em($lh, $size) 0;
}
.title-4
{
// on va chercher sur l’échelle typographique la valeur à 3
$size: scale(3);
// cette valeur est convertie en ems, en fonction du contexte sur le body
// et les marges du paragraphes sont aussi revues en fonction de cette nouvelle taille de texte
// ici le line-height est multiplié par 1.5 car le texte est assez gros
font-size: em($size, $fs);
line-height: em($lh * 1.5, $size);
margin: em($lh, $size) 0;
}
.title-3
{
$size: scale(4);
font-size: em($size, $fs);
line-height: em($lh * 2, $size);
margin: em($lh, $size) 0;
}
.title-2
{
$size: scale(5);
font-size: em($size, $fs);
line-height: em($lh * 2.5, $size);
margin: em($lh, $size) 0;
}
.title-1
{
$size: scale(6);
font-size: em($size, $fs);
line-height: em($lh * 3, $size);
margin: em($lh, $size) 0;
}
// EOF
@import "http://necolas.github.io/normalize.css/3.0.1/normalize.css";
body {
font-size: 1.25em;
line-height: 1.5em;
padding: 0 1.5em;
background-image: linear-gradient(transparent calc(100% - 1px), #F00 100%);
background-position: 0 0;
background-size: 0.75em 0.75em;
}
p {
margin: 1.5em 0;
}
p {
background-color: rgba(0, 0, 0, 0.05);
}
p > * {
background-color: rgba(255, 0, 0, 0.05);
}
.small {
font-size: 0.75em;
margin: 1em 0;
}
.title-6 {
font-size: 1.25em;
margin: 1.2em 0;
}
.title-5 {
font-size: 1.6em;
line-height: 1.40625em;
margin: 0.9375em 0;
}
.title-4 {
font-size: 2em;
line-height: 1.125em;
margin: 0.75em 0;
}
.title-3 {
font-size: 2.6em;
line-height: 1.15385em;
margin: 0.57692em 0;
}
.title-2 {
font-size: 3.25em;
line-height: 1.15385em;
margin: 0.46154em 0;
}
.title-1 {
font-size: 4.25em;
line-height: 1.05882em;
margin: 0.35294em 0;
}
<div lang="la">
<p class="small"><span>lorem ipsum dolor sit amet</span></p>
<p><span>lorem ipsum dolor sit amet</span></p>
<p class="title-6"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-5"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-4"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-3"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-2"><span>lorem ipsum dolor sit amet</span></p>
<p class="title-1"><span>lorem ipsum dolor sit amet</span></p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment