======Слова, часто используемые в CSS-классах====== ====Изображения==== * image, img, picture, pic — картинка * icon — иконка * logo — логотип * userpic, avatar — юзерпик, маленькая картинка пользователя * thumbnail, thumb — миниатюра, уменьшенное изображение ====Текст==== * title, subject, heading, headline, caption — заголовок * subtitle — подзаголовок * slogan — слоган * lead, tagline — лид-абзац в тексте * text — текстовый контент * desc — описание, вариант текстового контента * excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее...» * quote, blockquote — цитата * snippet — пример кода * link — ссылка * copyright, copy — копирайт ====Списки==== * list, items — список * item — элемент списка ====Блоки==== * page — корневой элемент страницы * header — шапка (страницы или элемента) * footer — подвал (страницы или элемента) * section — раздел контента (один из нескольких) * main, body — основная часть (страницы или элемента) * content — содержимое элемента * sidebar — боковая колонка (страницы или элемента) * aside — блок с дополнительной информацией * widget — виджет, например, в боковой колонке ====Раскладка==== * wrapper, wrap — обёртка, обычно внешняя * inner — внутренняя обёртка * container, holder, box — контейнер * grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col) * row — контейнер в виде строки * col, column — контейнер в виде столбца ====Элементы управления==== * button, btn — кнопка, например, для отправки формы * control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером * dropdown — выпадающий список ====Медиавыражения==== * phone, mobile — мобильные устройства * phablet — телефоны с большим экраном (6-7") * tablet — планшеты * notebook, laptop — ноутбуки * desktop — настольные компьютеры ====Размеры==== * tiny — маленький, крохотный * small — небольшой * medium — средний * big, large — большой * huge — огромный * narrow — узкий * wide — широкий ====Разное==== * search — поиск * socials — блок иконок соцсетей * advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой) * features, benefits — список основных особенностей товара, услуги * slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого * pagination — постраничная навигация * user, author — пользователь, автор записи или комментария * meta — блок с дополнительной информацией, например, блок тегов и даты в посте * cart, basket — корзина * breadcrumbs — навигационная цепочка, «хлебные крошки» * more, all — ссылка на полную информацию * modal — модальное (диалоговое) окно * popup — всплывающее окно * tooltip, tip — всплывающее подсказки * preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию ====Состояния==== * active, current — активный элемент, например, текущий пункт меню * hidden — скрытый элемент * error — статус ошибки * warning — статус предупреждения * success — статус успешного выполнения задачи * pending — состояние ожидания, например, перед сменой статуса на error или success ====Примеры использования==== ==Простой список== ==Картинка пользователя (юзерпик)==
Дормидонт Петрович Дормидонт Петрович
==Галерея==
==Навигация== ==Виджет в боковой колонке==

Выращиваем желе

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

Не читать дальше...
==Блок новостей==

Вчерашние новости

 ==Статья или пост в блоге (простой вариант)==

Нащупываем чакры у пучка петрушки

Клешня Андреевна Клешня Андреевна Долгорукая
Наш эксперт по чакрам
Сходите на рынок и купите у старушек пучок петрушки грамм на 100. Как следует переберите, очистите от жуков и гусениц. Жуков отдайте поиграться коту, гусениц поселите в горшок с кактусами, пусть одна будет Джоном, вторая Билли, а у вас в горшке теперь будет Дикий Запад. Вернитесь к пучку петрушки. Ласково взгляните на него и как следует почешите за ухом, можно себе или коту. Перевяжите атласной ленточкой, непременно завяжите бант. Поздравляем! Теперь у вас есть полностью одомашненный пучок петрушки, который будет весело бегать за вами по пятам и проращивать свои семена в ваших тапках.
==Статья или пост в блоге (сложный вариант)==

Резиновые уточки как способ самопознания

Василиса Сергеевич Василиса Сергеевич
Достаньте с чердака коробку с полусотней резиновых уточек, оставшихся после празднования нового года. Из уточек и горящих свечей выложите пентаграмму на полу комнаты. Сядьте посередине в позу лотоса, в каждую руку возьмите по немецко-бразильскому словарю, прокашляйтесь, наберите полную грудь воздуха и громко и уверенно, с полной самоотдачей скажите "Кря!"

Метки