Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Jade
Webdesign

Создание сниппетов Bootstrap при помощи Jade

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Radislaw Yalilow (you can also view the original English article)

Final product image
What You'll Be Creating

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

Этот предварительно созданный код предусматривает все, что вы могли хотеть в одном месте, от типографии и контроля макета до десятков “компонентов”, таких как навигация, кнопки, панели, оповещения и многое другое. 

Так как вы будете тратить мало времени на написание CSS и javascript для сайта на Bootstrap, разработка становится почти полностью посвящена созданию HTML. Таким образом, если вы сможете найти способ, чтобы сделать написание HTML таким быстрым и гладким, насколько это возможно, весь ваш рабочий процесс Bootstrap может стать невероятно эффективным.

Создание еще более мощного HTML

Одним из наиболее эффективных инструментов, который можно использовать для ускорения написания HTML является Jade, шаблонизатор с открытым исходным кодом, который является полностью бесплатным для использования.

Jade может идти под знаменем “языка шаблонов”, но не позволяйте этому заставить вас думать, что вы должны работать с “шаблонами”, чтобы задействовать его преимущества. Также его можно использовать в двух дополнительных направлениях, которые могут быть чрезвычайно полезными для всех видов написания HTML:

  • В качестве инструмента сокращения кода HTML, который позволит вам значительно уменьшить количество кода.
  • В качестве «препроцессора» для HTML, который работает так же, как CSS препроцессоры, добавляя возможность использовать логику и создавать «миксины» - повторно используемые блоки кода, которые позволяют придерживаться принципов DRY.

Если вы часто используете HTML, и особенно, если вы сильно сосредоточены на HTML, как например при использовании Bootstrap, вы обнаружите, что как только попробуете Jade вы никогда больше не будете создавать проекты без него.

Сниппеты для Bootstrap созданные при помощи Jade 

В этом руководстве мы будем использовать Jade для создания некоторых из наиболее известных компонентов фреймворка Bootstrap.

Необработанный HTML в Jade

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

Обратите внимание, мы сфокусируемся на сниппетах Jade, и не будем рассматривать как работает сам Jade. Тем не менее, главное на что нужно обратить внимание в примерах кода, которые вы видите ниже, это то, что каждый уровень табуляции в Jade создает необходимую вложенность элементов в конечном HTML.

Например, эти отступы в Jade:

скомпилируются в следующий код HTML

Чтобы узнать больше о том, как работает Jade посмотрите бесплатные вводные уроки из моего недавнего курса "Скоростная HTML разработка с Jade".

Миксины Jade

Миксины Jade - это повторно используемые блоки кода. Если у вас есть некоторый код, который вам нужно использовать неоднократно, то можете определить его под миксин. Затем каждый раз, когда вы используете этот миксин, он будет выводить код для вас автоматически.

Например следующие mixin под названием «article»:

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

и скомпилируется в этот HTML:

После преобразования наших компонентов Bootstrap из чистого HTML в Jade мы будем преобразовывать их дальше - в миксины Jade. Мы не будем использовать миксины абсолютно для всего, а только там, где их использование позволит сэкономить значительное количество времени, усилий и избавит от дублирования кода.

Кроме того, даже когда мы используем миксины, мы будем по-прежнему включать примеры кода Jade для соответствующего компонента. Таким образом, вы увидите, как разворачивается процесс перехода из кода HTML в миксины Jade.

Подготовка к использованию Jade 

Первое, что вам нужно сделать, это подготовить себя для работы с Jade. Вам понадобятся среда для написания кода, а также автоматическая компиляция кода Jade в HTML.

Перейдите к курсу "Скоростная HTML разработка с Jade" и просмотрите второй урок курса, "Быстрая и легкая настройка". Он бесплатный и даст вам все, что вам необходимо знать, для настройки и начала использования Jade.

Для этого урока я рекомендую выбрать метод из видео, который предпологает использование Sublime Text 3 и Prepros.

