Typography guideline SASS \ Указания по типографике в SASS

gistfile1.txt

/*
В даной заметки хочеться зафиксировать самый на данный момент удобный вариант реализации типографики. Данная типографика
будет реализована на основе золотого сечения. Используется SASS. За основу взят уменьшенный шрифт 16px (Verdana была бы 14px)

План:
1. Создание переменных
2. Основные параметры стилей
3. Методология присвоения классов тэгам
4. Заметки

Создание переменных

В переменных мы будем хранить значения, которые деляться по смыслу:
1. Основа
2. Увеличенные \ уменьшенные значения
3. Значения сущностей
*/

// Основа

$BASE: 16px;
$SCALE: 1.625; // Коэфициент, на который будем увеличивать числа, в соответствии
// с правилом "Золотого сечения". Данный коэфициент отличается от стандартного
// значения 1.618, что бы приводить к целым занчениям.

// Вертикальные расстояния \ Вертикальный ритм
$step: $BASE * $SCALE; // = 26px
$step-sm: $step / 2;
$step-md: $step * 2; // = 52px
$step-lg: $step * 3; // = 78px
$step-xlg: $step * 4; //= 104px

// Увеличенные \ уменьшенные значения

// Обычные правила
$font-size-base: $BASE;
$font-size-xs: $font-size-base - 4; // 12px
$font-size-sm: $font-size-base - 2; // 14px
$font-size-md: $font-size-base + 2; // 18px
$font-size-lg: $font-size-base + 4; // 22px
$font-size-xlg: $font-size-base + 6; // 24px

// Золотое сечение
$font-size-base: $BASE;
$font-size-xs: $font-size-base / $SCALE; // 10px
$font-size-sm: $font-size-base - 4; // 12px
$font-size-md: $font-size-base + 4; // 20px
$font-size-lg: $font-size-base * $SCALE; // 26px
$font-size-xlg: $font-size-base * ($SCALE*2); // 42px

// Значения сущностей. Зависят от интересующих сущностей

/*
Основные параметры стилей.

На данный момент одним из самых верных правил можно считать исполльзование rem,
как единиц измерения.
*/

// REM

$BASE: 1rem;
$SCALE: 1.625rem; // ???

// Вертикальные расстояния \ Вертикальный ритм
$step: $BASE * $SCALE; // = 26px
$step-sm: $step / 2;
$step-md: $step * 2; // = 52px
$step-lg: $step * 3; // = 78px
$step-xlg: $step * 4; //= 104px

// Увеличенные \ уменьшенные значения

// Золотое сечение
$font-size-base: $BASE;
$font-size-xs: $font-size-base / $SCALE; // 10px
$font-size-sm: $font-size-base * 0.75; // 12px
$font-size-md: $font-size-base * 1.25; // 20px
$font-size-lg: $font-size-base * $SCALE; // 26px
$font-size-xlg: $font-size-base * ($SCALE*2); // 42px