Веб-дизайн стал более доступным, чем когда-либо, но он по-прежнему требует много работы — и много навыков
— производить профессионально выглядящие результаты.
К счастью, вам не нужно каждый раз начинать с нуля. В Интернете доступны тысячи бесплатных CSS-шаблонов, охватывающих все современные тенденции дизайна и технологии. Вы можете использовать их в оригинальном виде или настроить их, чтобы сделать их своими.
В этом руководстве мы подробнее рассмотрим шаблоны CSS и то, где их найти.
Что такое шаблон CSS? Шаблон CSS не просто содержит CSS: он дает вам все необходимое для создания полнофункционального веб-сайта. Когда вы загружаете один, вы обычно получаете папку, содержащую следующее:
HTML-файлы — Вы получите HTML-файл для каждой страницы сайта. Он будет содержать образец текста и изображений, которые вам нужно будет заменить собственным содержимым. Вам также понадобится настроить метаданные, относящиеся к таким вещам, как описание сайта.Файл CSS — Обычно вы получаете один основной файл CSS, содержащий все стили для сайта, а также любые дополнительные функции, такие как таблица стилей сброса или файл для веб-шрифтов.Javascript файл — Если сайт содержит функции Javascript, в идеале их следует включать в отдельный файл, а не включать в документы HTML.Изображения, шрифты и значки — Любые изображения, используемые в шаблоне, также должны быть включены. Возможно, вы захотите сохранить такие вещи, как значки и фоны, но вам придется заменить другие изображения-заполнители своими собственными. Некоторые пользовательские шрифты также могут быть включены.Есть так много бесплатных шаблонов CSS на выбор. Так как же узнать, что подходит именно вам? Вот несколько вещей, на которые стоит обратить внимание:
дизайн — Очевидно, вам нужен сайт, который выглядит красиво и отражает то изображение, которое вы хотите изобразить. Но также подумайте, подходит ли шаблон для ваших нужд сейчас и в будущем. Многие для одностраничных сайтов; некоторые предназначены для нескольких страниц. Если вам нужно последнее, подумайте, может быть, вам лучше использовать CMS, например WordPress.Мобильная оптимизированная — Использование мобильного Интернета теперь выше, чем на настольных компьютерах, поэтому важно, чтобы ваш сайт функционировал должным образом на смартфонах. Любой приличный шаблон CSS должен использовать адаптивный дизайн, чтобы сайт отлично работал на экране любого размера. Если ваш выбранный не делает, переключитесь на тот, который делает.Хорошо написан — Загрузите шаблон и посмотрите на код, прежде чем использовать его. Он должен быть чистым, хорошо структурированным и легко редактируемым. Он также должен быть SEO-ориентированным, с правильным использованием заголовков и тегов заголовков.Лицензия — Обязательно проверьте лицензию для выбранного вами шаблона CSS. Многие из них доступны по лицензии Creative Commons, но различные версии этой лицензии определяют, можете ли вы редактировать шаблон, можете ли вы использовать его в коммерческих целях, и нужно ли указывать первоначального дизайнера.
Addons — Некоторые разработчики шаблонов CSS предлагают свою работу на основе «freemium». Вы получаете шаблон бесплатно, но у вас есть возможность оплатить дополнительные настройки, чтобы сделать его уникальным для вашего сайта.После всего этого давайте рассмотрим лучшие места, где можно найти бесплатные шаблоны CSS.
1. Templated.co Эта потрясающая коллекция из более чем 800 шаблонов CSS содержит стили для каждого класса веб-сайта. Все они созданы специально для сайта, поэтому вы не должны видеть их где-либо еще.
Styleshout предлагает большой выбор бесплатных и платных шаблонов, первые из которых выпущены под лицензией Creative Commons.
Эта супер-стильная коллекция шаблонов также очень популярна. Большинство из них были загружены сотни тысяч раз, и легко понять, почему.
То, что Freebiesbug испытывает недостаток в количестве, это больше, чем восполняет качество. Сайт, на котором молодые разработчики демонстрируют свои навыки, включает в себя множество высококачественных, премиальных дизайнов.
Free-CSS.com — это веб-сайт без излишеств — на момент написания — около 2503 бесплатных шаблонов, а также множество премиальных шаблонов на случай, если вы все еще не можете найти то, что ищете.
28 страниц бесплатных CSS-шаблонов, в основном с использованием современных сеточных макетов на одной странице. Если просто то, что вы ищете, то это место, чтобы посмотреть. Дизайн чистый, привлекательный и простой в настройке.
Maglev — это одностраничный шаблон веб-сайта, который можно просмотреть в действии на сайте boag.online.
Шаблоны Pixel Buddha не ограничиваются веб-сайтами, они также включают в себя рассылки по электронной почте.
Около 500 бесплатных шаблонов доступны от Templatemo. Одними из лучших являются те, которые вырвались из системы сетки в стиле Bootstrap, чтобы попробовать что-то другое.
Bootstrap — невероятно популярная интерфейсная среда, которая позволяет вам создавать высококачественные веб-сайты в кратчайшие сроки. Тем не менее, это займет немного времени, чтобы узнать, где вступает Start Bootstrap.
Наконец, кое-что более практическое. Bootswatch предлагает 16 тем с открытым исходным кодом для стилей сайтов, созданных с помощью Bootstrap.
Вообще говоря, есть два способа использования шаблонов. Вы либо используете их как есть, либо используете их как основу для своего собственного дизайна.
Опасность при использовании шаблонов заключается в том, что вы в конечном итоге получаете сайт, который идентичен чужому. Выберите популярный шаблон, и там могут быть буквально десятки тысяч идентичных сайтов. Это главный аргумент в пользу их настройки.
