☬Yamal

Первый отечественный адаптивный CSS-Framework

Первый адекватный отечественный css framework с поддержкой адаптивной верстки, 12-колоночной сетки, готовыми стилями для оформления большинства элементов веб-сайта.

Первый адекватный отечественный css framework с поддержкой адаптивной верстки, 12-колоночной сетки, готовыми стилями для оформления большинства элементов веб-сайта.

Первый адекватный отечественный css framework с поддержкой адаптивной верстки, 12-колоночной сетки, готовыми стилями для оформления большинства элементов веб-сайта.

Оформление текста

В .css уже содержатся необходимые для оформления классы, а также список дополнительных классов, с помощью которых можно отформатировать текст под свои нужды.

Абзацы

Пример абзаца, который демонстрирует настройки фреймворка по умолчанию. Размер шрифта 16px, межстрочечный интервал у абазцев 1.5, шрифт по умолчанию - PT Sans Caption, прописаны правила для тегов выделения жирным и курсивом (используются теги как графические b и i, так и логические strong и em).

По умолчанию у ссылок отключен text-decoration, вместо него используется border-bottom. Надо прописать классические стили, отдельно с border-bottom, отдельно еще какие-нибудь.

Заголовки

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5
Заголовок H6

Списки

Неупорядочный спиоск с маркерами (вариант по умолчанию)

  • Список с маркерами
  • Список с маркерами
    • Список с маркерами
    • Список с маркерами
  • Список с маркерами
  • Список с маркерами

Альтернативная версия (a-la classic) списоков с классом .mylist

  • Список с маркерами
  • Список с маркерами
    • Список с маркерами
    • Список с маркерами
  • Список с маркерами
  • Список с маркерами

Списки нумерованные

  1. Список нумерованный
  2. Список нумерованный
  3. Список нумерованный
  4. Список нумерованный

Список в одну строку (например, для меню) с классом .inlist

  • Элемент списка
  • Элемент списка
  • Элемент списка
  • Элемент списка

Дополнительные теги форматирования

Верхний индекс sup: x2

Нижний индекс sub: H2O

Тег mark: выделение

Аббревиатуры abbr: НКВД

Тег address для обозначения контактов. Заданы общие отступы от блока, шрифт и межстрочечный интервал меньше, чем в простых абзацах.

Наш адрес:
123456, Санкт-Петербург,
+7 812 333-22-11

Цитаты blockquote

Завистливые люди часто осуждают то, чего не умеют, и критикуют тех, до уровня которых им никогда не дотянуться.

Ф.В. Ницше

Список описания dl - dt - dd (отображается горизонтально)

Термин 1
Описание термина 1.
Термин 2
Описание термина 2.

Раскрашиваем текст

Добавляем класс к элементам и получаем цветной текст:

Синий текст .blue

Желтый текст .yellow

Красный текст .red

Чертный текст .black

Серый текст .gray

Светло-серый текст .lightgray

Белый текст .white

Комбинируем со span, i или b.

Добавляем декоративное подчеркивание

Синим .blueline

Красным .redline

Черным .blackline

Темно-серым .grayline

Размер имеет значение

Очень крупный текст .verybigtext

Купный текст .bigtext

Мелкий текст или сноска .smalltext

Подключенные шрифты Google Fonts

Для ускорения разработки Yamal имеет несколько по умолчанию подключенных шрифтов от Google Fonts. Внимание! Для снижения нагрузки необходимо отключить все неиспользуемые шрифты.

PT Sans Caption {font-family: 'PT Sans Caption', sans-serif;}

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

Roboto {font-family: 'Roboto', sans-serif;}

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

Roboto Condensed {font-family: 'Roboto Condensed', sans-serif;}

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

Open Sans {font-family: 'Open Sans', sans-serif;}

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

Open Sans Condensed {font-family: 'Open Sans Condensed', sans-serif;}

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

Exo 2 {font-family: 'Exo 2', sans-serif;}

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

Comfortaa {font-family: 'Comfortaa', cursive;}

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

Poiret One {font-family: 'Poiret One', cursive;}

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

Pattaya {font-family: 'Pattaya', sans-serif;}

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

Больше шрифтов

Цвета и Background

Background-image

