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

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



В предыдущих статьях мы уже рассказывали вам о лучшей платформе веб-разработки (Twitter Bootstrap) и о супер быстрой технологии разработки кода CSS с помощью SASS, сегодня мы хотим попробовать проделать хоть какую-то работу. Придется немного запачкать руки, чтобы создать веб-страницу с нуля при помощи Twitter Bootstrap и SASS.

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

Данное руководство будет разделено на 2 части, в которых мы приведем подробный и полноценный обзор процессов и концепта данного подхода. В первой части мы расскажем о подробностях разработки структуры каталогов и создания разметки для шаблона при помощи TBS. Вторая часть охватит детальный разбор процесса оформления шаблона при помощи SASS.

Перед тем как начать разработку кода убедитесь, что следующие пункты установлены/настроены/скачаны на ваш компьютер:

* Платформа Twitter Bootstrap. Как мы уже говорили в предыдущих статьях, TBS – это развивающаяся платформа веб-разработки, с очень удобным и расширяемым набором UI-библиотек. Уникальный подход платформы к разработке пользовательских интерфейсов создал широкий резонанс в мире веб. С подобным объектно-ориентированным подходом к созданию UI с использованием ненавязчивого JS и семантической разметки, процесс практического применения платформы покажется вам очень интересным.

* Compass – свободно доступную CSS-платформу. Этот препроцессор использует SASS (для получения более подробной информации о SASS вы можете обратиться к предыдущим статьями нашего сайта). Нужно знать, как использовать миксины, переменные и другие сильные техники, которыми укомплектована данная платформа. Для того чтобы использовать Compass, вам понадобится установленный Ruby.

* Ruby. Если вы используете Windows, то обратитесь за помощью Rubyinstaller, чтобы установить Ruby на вашу систему. Если вы используете Linux или Mac OS X, то можете переходить на страницу загрузки Ruby.

Что мы будем разрабатывать

* Демо
* Скачать файлы

Мы будем разрабатывать стандартный шаблон при помощи платформ. Цель данного руководства не в том, чтобы продемонстрировать вам все ui-элементы в TBS и то, как их применять, но в том, чтобы сконцентрировать вас на работе и на основной идее применения обеих платформ. Нам бы хотелось, чтобы новички в этом деле посвятили изучению платформы как можно больше времени, и как можно сильнее «запачкались» в этом вместо того, чтобы искать отдельные руководства по реализации каждого отдельного элемента. Поверьте, самообучение – это один из лучших подходов, который работает практически во всем, и мы верим в то, что данное руководство может дать вам отличный фундамент для того, чтобы начать разработку страницы собственными силами, при помощи TBS и SASS.

Давайте приступать

(Примечание: для создания данного руководства мы использовали MAC OS X, поэтому инструменты и терминология будут привязаны к данной ОС).

Этап 1: Создание проекта в compass и организация структуры каталогов

Прежде всего нужно правильно организовать структуру каталогов. Давайте начнем с создания проекта Compass. Это важно, так как Compass – это препроцессор и каждый файл Compass должен быть конвертирован в обычный CSS (.css файлы) перед тем, как мы воспользуемся ими.

Как только вы определитесь, с какой папкой вы хотите начать работать, укажите ее расположение в Terminal, и впишите следующую команду для создания проекта Compass:

compass create

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

Данная команда генерирует структуру папок следующим образом

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

Она создает 2 папки: sass и stylesheets, а также .rb-файл config.rb. Очевидно, все файлы, основанные на SASS (с расширениями .scss или .sass) должны быть размещены в папке sass, а сгенерированные css-файлы – в папку stylesheets. В том случае, если ваше приложение использует другую структуру папок, данная структура может быть реорганизована с помощью редактирования файла .rb, нужно лишь обновить названия соответствующих папок для каждого типа (каскадных таблиц, файлов sass и js). По умолчанию, еще 3 SCSS-файла генерируются в папку sass: ie.scss, print.scss, screen.scss и соответствующие css-файлы так же генерируются в папку stylesheets. Эти SCSS-файлы представляют собой лишь стартовые точки без каких-либо включенных правил (хотя в файле screen.scss имеется модуль сброса, мы не будем его использовать, так как TBS предлагает нам собственные правила для сброса внутри файла каскадных таблиц стилей. Так что, нам следует удалить модуль сброса, включенный в screen.css).