После того как вы просмотрите это видео и выполните все шаги, продемонстрированные в нем, вы будете готовы к выполнению проекта на Bootstrap.

Создание основы

На этот момент у вас должен быть создан файл с именем «index.jade» Если, сейчас в файле имеется какой либо код, пожалуйста, удалите его, он должен быть совершенно пуст.

Мы начанем с создания основы вашего проекта на Bootstrap -основного HTML документа, добавления необходимых тегов и подгрузки требуемых для Bootstrap файлов CSS и JavaScript плюс jQuery.

Мы воспользуемся преимуществом Bootstrap CDN и Google API для подгрузки из них необходимых файлов, чтобы избавить вас от их скачивания:

Как упоминалось выше, будет показан HTML-код для каждого элемента, который мы создаем, но это исключительно в демонстрационных целях, и вы сможете сравнить его с кодом на Jade.

В любом случае вам не нужно использовать любой увиденный вами необработанный HTML-код. Вместо этого, вы можете сосредоточиться на разделах с кодом Jade, помеченных как Преобразование в Jade и Добавление миксина _____.

Необработанный HTML

Следующий код устанавливает основные элементы страницы doctype, html, head, title, meta и body. Кроме того он загружает CSS & JavaScript плюс jQuery файлы Bootstrap и создает элемент div с классом .container, так что все компоненты, которые мы создадим будут размещаться внутри него.

Преобразование в Jade

Ниже у нас есть Jade эквивалент необработанного HTML, который вы видели в разделе выше. Скопируйте и вставьте этот код в свой файл «index.jade» и сохраните.

После завершения компиляции (автоматически через Prepros), откройте сгенерированный файл «index.html». Вы должны увидеть точное соответствие необработанному HTML.

Хотя мы еще не создаем какие либо миксины на этом этапе, мы заложим некоторые основы для миксинов, которые будут созданы позже.

Подготовка к добавлению миксинов

Создайте файл с именем “mixins.jade” в той же папке, где расположены имеющиеся файлы Jade. Все миксины, которые мы создадим позднее будут записаны в этом файле.

В самом начале файла «index.jade» добавьте этот код:

Этот код импортирует файл с миксинами, делая миксины, которые будут созданы внутри него доступными для файла «index.jade».

Теперь мы готовы перейти к добавлению компонентов Bootstrap.

Примечание: Весь код для последующих компонентов Bootstrap должен быть добавлен в div с классом .container .

Компонент Navbar

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

Необработанный HTML

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

Преобразование в Jade

Обработанный в формат Jade компонент navbar выглядит следующим образом:

Добавление миксинов Navbar

Хотя Jade версия компонента navbar является более краткой и не нее проще смотреть, чем на чем необработанный HTML, мы все еще можем сделать значительные улучшения путем преобразования большей части кода в миксины.

Добавьте следующий код в файл «mixins.jade»:

В приведенном выше коде Jade мы создали пять различных миксинов:

  1. nav - используйте это миксин для инициализации компонента navbar и его родительских элементов, установите стиль его отображения: по умолчанию - “default” или инверсированный - “inverse” и задайте текст, который будет отображаться в разделе брендинга.
  2. nav_item - используйте его для добавления отдельных пунктов меню под миксином nav
  3. nav_item_dropdown - используется для размещения пункта меню с вложенным выпадающим меню
  4. nav_divider - используется для размещения разделителя, вложенного в миксин nav_item_dropdown
  5. nav_header - используется для размещения заголовка в выпадающем меню, после миксина nav_divider

По началу сложно в этом разобраться, но продолжайте чтение, чтобы увидеть, как используются эти миксины на практике и все станет ясно.

Использование миксина Navbar

С миксином navbar размещение компонентов navbar становится намного проще.

Размещение миксина «nav»

Начните, размещая миксин nav, для инициализации общего меню следующим образом:

