Сегодня же мы займемся оформлением веб-страницы из прошлой части статьи при помощи SASS. По окончании данной части вы точно перейдете на новый уровень в области разработки красивых веб-сайтов и приложений!
Что мы разрабатываем
* Демо
* Скачать файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Этап 1: Создаем пользовательский SASS-файл
Не забывайте, что мы используем тот же набор файлов, который использовали в первой части нашего руководства. Также убедитесь, что вы проследовали по всем этапам. Сначала компилятор Compass должен просмотреть всю папку для того, чтобы убедиться, что все изменения, внесенные в SASS-файлы, были конвертированы в соответствующий CSS-файл.
Мы можем оформить вышеприведенную страницу несколькими путями:
* Мы можем оформить родные правила bootstrap прямо сейчас, внося изменения в bootstrap.css в соответствии с нашим дизайном.
* Мы можем переписывать правила bootstrap, используя другой файл каскадных таблиц стилей.
Последний пункт всегда будет на ваше усмотрение (мы уже обсуждали в первой части статьи, что желательно всегда иметь отдельный файл таблиц стилей, чтобы переписывать правила любых плагинов или платформ), так как когда дело доходит до нескольких шаблонов на страницу, нам нужно будет просто изменить пользовательский CSS-файл другим, чтобы применить другие шкурки к шаблону. Итак, давайте создадим SASS-файл (расширение SASS-файлов .scss), и поместим его в папку sass. Так как на странице говорится о 1stwebdesigner, мы назовем его ’1wd.scss’, и включим его в HTML-документ. Также убедитесь, что вы включаете после строки, которая включает все стили bootstrap. Сейчас структура наших папок должна выглядеть следующим образом:
Этап 2: Переписываем правила
Перед тем как приступить к оформлению, нам хотелось бы добавить родительский класс к тэгу страницы body, чтобы мы всегда могли сгруппировать все пользовательские правила, обратившись к этому классу. Итак, давайте начнем с того, что зададим тэгу body нашей HTML-страницы класс под названием fwd. Это поможет нам удерживать первый уровень группирования с точки зрения селекторов, и позволит быть уверенными в том, что мы не переписываем селекторы bootstrap напрямую.
Этап 3: Оформление шаблона
В наших стилях мы также будем использовать немного CSS. Давайте включим CSS3-миксины в наши файлы .scss, чтобы мы могли использовать большинство свойств CSS3, используя лишь одну строку кода.
Давайте начнем с элемента header
Давайте сравним наш текущий элемент header и оформленный:
Ключевые изменения, которые мы внесем, представляют собой:
1. Изменение основных навигационных пунктов на
* Coding
* Freebies
* Inspiration
* Tutorials
* Web Design
* WordPress
2. Внесение логотипа 1WD
Контейнер brand, который содержит текст «Project name» должен быть оформлен таким образом, чтобы в него поместить логотип. Давайте добавим изображение логотипа в форме элемента bg, и скроем текст при помощи text-indent, и зададим относительную высоту и ширину, а также добавим margin-top 5px для того, чтобы расположить равномерно по вертикали. Теперь оформленный стиль для brand будет выглядеть так:
.brand{
text-indent:-999px;
width:169px;
height:26px;
padding:0;
margin:5px 0 0 0;
background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
no-repeat center center;
}
3. Изменяем bg color и добавляем границу контейнеру header (ссылайтесь на отрывок кода, добавленный в конце 4-го пункта).
Давайте стилизуем контейнер nav-inner, добавив bg-color и границу.
4. Стилизуем пункты навигации и добавляем border-radius.
Пункты навигации находятся в контейнере с классом nav. Нам нужно стилизовать тэг «а» в рамках тэга «li», который идет в классе nav. Давайте добавим 5 пикселей border-radius (строка №11) при помощи CSS3-миксина, который (@include border-radius(5px) генерирует все необходимые для браузера правила в сгенерированный CSS-файл), а также относительное поле и отступ вместе с hover bg-color (строка №12. ‘&’ добавляется в виде префикса для обозначения группирования селектора, который следует за знаком. В данном случае ‘&:hover’ связывает псевдо-класс :hover с родительским селектором, которым является «а»). Как только мы добавим все необходимые стили, секция navbar будет выглядеть так:
.navbar{
.navbar-inner{
background:#eee;
border-bottom:solid 1px #ccc;
.nav{
margin-left:20px;
li{
a{
padding:5px;
margin:5px 5px 0 0;
@include border-radius(5px);
&:hover{
background:#000;
};
}
}
}
.brand{
text-indent:-999px;
width:169px;
height:26px;
padding:0;
margin:5px 0 0 0;
background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)
no-repeat center center;
}
}
}
hero-unit
Давайте сравним текущий hero-unit с оформленным:
Ключевые изменения, которые мы здесь внесем, представляют собой (конечный код для этого раздела приведен в конце данного списка):
1. Изменяем цвет фона контейнера и формы внутри него.
Давайте оформим контейнер hero-unit, добавив иной цвет фона (#464646), и цвет текста (#fff) (строка №2).
2. Стилизуем текст заголовка и call-for-action кнопки
Для того чтобы текст «Welcome» был другого цвета, нам нужно обернуть его внутрь тэга. Давайте добавим его с помощью тэга span, стилизуем его, и применим text-shadow для всего заголовка H1 (строки №4-8).
3. Оформляем форму с полями авторизации
Давайте добавим закругленные на 10 пикселей углы к форме посредством CSS3-миксина (строка №15), а bg-color #>6d6b6b (строка №16), а также стилизуем заголовок и поля ввода (строки от 17 до 30).
4. CSS-код для hero-unit теперь выглядит так:
.hero-unit{
background:#464646;
color:#fff;
h1{
@include text-shadow(#000 1px 5px 10px);
span{
color:#F5821F;
}
}
.btn-info{
padding:15px;
font-size:1.2em;
}
form{
@include border-radius(10px);
background:#6d6b6b;
label{
font-weight:bold;
font-size:1.2em;
&.checkbox{
font-weight:normal;
font-size:1em;
color:#2d2d2d;
}
}
input{
background:#464646;
border:solid 1px #545252;
@include box-shadow(inset #2d2d2d 1px 0px 3px);
color:#8b7b6c;
}
}
}
Теперь следует раздел с миниатюрами
Давайте сравним наш текущий раздел с миниатюрами с оформленным:
Ключевые изменения, которые мы здесь внесем, представляют собой (конечный код для этого раздела приведен в конце данного списка):
1. Стилизуем контейнеры для миниатюр и добавляем соответствующие изображения.
Давайте добавим закругленные на 10 пикселей углы к контейнеру с миниатюрами (строка №2), а также bg-color (строка №3).
2. Позиционируем заголовок каждой миниатюры над миниатюрами.
Давайте будем использовать позиционирование и абсолютное позиционирование для того, чтобы расположить заголовок над миниатюрами. Для того чтобы реализовать это, нам нужно задать position:relative родительскому тэгу заголовка (строка №5), а затем позиционировать заголовок (h5) соответственно таким образом, чтобы он появлялся только сверху миниатюр и по bottom-line изображения, а также давайте добавим тень текста (строки от 8 до 13).
3. Код данной секции теперь выглядит так:
.thumbnail{
@include border-radius(10px);
background:#55626B;
.caption{
position:relative;
color:#ccc9c9;
h5{
position:absolute;
top:-19px;
left:10px;
font-size:2em;
color:#fff;
@include text-shadow(#000 1px 5px 10px);
}
}
}
Наконец-то дошли до подвала
Подвалу мы просто задаем пользовательскую текстуру, добавляем border-radius и увеличим отступы контейнера до 20 пикселей. Пожалуйста, ссылайтесь на код подвала, приведенный ниже:
footer{
padding:20px;
margin-top:30px;
@include border-radius(10px 10px 0 0);
color:#fff;
background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/bg_header.jpg) repeat left top;
}
Наконец, мы завершаем всё оформление и разработку кода. Теперь наша страница выглядит так:
Это всего лишь введение в коллективную работу SASS и TBS. В CSS-файле, который мы использовали, мы можем использовать переменные, сохраняя в них значения цветов, а затем импортируя переменную CSS в основные таблицы стилей в самом начале. Учитывая сложность каждой страницы, все свойства SASS могут в значительной степени облегчить процесс разработки. Миксины, и переменные, и многое другое – всё это в ваших руках, и вы можете использовать это по необходимости.
Начните хотя бы с малого, если вы планируете разрабатывать проекты при помощи SASS. Надеемся услышать ваши отзывы и, возможно, примеры ваших собственных работ!