После организации структуры папок, нам потребуется механизм, в котором компилятор compass будет продолжать обновлять любые изменения в .scss-файлы в папке sass, и заменять соответствующие файлы в папке stylesheets. Именно это и делает следующая команда (опять же, убедитесь, что терминал направлен на корневой каталог нашего проекта, который в нашем случае имеет название «TBStut»).

compass watch

Она сообщит компилятору Compass, что необходимо провести опрос на наличие изменений в файлах .scss внутри соответствующей папки, указанной в файле config.rb, а также создать и обновить соответствующий .css-файл на папку таблиц стилей, указанной в файле config.rb.

Этап 2: Помещаем TBS-файлы в соответствующее место

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

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

bootstrap.css и bootstrap-responsive.css играют важнейшую роль в платформе, папка img содержит глиф-иконки, которые идут вместе с платформой, а папка js содержит в себе файл bootstrap.js, который включает все необходимые скрипты для правильной работы jQuery-плагинов. Давайте скопируем bootstrap.css и bootstrap-responsive.css в папку stylesheets (вы без проблем можете копировать минимизированные версии, если хотите), файл bootstrap.js в папку js, а затем мы постепенно будем добавлять изображения, которые будем использовать в руководстве, в папку images. Наконец, структура нашей папки выглядит следующим образом:

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

Этап 3: HTML-код для страницы

А теперь принимаемся за работу! Давайте создадим HTML-страницу под названием index.html, и включим туда все необходимые стили TBS, которые у нас находятся в папке stylesheets. Для начала мы воспользовались стартовым шаблоном, доступным по http://twitter.github.com/bootstrap/examples/hero.html. В нем уже есть основная разметка, включая фиксированную верхнюю навигационную панель, раздел с героями, а также контейнер с контентом. Код выглядит следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
</div>
<hr>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Из вышеприведенного кода мы исключили раздел с контентом с 3-мя блоками текста, который присутствовал на странице примера. Давайте немного познакомимся с вышеприведенным кодом, а также постараемся выделить некоторые ключевые моменты.

* Строка 6: этот мета-тэг предназначен для мобильных устройств, и сообщает браузеру, что ширину окна просмотра нужно выставить в соответствии с шириной устройства с исходным значением scale равным 1, что помогает избежать того, что на мобильных устройствах по умолчанию загружается уменьшенная версия страницы.

* Строка 18: Классы ‘navbar’ и ‘navbar-fixed-top’ предназначены для верхней навигационной панели навигации, которая остается зафиксированной вверху (navbar оформляет элемент стилями TBS, предназначенными для навигационной панели, а дополнительный клсс navbar-fixed-top добавляет правило position:fixed, за счет чего панель всегда остается сверху). Container – это естественный класс в TBS, который по умолчанию выравнивается по центру родительского элемента и наследует значение ширины в зависимости от интеграции bootstrap-responsive.css. Если bootstrap-responsive.css не интегрирован в страницу, то данный класс принимает исходную ширину равную 940 пикселям, с учетом того, что в файлах платформы перед скачиванием не было произведено никаких изменений.

* Строка 20: .container – это естественный класс, который по умолчанию выравнивает элемент по центру его родительского элемента.

* Вы вероятно задались вопросом о том, где генерируется разметка с 27 по 33 строки? Как мы уже отмечали выше, так как мы делаем наш шаблон адаптивным, за счет включения bootstrap-responsive.css, данная секция создает область с возможностью нажатия, когда размер экрана сжимается дальше определенного предела. При клике по данной области, будет отображено выпадающее меню. Класс nav-collapse играет очень важную роль в данном случае. Здесь мы эффективно используем атрибуты данных, и именно таким образом TBS позволяет использовать эти атрибуты по всей платформе.

* Строка 39: hero-unit – это TBS класс, предназначенный для раздела с героями.

На данном этапе наша страница выглядит следующим образом:

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

Теперь пришло время добавить на страницу больше деталей и UI-элементов. Давайте добавим форму авторизации внутри раздела с героями.

* Откройте страницу TBS и воспользуйтесь разметкой с «basic form».

* Для того чтобы разместить форму с правой стороны раздела, нам нужно сгруппировать h1 и два тэга p (которые являются дочерними элементами div’а с классом hero-unit) внутри другого тэга для того, чтобы все это выравнивалось соответствующим образом. Сгруппируйте эти тэги внутри div’а и добавьте класс pull-left. Этот класс является естественным классом, используемым TBS для выравнивания любых контейнеров по левой стороне.