Между скобками, расположенными после миксина nav, вы помещаете две части информации, называемые аргументами, каждый из которых заключен в кавычки. Первый аргумент задает текст, который будет отображаться в разделе бренда компонента nav. Второй задает уникальный идентификатор для компонента nav.

После компиляции, при просмотре HTML-файла в браузере, вы должны увидеть следующее:

Инвертирование цвета Navbar

Чтобы изменить цвет компонента navbar из дефолтного в инвертированный добавте третий аргумент:

Это переключит цвет navbar, и он будет выглядеть следующим образом:

Размещение элементов Nav

Далее, мы будем использовать миксин nav_item, чтобы добавить три ссылки меню верхнего уровня:

Обратите внимание, что каждый экземпляр миксина nav_item имеет табулированный отступ на один больше чем миксин nav. Это делает каждый nav_item потомком миксина nav .

В этом случае первый передаваемый аргумент, например «index.html», задает ссылку, которая будет применяться к элементу меню. Второй (необязательный) аргумент добавляет класс active, который выделяет пункт меню.

После компиляции ваш компонент navbar должен выглядеть следующим образом:

Размещение пункта меню с выпадающим меню

Теперь мы можем двигаться дальше и добавить еще один пункт меню с размещенным внутри него выпадающим меню, используя миксин nav_item_dropdown:

Это добавит новый элемент со стрелкой, указывающей, что существует дочернее меню и оболочку для самого дочернего меню:

Размещение элементов раскрывающегося меню

В нашем новом выпадающем меню еще нет каких-либо элементов, так что здесь можно снова использовать наш миксин nav_item, чтобы добавить их.

Пока мы здесь, воспользуемся миксинами nav_divider для добавления разделительной линии внутри раскрывающегося списка и nav_header для добавления текста заголовка.

Эти дополнения завершат код компонента navbar:

Этот код компилируется в полностью функциональный компонент navbar на HTML и выглядит следующим образом:

Взгляните на изначальные 30 линий необработанного кода HTML для компонента navbar и представьте, на сколько быстрее может стать создание меню (после того, как созданы многоразовые миксины) когда код сократится до 12 коротких линий Jade.

Сетка: Пример с тремя колонками

Bootstrap поставляется с встроенной системой двенадцати колоночной сетки и набором связанных с ней классов, которые позволяют определить, сколько колонок должна быть ширина элемента при различных размерах экрана, например среднем (md), малом (sm) и очень малом (xs).

Вы можете подробнее прочитать, как работает эта система сеток на http://getbootstrap.com/css/#grid

Изображенные ниже три панели внутри div, начинаются с ширины в 4 колонки каждый на «среднем» или больше размере, переходят на шесть колонок каждый на «малом» размере и 12 колонок на «очень маленьком» размере.

Необработанный HTML

Необработанный HTML, необходимый для этих трех колонок выглядит следующим образом:

Мы начнем с создания блока с классом row, а затем расположим внутри него три блока, содержащих панели изображенные выше.

Каждый блок имеет класс col-md-4, который устанавливает ширину равную четырем колонкам при среднем или большем размерах. Далее идет класс col-sm-6, который устанавливает ширину равную шести колонкам при малом размере и, наконец, класс col-xs-12, устанавливающий ширину равную двенадцати колонкам при очень маленьком размере.

Преобразование в Jade

В коде Jade мы можем пропустить все открывающие и закрывающие теги div и просто непосредственно вводить необходимые классы следующим образом:

Компонент Panel

Теперь давайте создадим компонент panel, который вы видели в предыдущем разделе:

Необработанный HTML

Необработанный HTML для компонента panel является на самом деле довольно простым по сравнению с компонентом navbar. У нас есть всего три блока-обертки с четырьмя классами, необходимыми для добавления правильных стилей:

Преобразование в Jade

Преобразование в Jade делает его еще проще:

Добавление миксина Panel

Мы создаем миксин для этого компонента чтобы спасти вас от необходимости запоминать все четыре имени классов и, как каждые из требуемых дивов должны оборачивать друг друга.