bg1
bg2
bg3
bg4
bg5
bg6
bg7
bg8
bg9
bg10
bg11
bg12
bg13
bg14
bg15

Background-color

bc8
bc1
bc2
bc3
bc4
bc5
bc6
bc9
bc7
bb1
bb2
bb3
bb4
bb5
bb6
bb7

Готовые цветовые схемы:


Подбираем цвет

Таблицы

Стандартная таблица (без класса)

Наименование Розница Опт Крупный опт
Подводка газовая, Ду 15 в-н, L=1,0 м, резина 181,2 143,9 117,3
Подводка газовая, Ду 15 в-н, L=1,5 м, резина 208,4 165,5 134,9
Подводка газовая, Ду 15 в-в, L=1,5 м, резина 211,1 167,7 136,6
Подводка газовая, Ду 15 в-н, L=2,0 м, резина 245,0 194,5 158,5
Подводка газовая, Ду 15 в-в, L=2,0 м, резина 246,5 195,8 159,5
Подводка газовая, Ду 15 в-в, L=5,0 м, резина 445,4 353,7 288,2
Подводка газовая, Ду 15 в-н, L=5 м, резина 442,7 351,5 286,4
Рукав д/газа 1,0м 3/4 " в-н ("гигант" D16) черный (шт.) 519,2 412,3 335,9

Таблица с классом .gorizont

Наименование Розница Опт Крупный опт
Подводка газовая, Ду 15 в-н, L=1,0 м, резина 181,2 143,9 117,3
Подводка газовая, Ду 15 в-н, L=1,5 м, резина 208,4 165,5 134,9
Подводка газовая, Ду 15 в-в, L=1,5 м, резина 211,1 167,7 136,6
Подводка газовая, Ду 15 в-н, L=2,0 м, резина 245,0 194,5 158,5
Подводка газовая, Ду 15 в-в, L=2,0 м, резина 246,5 195,8 159,5
Подводка газовая, Ду 15 в-в, L=5,0 м, резина 445,4 353,7 288,2
Подводка газовая, Ду 15 в-н, L=5 м, резина 442,7 351,5 286,4
Рукав д/газа 1,0м 3/4 " в-н ("гигант" D16) черный (шт.) 519,2 412,3 335,9

Таблица с классом .noborder

Наименование Розница Опт Крупный опт
Подводка газовая, Ду 15 в-н, L=1,0 м, резина 181,2 143,9 117,3
Подводка газовая, Ду 15 в-н, L=1,5 м, резина 208,4 165,5 134,9
Подводка газовая, Ду 15 в-в, L=1,5 м, резина 211,1 167,7 136,6
Подводка газовая, Ду 15 в-н, L=2,0 м, резина 245,0 194,5 158,5
Подводка газовая, Ду 15 в-в, L=2,0 м, резина 246,5 195,8 159,5
Подводка газовая, Ду 15 в-в, L=5,0 м, резина 445,4 353,7 288,2
Подводка газовая, Ду 15 в-н, L=5 м, резина 442,7 351,5 286,4
Рукав д/газа 1,0м 3/4 " в-н ("гигант" D16) черный (шт.) 519,2 412,3 335,9

Формы

По умолчанию input и textarea занимают 100% ширины родительского блока. Не забывайте добавлять внутренние отсупы у формы. Высота textarea по умолчанию 7em, растягивание запрещено.

Кнопки

Стандартной кнопке button задан размер (за счет padding: 0.5em 4em), добававлен cursor:pointer и небольшие внешние отступы.

стандартная кнопка button по умолчанию

.btn - модернизированая кнопка

.btn_yml - копка с эффектом "вдавливания" (Спасибо, Yaml.de!)

.btn_r - рыжая кнопка для оптимистов

.btn_g - серая кнопка для пессимистов

.btn_b - голубая кнопка для болельщиков Зенита

.btn_gr зеленая экологически чистая кнопка

.btn_y - как в Яндексе, только лучше

.btn_s - как в одном банке

.btn_bank - как у 60% топовых банков (случайность?)

.btn_big - кнопка может быть большой

.btn_small - и маленькой

Кнопки растягиваются по ширине. К ним применимы текстовые классы (см. раздел "Раскрашиваем текст"). Это дает возможность комбинировать различные эффекты.

Готовые меню

Горизонтальное меню

.graymenu