Здравствуйте! В этой статья, хочу описать свой опыт кастомной верстки, с использованием фреймворка Bootstrap 3.
Чем именно мы займемся?
- Научимся устанавливать SCSS версию Bootstrap через Bower
- Настраивать сетку бутстрапа и другие параметры фреймворка (по необходимости)
- Включать те или иные компоненты Bootstrap в «результативный» файл стилей
Конфигурация проекта
Для начала, давайте определимся со структурой каталогов нашего проекта. Возьмем к примеру следующий:
[sourcecode]
/_data
/scss
/bootstrap //В этом каталоге находятся измененные нами файлы Bootsrap
_bootstrap.scss //Подключенные компоненты
_variables.scss //Переменные
style.scss //Содержит подключения других файлов
template.scss //Стили проекта
.bowerrc
bower.json
gulpfile.js
package.json
/assets //Содержит загруженные бовером скрипты
/image //Изображения и стили проекта
index.php
[/sourcecode]
Содержимое файла package.json:
{
"devDependencies": {
"gulp": "*",
"gulp-sass": "*",
"gulp-minify-css": "*"
}
}
Содержимое файла bower.json:
{
"name": "my-project",
"dependencies": {
"bootstrap-sass": "3.3.7",
"jquery": "*"
}
}
Содержимое файла .bowerrc:
{
"directory": "../assets"
}
Параметр «directory», показывает Bower, что загружать крипты нужно в каталог «assets» корня проекта.
Содержимое файла gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
gulp.task('default', function() {
ProjectTheme.scss();
gulp.watch('scss/**/*.scss', ['scss-index']);
});
/* SCSS */
gulp.task('scss-index', function () {
ProjectTheme.scss();
});
var ProjectTheme = {
scss: function()
{
gulp.src('scss/style.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(minifycss())
.pipe(gulp.dest('../image/'));
}
}
Содержимое файла index.php (хотя он нам особо и ненужен):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example page</title> <link href="image/style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-1">1</div> <div class="col-md-1">2</div> <div class="col-md-1">3</div> <div class="col-md-1">4</div> <div class="col-md-1">5</div> <div class="col-md-1">6</div> <div class="col-md-1">7</div> <div class="col-md-1">8</div> <div class="col-md-1">9</div> <div class="col-md-1">10</div> <div class="col-md-1">11</div> <div class="col-md-1">12</div> <div class="col-md-1">13</div> <div class="col-md-1">14</div> </div> <span class="glyphicon glyphicon-film"></span> </div> <script src="assets/jquery/dist/jquery.min.js"></script> <script src="assets/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script> </body> </html>
Создали? Хорошо. Теперь переходим в каталог «_data» нашего проекта, открываем терминал, и вводим:
[sourcecode]
npm i
//Ожидаем пока установится
bower i
//Ожидаем пока установится и
gulp
//Если все прошло без ошибок, gulp скомпилирует наш css файл (но он пока что пуст)
[/sourcecode]
Настраиваем Bootstrap
Открываем файл «_data/scss/style.scss», указываем в нем пути к конфигу бутстрапа и файлу стилей нашего проекта:
[sourcecode]
@import "bootstrap/_variables.scss";
@import "bootstrap/_bootstrap.scss";
@import "template.scss";
[/sourcecode]
В файле «template.scss», для класса «.col-md-1» добавляем красную рамку:
.col-md-1 {
border: 1px solid red;
}
Делается это для того, что бы на сайте можно было увидеть границы блоков.
Далее, чуть по сложнее. Из SCSS файлов бутстрапа переменных и бутстрапа, копируем содержимое в наши файлы.
Т.е. с «assets/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss» в «_data/scss/bootstrap/_variables.scss».
А с «assets/bootstrap-sass/assets/stylesheets/_bootstrap.scss» в «_data/scss/bootstrap/_bootstrap.scss».
В нашем бутстраповском файле путей «_data/scss/bootstrap/_bootstrap.scss». Авто заменой, меняем пути к родным файлам bootstrap. Т.е.:
[sourcecode]
...
@import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/print";
@import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
...
[/sourcecode]
Для чего это делается? Хороший вопрос. Это делается на тот случай, если вы решите обновить бовером исходники бутстрапа. Также, если вы решите кастомизировать определенные элементы бутстрапа (к примеру модальные окна), вы их можете скопировать в катало «_data/scss/bootstrap». А в нашем файле путей, прописать путь к нему, а не к родному бутстраповскому компоненту.
Но вам конечно никто не мешает править сами исходники бутстрапа. Но в таком случае, будьте внимательны при выполнении команды «bower i».
В файле «_data/scss/bootstrap/_variables.scss», мы будем менять стили наших элементов, пр. Для этого, за комментируйте содержимое всего файла. Найдите что вам нужно, расскоментируйте и измените.
Опять же, можете этого не делать, а копировать в этот файл лишь только то, что хотите изменить. Но для наглядности, мне кажется удобно видеть все что есть. При необходимости, вернув исходное значение той или иной переменной scss.
К примеру, мои демо правки:
[sourcecode]
//Дефолтный размер шрифта
$font-size-base: 16px;
//Путь к каталогу со шрифтами
$icon-font-path: "../assets/bootstrap-sass/assets/fonts/bootstrap/";
//Новое количество колонок
$grid-columns: 14;
//Внутренний отступ внутри блока сетки
$grid-gutter-width: 10px;
[/sourcecode]
Внесли правки? Ок, сохраняем, проверяем консоль (не выдал ли наш gulp ошибку). Если все в порядке, переходим в браузер и смотрим результат.
И того, у нас четырнадцать колонок обведенных красной рамкой, и одна иконка. Кажется все работает. Да, кстати, аналогичным образом Вы можете формировать и js файлы, включая в них что вам нужно.
Если статья оказалась вам полезной, не забудьте лайкнуть. Спасибо!