Добавьте следующий код в файл «mixins.jade»:

Использование миксина Panel

Чтобы разместить компонент panel достаточно просто воспользоваться миксином panel, передав текст, который вы хотите использовать в заголовке как аргумент. Затем после пробела введите содержимое панели:

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

Кнопки

Далее мы рассмотрим примеры создания кнопок Bootstrap.

Как и с компонентом panel последнего раздела, необработанный HTML для кнопок достаточно простой, однако, создавая миксины мы убираем необходимость запоминать синтаксис, необходимый для их использования.

Необработанный HTML

Преобразование в Jade

Добавление миксина Button

Этот миксин определяет, какой стиль будет у кнопки, а также применяет ссылку и позволяет изменить размер кнопки.

Использование миксина Button

В своей простейшей форме, миксин button может использоваться с текстом, появляющимся на кнопке помещеным после миксина:

Это создаст кнопку с размером и цветом по умолчанию и с # в качестве ссылки.

Стиль кнопки можно задать, передав название нового стиля в качестве первого аргумента, а назначение ссылки может передаваться в качестве второго аргумента:

Можно также изменить размер кнопки, передавая “large”, “small”, или “mini” в качестве третьего аргумента:

Компонент Alert

Компоненты Alert, очень похожи на кнопки Bootstrap, но проще, поскольку им не нужно иметь назначение ссылки и у них нет различных размеров.

Написание оповещений в необработанном HTML может оказаться немного сложным, так как вы должны помнить все связанные классы и как добавить в них кнопку с символом «x», которая позволяет закрывать оповещения.

Мы объединим их в миксин, так что вам не придется все это запоминать. В следствие размещение оповещений становится легче.

Необработанный HTML

Преобразование в Jade

Добавление миксина Alert

Добавьте следующий код в файл «mixins.jade»

Использование миксина Alert

Чтобы поместить оповещения теперь вы можете просто воспользоваться миксином alert, передавая стиль оповещения в качестве аргумента, а затем напечатать текст оповещения сразу же после пробела:

Компонент Jumbotron

Jumbotron является одним из самых узнаваемых компонентов в Bootstrap.

На этот раз мы не будем создавать для него миксин, так как разместить компонент Jumbotron можно гораздо быстрее используя непосредственно код Jade. Это служит хорошим примером, чтобы показать, что несмотря на все преимущества миксинов, вам не всегда потребуется их использовать, а только если они способны значительно сэкономить ваше время.

Необработанный HTML

Преобразование в Jade и подключение миксина Button

Для размещения Jumbotron в Jade на самом деле достаточно просто набрать .jumbotron на одной линии, затем в последующих строках вложить в него содержимое.

В приведенном ниже коде обратите внимание как мы использовали миксин button, который мы создали ранее, что показывает, как вы можете начать смешивать и сопоставлять эти элементы вместе:

Компонент List Group

Bootstrap предоставляет несколько различных типов компонентов list group (сгруппированный список). Мы создадим три типа сгруппированных списков, следующим образом.

1. Tип "list" (список), образующий элемент ul с дочерними элементами li

2. Тип «links» (ссылки), образующий серию текстовых элементов со ссылками

3. Тип «default» (по умолчанию), создающий текстовые элементы без ссылок

Необработанный HTML

Как и у некоторых компонентов, которые мы рассмотрели выше, HTML-код для сгруппированных списков не очень сложный. Однако мы все еще можем сделать их создание более эффективным, написав серию миксинов, чтобы сократить количество кода.

Необработанный HTML для каждого типа сгруппированных списков выглядит следующим образом:

Тип: List

Тип: Links

Тип: Default

Преобразование в Jade

Каждый из типов сгруппированных списков преобразованный в непосредственный код Jade, выглядит так:

Тип: List

Тип: Links

Тип: Default

Добавление миксина List Group

