Bootstrap

Дополнения к Bootstrap

Изменяйте Bootstrap с помощью LESS. Less - это CSS-препроцессор, который позволяет использовать переменные, функции, операции и еще много приятного для работы с Bootstrap CSS.

Разрабатывайте, используя LESS

LESS CSS

Изначально Bootstrap был разработан с использованием LESS. LESS - это динамический язык для создания каскадных таблицей стиля, созданных нашим хорошим другом, Алексисом Селлиером (Alexis Sellier). Это позволило сделать разработку CSS более быстрой, простой и веселой.

Почему LESS?

Один из создателей Bootstrap'а написал следующий пост, об использовании LESS, вот краткое содержание:

  • Bootstrap компилируется в ~6x раз быстрее Less по сравнению с Sass
  • Less написан на JavaScript.

Что включено?

Как расширение CSS, LESS включает в себя переменные, функции для повторно используемых кусков кода, простейшие математические операции, вложение, и даже функции цвета.

Как узнать больше?

Посетите официальный сайт http://lesscss.org (англ.) или Русскую версию сайта на http://lesscss.ru.

Методы компиляции Bootstrap с использованием LESS

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

Способы компиляции

Через Node.js и makefile

Установите LESS-компилятор и uglify-js глобально с npm путем запуска следующей команды:

$ npm install -g less uglify-js

После установки запустите make из под root-пользователя директории с bootstrap.

Дополнительно, если у Вас установлен watchr Вы можете запустить make watch для автоматического ребилдинга каждый раз, после редактирования файла в библиотеке bootstrap (Это не обязательно, просто удобный метод).

Командная строка

Установите LESS command line tool через Node и запустите следующую команду:

$ lessc ./less/bootstrap.less > bootstrap.css

Не забудьте добавить --compress в команду, если вы экономите байты!

Через Javascript

Скачайте последний Less.js и добавьте его в свой Bootstrap-проект в тег <head>.

<link rel="stylesheet/less" href="/path/to/bootstrap.less">
<script src="/path/to/less.js"></script>

Для перекомпиляции .less файлов, сохраните их и перезагрузите страницу. Less.js автоматически компилирует на лету и загружает файлы в локальное хранилище.

Неофициальное приложение для Mac

Неофициальное приложение для Mac следит за директориями содержащими .less файлы и компилирует их после каждого изменения.

Поддерживает автоматическую компиляцию и содержит еще много других полезных настроек.

Еще приложения для Mac

Crunch

Crunch - хороший редактор и компилятор LESS файлов работает на Adobe Air.

CodeKit

Созданный тем же парнем, что и не официальное приложение для Mac. CodeKit - это приложение для Mac которое, компилирует LESS, SASS, Stylus и CoffeeScript файлы.

Simpless

Приложение для Mac, Linux и PC работает по принципу drag and drop, компилирует LESS файлы. В дополнение имеет открытый код на GitHub.

Используйте стандартные средства

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

Файловая структура

Загрузите Bootstrap в последней версии и поместите в Ваш проект. На пример, у Вас должно получиться нечто подобное:

  app/
  ├── layouts/
  └── templates/
  public/
  ├── css/
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Используйте starter шаблон

Скопируйте следующий HTML-код для начала работы.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Разделение Bootstrap и Вашего приложения

Работая с собственным CSS, JS файлами - придерживайтесь следующей структуры:

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>