Верхний блок над шапкой
Шрифты
Категории:
Заголовки
h1, .h1
размер шрифта 36px
h2, .h2
размер шрифта 32px
h3, .h3
размер шрифта 28px
h4, .h4
размер шрифта 24px
h5, .h5
размер шрифта 22px
h6, .h6
размер шрифта 18px
Примеры:
<div class="h1">.h1 heading</div>.h1 heading
<h2>h2 heading</h2>h2 heading
<h3>h3 heading</h3>h3 heading
<h4>h4 heading</h4>h4 heading
<h5>h5 heading</h5>h5 heading
<h6>h6 heading</h6>h6 heading
Классы, управляющие семейством и шириной шрифта
.regular
устанавливает семейство шрифта Gotham Pro Regular блоку и вложенным ссылкам
.bold
устанавливает семейство шрифта Gotham Pro Bold блоку и вложенным ссылкам
.medium
устанавливает семейство шрифта Gotham Pro Medium блоку и вложенным ссылкам
.light
устанавливает семейство шрифта Gotham Pro Light блоку и вложенным ссылкам
Примеры:
<div class="regular">.regular <a href="#">link</a></div>.regular link
<div class="bold">.bold <a href="#">link</a></div>.bold link
<div class="medium">.medium <a href="#">link</a></div>.medium link
<div class="light">.light <a href="#">link</a></div>.light link
Классы, управляющие размером шрифта
.small
устанавливает размер шрифта 88%
.smaller
устанавливает размер шрифта 80%
.smallest
устанавливает размер шрифта 70%
.micro
устанавливает размер шрифта 60%
.big
устанавливает размер шрифта 130%
.bigger
устанавливает размер шрифта 170%
.biggest
устанавливает размер шрифта 200%
Примеры:
<div class="smaller">.smaller</div>.smaller
<div class="micro">.micro</div>.micro
<div class="big">.big</div>.big
<div class="biggest">.biggest</div>.biggest
Классы, управляющие горизонтальным выравниванием шрифта
.center
выравнивает текст по центру
.right
выравнивает текст по правому краю
.left
выравнивает текст по левому краю
.text-justify
выравнивает текст по ширине
Примеры:
<div class="center">.center</div>.center
<div class="right">.right</div>.right
Классы, управляющие дополнительным оформлением шрифта
.ucase
делает все символы текста прописными
.lcase
делает все символы текста строчными
.crossline
делает перечёркнутый текст
.description
устанавливает цвет шрифта #777 и размер, аналогичный .small (88%)
.lh20, .lh25
устанавливает высоту строки 20px и 25px соответственно
.t_white, .t_grey, .t_dark-grey, .t_black, .t_dark-black, .t_orange, .t_dark-orange, .t_blue, .t_red
устанавливает цвет шрифта блоку и вложенным ссылкам
Примеры:
<div class="t_white p10 bg_blue">.t_white .p10 .bg_blue <a href="#">link</a></div>.t_white .p10 .bg_blue link
<div class="ucase t_grey">.ucase .t_grey <a href="#">link</a></div>.ucase .t_grey link
<div class="t_dark-grey">.t_dark-grey <a href="#">link</a></div>.t_dark-grey link
<div class="lcase t_black">.LCASE .t_black <a href="#">link</a></div>.LCASE .t_black link
<div class="t_dark-black">.t_dark-black <a href="#">link</a></div>.t_dark-black link
<div class="crossline t_orange">.crossline .t_orange <a href="#">link</a></div>.crossline .t_orange link
<div class="t_dark-orange">.t_dark-orange <a href="#">link</a></div>.t_dark-orange link
<div class="lh20 t_blue">.lh20 .t_blue <a href="#">link</a></div>.lh20 .t_blue link
<div class="t_red">.t_red <a href="#">link</a></div>.t_red link
<div class="description lh25">.description .lh25</div>.description .lh25
