450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Контент

Текст

SIMAI Framework позволяет изменять размер шрифта, толщину, стиль, трекинг, интерлиньяж, задавать выравнивание, индекс, максимальную длину строки, производить трансформацию и указывать семейство шрифтов.

Размер шрифта адаптивный

Адаптивны модификатор. Позволяет изменять размер текста в зависимости от ширины экрана. Использование: .t{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Указывает размер шрифта. Принимает значение от -3 до 7. В скобках указан абсолютный размер шрифта при 1rem = 16px:
    • -3 – 0.625rem (10px)
    • -2 – 0.75rem (12px)
    • -1 – 0.875rem (14px)
    • 0 – 1rem (16px) - значение шрифта по умолчанию
    • 1 – 1.25rem (20px)
    • 2 – 1.5rem (24px)
    • 3 – 2rem (32px)
    • 4 – 2.5rem (40px)
    • 5 – 3rem (48px)
    • 6 – 4rem (64px)
    • 7 – 6rem (96px)

Размер текста: -3

Размер текста: -2

Размер текста: -1

Размер текста: 0 (размер текста по умолчанию)

Размер текста: 1

Размер текста: 2

Размер текста: 3

Размер текста: 4

Размер текста: 5

Размер текста: 6

Размер текста: 7

<p class="t--3">Размер текста: -3</p>
<p class="t--2">Размер текста: -2</p>
<p class="t--1">Размер текста: -1</p>
<p class="t-0">Размер текста: 0 (размер текста по умолчанию)</p>
<p class="t-1">Размер текста: 1</p>
<p class="t-2">Размер текста: 2</p>
<p class="t-3">Размер текста: 3</p>
<p class="t-4">Размер текста: 4</p>
<p class="t-5">Размер текста: 5</p>
<p class="t-6">Размер текста: 6</p>
<p class="t-7">Размер текста: 7</p>

Толщина шрифта адаптивный

Адаптивны модификатор. Позволяет изменять толщину текста в зависимости от ширины экрана. Использование: .t{контрольная точка}-{толщина}

  • Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Толщина. Обязательный параметр. Указывает толщину шрифта. Принимает значения:
    • light – толщина шрифта 300
    • regular – нормальная толщина шрифта
    • medium – толщина шрифта 500
    • bold – толщина шрифта жирная

Text font weight light

Text font weight regular

Text font weight medium

Text font weight bold

<p class="t-light">Text font weight light</p>
<p class="t-regular">Text font weight regular</p>
<p class="t-medium">Text font weight medium</p>
<p class="t-bold">Text font weight bold</p>

Адаптивная толщина шрифта

Вы можете использовать параметры контрольных точек для измеения толщины шрифта при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов толщины шрифта подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font weight light (<md)

Text font weight regular (<md)

Text font weight medium (<md)

Text font weight bold (<md)

<p class="t-light t-md-regular">Text font weight light</p>
<p class="t-regular t-md-regular">Text font weight regular</p>
<p class="t-medium t-md-regular">Text font weight medium</p>
<p class="t-bold t-md-regular">Text font weight bold</p>

Стиль шрифта

Использование модификатора: .t{контрольная точка}-{стиль}

  • Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Стиль. Обязательный параметр. Указывает стиль шрифта. Принимает значения:
    • normal – нормальный шрифт
    • italic – курсивный шрифт

Text font style normal

Text font style italic

<p class="t-normal">Text font style normal</p>
<p class="t-italic">Text font style italic</p>

Адаптивный стиль шрифта

Вы можете использовать параметры контрольных точек для измеения стиля шрифта при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов стиля подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text font style italic (<md)

<p class="t-italic t-md-normal">Text font style italic</p>

Семейство шрифтов

Вы можете использовать следующие модификаторы для использования в проекте безопасных (системных) шрифтов:

Использование модификатора: .t{контрольная точка}-{гарнитура}

  • Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Гарнитура. Обязательный параметр. Указывает гарнитуру шрифта. Принимает значения:
    • .t-arial или .t-helvetica – Arial (Windows); Arial, Helvetica (Mac)
    • .t-arial-black или .t-gadget – Arial Black (Windows); Arial Black, Gadget (Mac)
    • .t-comic – Comic Sans MS (Windows, Mac)
    • .t-courier – Courier New (Windows); Courier New, Courier (Mac)
    • .t-georgia – Georgia (Windows, Mac)
    • .t-impact или .t-charcoal – Impact (Windows); Impact,Charcoal (Mac)
    • .t-lucida-console или .t-monaco – Lucida Console (Windows); Monaco (Mac)
    • .t-lucida-sans или .t-lucida-grande – Lucida Sans Unicode (Windows); Lucida Grande (Mac)
    • .t-palatino или .t-book-antiqua – Palatino Linotype, Book Antiqua (Windows); Palatino (Mac)
    • .t-tahoma или .t-geneva – Tahoma (Windows); Geneva (Mac)
    • .t-times – Times New Roman (Windows); Times (Mac)
    • .t-trebuchet – Trebuchet MS (Windows); Helvetica (Mac)
    • .t-verdana – Verdana (Windows); Verdana, Geneva (Mac)

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

<p class="t-arial t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-arial-black t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-comic t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-courier t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-georgia t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-impact t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-lucida-console t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-lucida-sans t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-palatino t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-tahoma t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-times t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-trebuchet t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-verdana t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>

Трансформация текста

Использование модификатора: .t{контрольная точка}-{тип трансформации}

  • Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Тип трансформации. Обязательный параметр. Указывает вид трансформации текста. Принимает значения:
    • lowercase – все символы текста становятся строчными (нижний регистр)
    • uppercase – все символы текста становятся прописными (верхний регистр)
    • capitalize – первый символ каждого слова в предложении будет заглавным, остальные символы свой вид не меняют
    • strike – текст зачеркивается

The lowercase text

The uppercase text

The capitalize text

The strike-through text

<p class="t-lowercase">The lowercase text</p>
<p class="t-uppercase">The uppercase text</p>
<p class="t-capitalize">The capitalize text</p>
<p class="t-strike">The strike-through text</p>

Адаптивная трансформация текста

Вы можете использовать параметры контрольных точек для измеения трансформации текста при различных разрешениях. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов стиля подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text uppercase (<md)

<p class="t-uppercase t-md-lowercase">Text uppercase (&lt;md)</p>

Трекинг

Тре́кинг (от англ. tracking) — равномерное изменение расстояния между буквами (межбуквенных пробелов).

Использование модификатора: .t{контрольная точка}-{тип трекинга}

  • Контрольная точка. Необязательный параметр. Изменяет трекинг только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Тип трекинга. Обязательный параметр. Указывает вид трекинга текста. Принимает значения:
    • tracked – растояние между символами .1em
    • tracked-tight – растояние между символами -.05em
    • tracked-mega – растояние между символами .25em

Стало немного просторнее

Встаньте теснее!

Всем разойтись!

<p class="t-tracked t-2 t-uppercase">Стало немного просторнее</p>
<p class="t-tracked-tight t-2 t-uppercase">Встаньте теснее!</p>
<p class="t-tracked-mega t-2 t-uppercase">Всем разойтись!</p>

Интерлиньяж (межстрочный интервал)

Интерлинья́ж (происходит от фр. interligne; дословный перевод: «написанное между строк») — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной вёрстке это понятие обычно называют "межстрочный интервал" (англ. line spacing).

Использование модификатора: .t{контрольная точка}-{тип интервала}

  • Контрольная точка. Необязательный параметр. Изменяет межстрочный интервал только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Тип интервала. Обязательный параметр. Указывает вид трекинга текста. Принимает значения:
    • copy – растояние между строками 1.5 х размер шрифта
    • title – растояние между строками 1.25 х размер шрифта
    • solid – растояние между строками 1 х размер шрифта

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst.

<p class="t-copy">Lorem ipsum dolor ...</p>
<p class="t-title">Lorem ipsum dolor ...</p>
<p class="t-solid">Lorem ipsum dolor ...</p>

Выравнивание текста

Использование модификатора: .t{контрольная точка}-{выравнивание}

  • Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Выравнивание. Обязательный параметр. Указывает выравнивание текста. Принимает значения:
    • left – выравнивание по левому краю
    • right – выравнивание по правому краю
    • center – выравнивание по центру
    • justufy – выравнивание по ширине

Text align left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align justufy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p class="t-left">Text align left</p>
<p class="t-right">Text align right</p>
<p class="t-center">Text align center</p>
<p class="t-justufy">Text align justufy</p>

Адаптивное выравнивание текста

Вы можете использовать параметры контрольных точек для измеения параметра выравнивания текста. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов выравнивания текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text align right (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align center (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text align justufy (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p class="t-right t-md-left">Text align right</p>	
<p class="t-center t-md-left">Text align center</p>
<p class="t-justufy t-md-left">Text align justufy</p>

Длина строки текста

Использование модификатора: .t{контрольная точка}-{размер}

  • Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
  • Размер. Обязательный параметр. Определяет длину строки текста. Принимает значения:
    • measure – длина строки ~66 символов
    • measure-narrow – длина строки ~45 символов
    • measure-wide – длина строки ~80 символов

Text measure

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-narrow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-wide

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p class="t-measure">Text measure</p>
<p class="t-measure-narrow">Text measure-narrow</p>
<p class="t-measure-wide">Text measure-wide</p>

Адаптивная длина строки текста

Вы можете использовать параметры контрольных точек для измеения параметра длины строки текста. Для просмотра демононстрации - измените разршение экрана.

При использовании нескольких модификаторов длины строки текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Text measure-narrow (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Text measure-wide (<md)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

<p class="t-measure-narrow t-md-measure">Text measure-narrow (<md)</p>	
<p class="t-measure-wide t-md-measure">Text measure-wide (<md)</p>

Список

Модификатор убирает маркеры в списке

Использование модификатора: .t{контрольная точка}-list

  • Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Unmarked list
  • Item 1
  • Item 2
  • Item 3
Unmarked adaptive list. MD size and large
  • Item 1
  • Item 2
  • Item 3
<h5>Unmarked list</h5>
<ul class="t-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h5>Unmarked adaptive list. MD size and large</h5>
<ul class="t-md-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<>