Здравствуйте! У цій статті хочу описати свій досвід кастомної верстки з використанням фреймворку Bootstrap 3.
Чим саме ми займатимемося?
- Навчимося встановлювати SCSS-версію Bootstrap через Bower
- Налаштовувати сітку Bootstrap та інші параметри фреймворку (за потребою)
- Вмикати ті чи інші компоненти Bootstrap у «результативний» файл стилів
Конфігурація проєкту
Для початку, давайте визначимося зі структурою каталогів нашого проєкту. Візьмемо, наприклад, таку:
/_data /scss /bootstrap //У цьому каталозі знаходяться змінені нами файли Bootsrap _bootstrap.scss //Підключені компоненти _variables.scss //Змінні style.scss //Зміст підключення інших файлів template.scss //Стилі проекту .bowerrc bower.json gulpfile.js package.json /assets// Містить завантажені бовером скрипти /image //Зображення та стилі проекту index.php
Вміст файлу 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» нашого проєкту, відкриваємо термінал і вводимо:
npm i //Чекаємо поки встановиться bower i //Чекаємо поки встановиться та gulp //Якщо все пройшло без помилок, gulp скомпілює наш css файл (але він поки що порожній)
Налаштовуємо Bootstrap
Відкриваємо файл «_data/scss/style.scss» і вказуємо в ньому шляхи до конфігу bootstrap і файлу стилів нашого проєкту:
@import "bootstrap/_variables.scss"; @import "bootstrap/_bootstrap.scss"; @import "template.scss";
У файлі «template.scss», для класу «.col-md-1» додаємо червону рамку:
.col-md-1 {
border: 1px solid red;
}Це робиться для того, щоб на сайті можна було побачити межі блоків.
Далі трохи складніше. З SCSS-файлів Bootstrap (змінних та компонентів) копіюємо вміст у наші файли.
Тобто з «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».
У нашому файлі шляхів Bootstrap «_data/scss/bootstrap/_bootstrap.scss» автозаміною змінюємо шляхи до рідних файлів Bootstrap. Наприклад:
... @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/normalize"; @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/print"; @import "../assets/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons"; ...
Навіщо це потрібно? Гарне питання. Це потрібно на випадок, якщо ви вирішите оновити вихідники Bootstrap через Bower. Також, якщо ви захочете кастомізувати окремі елементи Bootstrap (наприклад, модальні вікна), ви можете скопіювати їх до каталогу «_data/scss/bootstrap». А у файлі шляхів вказати шлях саме до нього, а не до рідного компонента Bootstrap.
Втім, ніхто не забороняє редагувати самі вихідники Bootstrap. Але в такому випадку будьте уважні при виконанні команди «bower i».
У файлі «_data/scss/bootstrap/_variables.scss» ми змінюємо стилі наших елементів. Для цього можна закоментувати вміст всього файлу, знайти потрібне — розкоментувати й змінити.
Також можна не змінювати весь файл, а копіювати сюди лише те, що ви хочете змінити. Але для наочності зручно бачити весь набір змінних. У разі потреби можна легко повернути вихідне значення тієї чи іншої змінної SCSS.
Наприклад, мої демо-зміни:
//Дефолтний розмір шрифту $font-size-base: 16px; //Шлях до каталогу зі шрифтами $icon-font-path: "../assets/bootstrap-sass/assets/fonts/bootstrap/"; //Нова кількість колонок $grid-columns: 14; //Внутрішній відступ усередині блоку сітки $grid-gutter-width: 10px;
Зробили зміни? Добре, зберігаємо, перевіряємо консоль (чи не вивів gulp помилку). Якщо все гаразд — переходимо в браузер і дивимось результат.
В результаті маємо чотирнадцять колонок, обведених червоною рамкою, і одну іконку. Здається, все працює. До речі, аналогічним чином ви можете формувати і js-файли, включаючи в них лише те, що вам потрібно.
Якщо стаття була корисною — не забудьте поставити лайк. Дякую!
