—»     —»   Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2
  Раздел: Образование и Изучение   Комментариев: 1  

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2



Представляем вашему вниманию вторую часть руководства, посвященного разработке веб-сайта при помощи Bootstrap и SASS, в которой мы займемся оформлением веб-страницы на основе Twitter Bootstrap при помощи SASS. Для того чтобы все шло своим чередом, мы начнем оттуда, где остановились в прошлой части. Если вы не знаете, о чем идет речь, то вам лучше ознакомиться с первой частью нашего руководства, в которой вы научитесь настраивать систему для TBS, Ruby и Compass.

Сегодня же мы займемся оформлением веб-страницы из прошлой части статьи при помощи SASS. По окончании данной части вы точно перейдете на новый уровень в области разработки красивых веб-сайтов и приложений!

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Что мы разрабатываем

* Демо
* Скачать файлы
Внимание! У вас нет прав для просмотра скрытого текста.


Этап 1: Создаем пользовательский SASS-файл

Не забывайте, что мы используем тот же набор файлов, который использовали в первой части нашего руководства. Также убедитесь, что вы проследовали по всем этапам. Сначала компилятор Compass должен просмотреть всю папку для того, чтобы убедиться, что все изменения, внесенные в SASS-файлы, были конвертированы в соответствующий CSS-файл.

Мы можем оформить вышеприведенную страницу несколькими путями:

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

Последний пункт всегда будет на ваше усмотрение (мы уже обсуждали в первой части статьи, что желательно всегда иметь отдельный файл таблиц стилей, чтобы переписывать правила любых плагинов или платформ), так как когда дело доходит до нескольких шаблонов на страницу, нам нужно будет просто изменить пользовательский CSS-файл другим, чтобы применить другие шкурки к шаблону. Итак, давайте создадим SASS-файл (расширение SASS-файлов .scss), и поместим его в папку sass. Так как на странице говорится о 1stwebdesigner, мы назовем его ’1wd.scss’, и включим его в HTML-документ. Также убедитесь, что вы включаете после строки, которая включает все стили bootstrap. Сейчас структура наших папок должна выглядеть следующим образом:

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Этап 2: Переписываем правила

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

Этап 3: Оформление шаблона

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

Давайте начнем с элемента header

Давайте сравним наш текущий элемент header и оформленный:

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2
Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Ключевые изменения, которые мы внесем, представляют собой:

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 с оформленным:

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2
Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Ключевые изменения, которые мы здесь внесем, представляют собой (конечный код для этого раздела приведен в конце данного списка):

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;
}
}
}

Теперь следует раздел с миниатюрами

Давайте сравним наш текущий раздел с миниатюрами с оформленным:

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2
Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Ключевые изменения, которые мы здесь внесем, представляют собой (конечный код для этого раздела приведен в конце данного списка):

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;
}

Наконец, мы завершаем всё оформление и разработку кода. Теперь наша страница выглядит так:

Разработка веб-сайта при помощи Twitter Bootstrap и SASS – Часть 2

Это всего лишь введение в коллективную работу SASS и TBS. В CSS-файле, который мы использовали, мы можем использовать переменные, сохраняя в них значения цветов, а затем импортируя переменную CSS в основные таблицы стилей в самом начале. Учитывая сложность каждой страницы, все свойства SASS могут в значительной степени облегчить процесс разработки. Миксины, и переменные, и многое другое – всё это в ваших руках, и вы можете использовать это по необходимости.

Начните хотя бы с малого, если вы планируете разрабатывать проекты при помощи SASS. Надеемся услышать ваши отзывы и, возможно, примеры ваших собственных работ!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: SASS, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 12308   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 9 августа 2012 @ 12:50
Написал: АльОшка — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вот спасибо! :-)

Через пару проектов буду пробовать tbs - не работал с ним пока)
а заодно и так давно мною желаемый saas)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Картонные коробки подарочные
Коробки подарочные большие и маленькие из картона оптом и на заказ
taro-print.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31