Кастомизация шаблона "Developer Kit"

Это кросспост статьи автора шаблона http://voffka.the-hut.by/blog/developer-kit/11.html

Не знаю на сколько это справедливо для StartKit, в любом случае на alto есть и developer-kit. Далее текст автора

«Я все чаще убеждаюсь, что большая часть пользователей шаблона не до конца понимает все прелести его кастомизации…

Ребята, этот шаблон можно очень просто стилизировать не имея при этом обширных знаний css и html! Да, чтобы менять структуру шаблона, надо что-то знать, но изменить цвета шаблона, шрифты, формы и прочее проще некуда!

Я не просто так оставляю ссылку на кастомизированную страницу Бустрапа в теме шаблона (файл README.md). Перейдя по ней Вы попадете на страницу где сохранены текущие настройки для дефолтной темы шаблона, изменяя их Вы можете изменить Ваш шаблон как угодно и получить на выходе что-то свое, индивидуальное! Ниже опишу пошагово как это сделать.

Итак, копируем куда-нибудь папку с дефолтной темой шаблона и переименовываем ее по своему усотрению. Заливаем обратно в шаблон. Далее работаем только с ней. Открываем файл README.md и переходим по указанной ссылке. Листаем ее чуть вниз, до раздела Less variables (если разбираетесь в верхней части, можно повыключать ненужное).

Раздел Less variables. Здесь можно настроить ну ооочень многое… Я бы даже сказал, что практически все начиная от цветов и заканчивая дополнительными компонентами. Единственное, что надо сделать — уделить немного времени чтобы разобраться в этом всем разнообразии и поэкспериментировать.

Давайте остановимся на нескольких подразделах для примера. Дальше, думаю, сами поймете.

Возмем первый подраздел — Colors. Из названия понятно, что в нем настраиваются цвета. В них нас больше всего интересует пять полей: @brand-primary, @brand-success, @brand-info, @brand-warning и @brand-danger. Они задают основные цвета нашего шаблона. Понять их предназначение можно и из перевода. В шаблоне именно в таком ключе я старался их и применять. @brand-primary задает «главный» цвет, от его будут зависеть многие элементы, так, например, такого же цвета будут активные вкладки навигации. Если необходимо, его можно переопределять для отдельных элементов в их настройках.

Рассмотрим на примере, чтобы было понятно. Для последней версии шаблона «Developer-Kit» в качестве @brand-success был выбран цвет #16b76f — соответственно все кнопки, имеющие такой класс, стали зеленого цвета. Для @brand-primary был задан синий цвет и те же активные пункты навигации (интересные, новые, обсуждаемые...) должны были быть синего света, но для них я задал другой цвет — красный в настройках подраздела Pills.

Далее давайте рассмотрим раздел Typography. Он отвечает за наши шрифты — какие использовать, какого размера, настройки заголовков. Опять же все просто, необходимый минимум — поля @font-family-sans-serif, @font-size-base, @headings-font-family и @headings-font-weight. Здесь я изменил только @headings-font-family и @headings-font-weight для того, чтобы заголовки выводились шрифтом «Open Sans» жирным начертанием. Меняем по своему усмотрению.

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

Ну и на последок возьмем еще подраздел настроек Navbar. Navbar — это та самая верхняя полоса в шаблоне с названием сайта и навигацией. У него может быть два класса — navbar-default и navbar-inverse (посмотрите примеры на странице компонентов Бутстрапа). В шаблоне используется navbar-inverse, поэтому можно настраивать только ту часть, которая касается только его. Почитайте название полей, по-моему все предельно понятно. Можно настраивать на свой вкус: высота, цвет, цвет ссылок, их состояний, цвет названия сайта… Поэкспериментируйте с настройками, думаю для себя что-то подберете! :)

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

После того, как внесли все необходимые изменения, жмем кнопку «Compile and Download» в самом низу страницы и забираем готовые файлы с нужными изменениями. Осталось закинуть их в нашу тему взамен старых и шаблон приобретает новый вид!

Это, конечно, минимум того, что можно сделать, но уже что-то, уже можно сделать свой сайт не похожим на другие. А дальше… дальше можно вооружившись такими нехитрыми инструментами как Firefox, Firebug и Notepad++ взять и немного подправить файл стилей шаблона, подкорректировать html…

Если получилось сумбурно — извиняйте. Если непонятно — спрашивайте. :)»