Сырой CSS шаблоны

Перспективные шаблоны на основе чистого CSS с различными вариантами стилизации

Практически все веб-сайты используют CSS для визуальных ориентиров, и внешний CSS-файл используется на 91,8% всех веб-сайтов. Шаблоны на основе чистого CSS предоставляют разработчикам, учащимся, агентствам и стартапам такие ориентиры без использования крупных фреймворков или каких-либо платформ. Шаблоны на основе чистого CSS хорошо подходят для портфолио, страниц товаров, блогов, панелей управления и простых бизнес-сайтов. Разработчик может легко изменять цвета, отступы, типографику, сетку и мобильные контрольные точки в исходном файле. Учащийся сможет проанализировать каждый селектор и увидеть влияние каждого правила на веб-страницу. Система дизайна для кнопок, карточек, форм, меню и таблиц. Более того, чистый код экономит ресурсы, как доказано HTTP Archive.

Медианный размер страниц для настольных компьютеров с неиспользуемым CSS составил 52 КБ, а на 90-м процентиле — 221 КБ. Это означает, что неиспользуемый код будет легче обнаружить и удалить с помощью шаблона на основе чистого CSS. CSS-дизайн для сайтов о сыроедении позволяет изменять макет, экспортировать его и редактировать CSS-файлы в конечном состоянии для клиентов и обучающихся.

Гибкое управление стилем для страниц о сыроедении

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

Блоги о рецептах, кафе сыроедения и доставка органических продуктов — все они имеют свои собственные способы применения основных принципов CSS-стилизации.

• Выразительные акценты
• Спокойная типография
• Интервалы между карточками

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

Креативные стили карточек товаров в стиле Raw

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

Обратите внимание на следующие особенности таблиц стилей меню Raw:

• Соотношение сторон изображений
• Значки ингредиентов
• Варианты цен
• Состояния при наведении курсора
• Зоны касания
• Уведомления о наличии товара

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

Начните с дизайна Raw CSS уже сегодня

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