Робота з текстом в m.css ver.1.2

Наш CSS-фреймворк дозволяє стилізувати текст кількома досить лаконічними класами. Існує стилізація стандартних заголовків H1-H6, вирівнювання та обтікання текстом, стилізація таблиць. Словом, строгий джентльменський набір стилів для тексту.

TODO: beautiful lists.

Заголовки

Заголовок з використанням тегу H1

Заголовок з використанням тегу H2

Заголовок з використанням тегу H3

Заголовок з використанням тегу H4

Заголовок з використанням тегу H5

Заголовок з використанням тегу H6

Вирівнювання тексту

Вирівнювання по лівому краю .text-left або .txt-l

Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius.

Вирівнювання по центру .text-center або .txt-c

Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius.

Вирівнювання по правому краю .text-right або .txt-r

Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius.

Вирівнювання по обом краям .text-justify або .txt-j

Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius.

Не забувайте про спеціальні класи адаптивності, котрі дозволяють змінювати напрямок вирівнювання в залежності від ширини екрану. Тобто, певні блоки краще зобразити з вирівнюванням тексту по лівому краю на великих екранах, але по-центру на дуже малих. Для цього простий набір класів:

class="txt-l xs-txt-c"

Обтікання текстом

Обтікання по лівому краю .float-left або .flt-l
Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius. An nam ornatus inermis, adhuc vituperata qui no. Sit dolores urbanitas reformidans eu. Iudico putent salutandi duo ex, eu ius omnis iusto honestatis.

Обтікання по правому краю .float-right або .flt-r
Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius. An nam ornatus inermis, adhuc vituperata qui no. Sit dolores urbanitas reformidans eu. Iudico putent salutandi duo ex, eu ius omnis iusto honestatis.

Цитати

Цитату можна оформити кількома способами: тег blockquote, тег q, клас .quote

Lorem ipsum dolor sit amet, ei dicit legendos persequeris quo. Ad eos purto nonumy debitis. Ad efficiendi liberavisse mel, omnis fastidii consulatu sit ea, vix amet labitur disputationi id. Duo at iuvaret tractatos scribentur, et atqui iudico necessitatibus sit. Veniam maiestatis in mel, ex exerci omnium incorrupte ius.

Оформлення коду в тексті

Використувйте клас .code

(function() {
m('[data-m-action]').init();
})();

Таблиці

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Рядок 1, Стовпчик 1	Рядок 1, Стовпчик 2	Рядок 1, Стовпчик 3	Рядок 1, Стовпчик 4
Рядок 2, Стовпчик 1	Рядок 2, Стовпчик 2	Рядок 2, Стовпчик 3	Рядок 2, Стовпчик 4