Также как мы делали с миксином компонента nav, мы создадим несколько миксинов list group, которые могут быть вложены один в другой для создания различных типов сгруппированных списков.

Добавьте следующий код в файл «mixins.jade»:

Первый миксин, listGroup, инициализирует любой из трех типов сгруппированных списков и может принять аргумент, определяя тип сгруппированного списка. Он выведет элемент ul, только если указан тип списка, при его вызове.

Второй миксин, listItem, выведет индивидуальные элементы списка. Если задан тип list, он будет выводить каждый элемент внутри тегов li,  а если задан тип links, он будет выводить каждый элемент как ссылку.

Третий миксин, listHeading, выводит заголовок четвертого уровня h4 вложенный в элемент списка и предназначен для использования с типом links и default сгруппированных списков.

И наконец четвертый миксин listText, выводит текст, который должен быть включен внутрь элемента списка и также предназначен для использования с типом links и default сгруппированных списков.

Использование миксина List Group

Тип: List

Для создания сгруппированного списка типа list воспользуйтесь миксином listGroup, со словом list, переданным в качестве аргумента и миксином listItem, как показано в следующем коде:

Чтобы сделать стиль одного из элементов списка активным передайте слово active в качестве аргумента, как на второй линии в приведенном выше примере кода.

Тип: Links

Для создания сгруппированного списка типа links снова воспользуйтесь миксином listGroup, но на этот раз, в качестве аргумента передайте слово links.

Также, вновь воспользуйтесь миксином listItem, однако теперь, так как он будет содержать ссылки, вы должны каждый раз включать аргумент, который задает назначение этих ссылок. Если вы хотите установить для элемента списка активный стиль, передайте слово «active» на этот раз в качестве второго аргумента.

Вы можете использовать вложенные в каждый миксин listItem миксины listHeading и listText для заголовков и обычного текста в каждом элементе списка:

Тип: Default

Сгруппированный список типа default получается когда вы не передаете какой либо аргумент в миксине listGroup. Он используется почти так же, как сгруппированный список типа links, с той разницей, что вам не нужно передавать какую либо ссылку при использовании миксина listItem:

Темы Bootswatch

Во всех примерах, которые вы видели до сих пор, мы использовали тему Flatly от Bootswatch, загруженную через Bootstrap CDN при помощи этого кода в разделе head:

Последним миксином, который мы собираемся добавить в наш проект является миксин «Bootswatch».

Этот mixin гораздо облегчит переключение тем, а также обновление URL-адреса ваших стилей в дальнейшем, если это понадобится. Это особенно полезно, если вам нужно обновить несколько HTML-файлов за раз.

Добавление миксина Bootswatch

Добавьте следующий код в файл “mixins.jade”:

Использование миксина Bootswatch

В основном документе замените строку, которая ссылается на стили Bootswatch на это:

Теперь, чтобы изменить тему на другую, просто замените слово flatly на название новой темы. Например, чтобы перейти к теме Superhero:

Это сразу изменит тему вашего сайта на эту:

Подводим итоги

Я надеюсь, вы с удовольствием воспользуетесь этими сниппетами Jade при работе с проектами Bootstrap, и что это сэкономит уйму вашего времени.

Если есть что-то, что вы хотели бы сделать иначе в своих собственных проектах Bootstrap, красота миксинов Jade позволит вам написать их и настроить по собственному усмотрению.

Jade не только невероятно мощный, но и интуитивно понятный язык, который вы можете выбрать и довольно быстро начать использовать на практике.

Дальнейшее чтение

  • Я предлагаю вам взглянуть на мой курс, "Скоростная HTML разработка с Jade", где я проведу вас через все, что вам нужно, чтобы узнать основы и некоторые из самых полезных элементов Jade чуть более чем за два часа.
  • Для большей информации о Jade посетите официальный сайт - http://jade-lang.com
  • И, чтобы узнать еще больше о Bootstrap, посетите http://getbootstrap.com
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.