* Теперь вставьте код простой формы из вышеприведенного URL, и выровняйте их по правой стороне при помощи pull-right (pull-right выравнивает элементы по правой стороне).

* Так как у нас hero-unit 2 выравниваемых элемента внутри, нам нужно будет его подчистить. TBS использует самую последнюю технику очистки подобных элементов, при помощи псевдо-классов :before и :auto, а также предлагает собственный класс clearfix, который выполняет ту же задачу. Давайте добавим этот класс к hero-unit, и очистим его.

* Обновите текст внутри hero-unit и заново определите форму авторизации за счет добавления поля для ввода пароля и соответствующие ярлыки. На данный момент наша разметка для hero-unit выглядит следующим образом:

<div class="hero-unit clearfix">
<div class="pull-left span5">
<h1>Welcome to 1stwebdesigner</h1>
<p>A one stop resource for web designers and developers</p>
<p><a class="btn btn-primary btn-large">Explore our articles</a></p>
</div>
<div class="pull-right">
<form class="well">
<label>Username</label>
<input type="text" class="span3" placeholder="Type your username">
<label>Password</label>
<input type="password" class="span3" placeholder="Type your password">
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<button type="submit" class="btn">Log me in</button>
</form>
</div>
</div>

Наша страница будет закончена, как только мы выполним все то, что приведено ниже.

* Перейдите к компонентам типографики и возьмите разметку для паттерна миниатюр с заголовком и набором кнопок.

* Мы расположим 2 таких тизера после раздела hero, и один отдельным баннер с правой стороны. Создайте 3-колонную структуру для того, чтобы разместить эти элементы.

* Теперь нам на помощь приходит комбинация из span и row, предложенная в TBS. Классы от span1 до span12 (в том случае, если вы используете 12-колоночную сетку) представляют собой основные колонки, доступные в платформе. Так что, для структуры из 3-х равных по ширине колонок, нам следует использовать 3 тэга с классом span4.

* Также, так как любые классы начинаются со span, выравниваются по левому краю, то здесь нам нужно очистить выравнивание. Кроме clearfix TBS также предлагает нам отличную технику. Используя несколько классов span, родительскому контейнеру будет задан класс row, который будет очищать все внутренние выравниваемые элементы.

* Теперь для того, чтобы разместить баннер по правому краю, давайте воспользуемся стандартным стилем миниатюры, которую нам предлагает TBS. Возьмите разметку стандартного паттерна миниатюры, и разместите ее внутрь div’а с классом span4.

Разметка нижней части с 3-мя равными по ширине колонками должна выглядеть следующим образом:

<div class="row">
<div class="span4">
<div class="thumbnail">
<img alt="" src="http://placehold.it/370x180">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img alt="" src="http://placehold.it/370x180">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/370x300">
</a>
</div>
</div>

И итоговая разметка будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="stylesheets/bootstrap.css" rel="stylesheet">
<link href="stylesheets/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit clearfix">
<div class="pull-left span5">
<h1>Welcome to 1stwebdesigner</h1>
<p>A one stop resource for web designers and developers</p>
<p><a class="btn btn-primary btn-large">Explore our articles</a></p>
</div>
<div class="pull-right">
<form class="well">
<label>Username</label>
<input type="text" class="span3" placeholder="Type your username">
<label>Password</label>
<input type="password" class="span3" placeholder="Type your password">
<label class="checkbox">
<input type="checkbox">Remember me
</label>
<button type="submit" class="btn">Log me in</button>
</form>
</div>
</div>
<div class="row">
<div class="span4">
<div class="thumbnail">
<img alt="" src="http://placehold.it/370x180">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<div class="thumbnail">
<img alt="" src="http://placehold.it/370x180">
<div class="caption">
<h5>Thumbnail label</h5>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
</div>
</div>
</div>
<div class="span4">
<a class="thumbnail" href="#">
<img alt="" src="http://placehold.it/370x300">
</a>
</div>
</div>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

На данный момент наша страница представляет собой следующее:

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

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

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

Она очень актуальна :-)
Комментарий #2: 6 августа 2012 @ 14:51
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
АльОшка, будет вам вторая часть. Сегодня будет.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930