Yii2: Кастомізація Bootstrap з допомогою Less

image

У Yii2 і безлічі його сторонніх розширень використовується Bootstrap. Зазвичай Bootstrap не замінюють чимось іншим, адже з ним досить зручно працювати, і на вигляд він цілком естетичний. Якщо захотілося освіжити інтерфейс програми, то може бути не дуже втішно перекрити купи css-властивостей. Обігові «шкурки» з bootswatch пропонувати не буду, приємніше взяти препроцесор і перевизначити кілька змінних. Перетворити вигляд сайту таким способом можна грунтовно. Покажу на прикладі Less, так як актуальний бутстрап написаний на ньому. При бажанні можна підмінити дефолтний пакет на Sass-івський або Stylus-івський і змінити наведений далі код відповідно препроцессору.

Для компіляції Less нам знадобиться NodeJS. Встановити його дуже просто, взяти можна тут. Ще нам знадобиться Gulp, через який ми будемо керувати процесом.

Що-б встановити Gulp глобально, можна виконати:

npm i -g gulp

Налаштовуємо Gulp
Створюємо докорінно package.json, усередині пишемо {}.

Тепер виконаємо:

npm i -D gulp gulp-less gulp-notify gulp-plumber gulp-util gulp-autoprefixer

Створюємо gulpfile.js з наступним кодом:

'use strict';

var gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
gutil = require('gulp-util'),
notify = require("gulp-notify"),
plumber = require('gulp-plumber'),
path = require('path');

const LESS_DIR = './web/less',
CSS_DIR = './web/css',
AUTOPREFIXER_RULES = [
'last 15 versions'
];

var handleError = function (err) {
gutil.beep();
gutil.log(err);
this.emit('end');
gulp.src(err.filename)
.pipe(notify({
title: path.basename(err.filename) + ' (' + err.line + ':' + err.column + ')',
message: err.message
}));
};

gulp.task('less', function () {
gulp.src(LESS_DIR + '/**/*')
.pipe(plumber({errorHandler: handleError}))
.pipe(less())
.pipe(autoprefixer(AUTOPREFIXER_RULES))
.pipe(gulp.dest(CSS_DIR));
});

gulp.task('watch', function () {
gulp.watch(LESS_DIR + '/**/*', ['less']);
});

gulp.task('default', ['less', 'watch']);

Готуємо Less
Копіюємо вміст web/css/site.css web/less/site.less.
Поруч створимо файли: bootstrap.less, _variables.less і _mixins.less.
Заповнюємо bootstrap.less таким кодом:

Довга копіпаста
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

// Core variables and mixins
@import "_variables.less";
@import "_mixins.less";

// Reset and dependencies
@import "../../виробника/bower/bootstrap/less/normalize.less";
@import "../../виробника/bower/bootstrap/less/print.less";
@import "../../виробника/bower/bootstrap/less/glyphicons.less";

// Core CSS
@import "../../виробника/bower/bootstrap/less/scaffolding.less";
@import "../../виробника/bower/bootstrap/less/type.less";
@import "../../виробника/bower/bootstrap/less/code.less";
@import "../../виробника/bower/bootstrap/less/grid.less";
@import "../../виробника/bower/bootstrap/less/tables.less";
@import "../../виробника/bower/bootstrap/less/forms.less";
@import "../../виробника/bower/bootstrap/less/buttons.less";

// Components
@import "../../виробника/bower/bootstrap/less/component-animations.less";
@import "../../виробника/bower/bootstrap/less/dropdowns.less";
@import "../../виробника/bower/bootstrap/less/button-groups.less";
@import "../../виробника/bower/bootstrap/less/input-groups.less";
@import "../../виробника/bower/bootstrap/less/navs.less";
@import "../../виробника/bower/bootstrap/less/navbar.less";
@import "../../виробника/bower/bootstrap/less/breadcrumbs.less";
@import "../../виробника/bower/bootstrap/less/pagination.less";
@import "../../виробника/bower/bootstrap/less/pager.less";
@import "../../виробника/bower/bootstrap/less/labels.less";
@import "../../виробника/bower/bootstrap/less/badges.less";
@import "../../виробника/bower/bootstrap/less/jumbotron.less";
@import "../../виробника/bower/bootstrap/less/thumbnails.less";
@import "../../виробника/bower/bootstrap/less/alerts.less";
@import "../../виробника/bower/bootstrap/less/progress-bars.less";
@import "../../виробника/bower/bootstrap/less/media.less";
@import "../../виробника/bower/bootstrap/less/list-group.less";
@import "../../виробника/bower/bootstrap/less/panels.less";
@import "../../виробника/bower/bootstrap/less/responsive-embed.less";
@import "../../виробника/bower/bootstrap/less/wells.less";
@import "../../виробника/bower/bootstrap/less/close.less";

// Components w/ JavaScript
@import "../../виробника/bower/bootstrap/less/modals.less";
@import "../../виробника/bower/bootstrap/less/tooltip.less";
@import "../../виробника/bower/bootstrap/less/popovers.less";
@import "../../виробника/bower/bootstrap/less/carousel.less";

// Utility classes
@import "../../виробника/bower/bootstrap/less/utilities.less";
@import "../../виробника/bower/bootstrap/less/responsive-utilities.less";
//@import "../../виробника/bower/bootstrap/less/theme.less";


Файл _variables.less:
@import "../../виробника/bower/bootstrap/less/variables.less";
@icon-font-path: "http://netdna.bootstrapcdn.com/bootstrap/3.3.6/fonts/";

Файл _mixins.less:
@import "../../виробника/bower/bootstrap/less/mixins.less";
@import "_variables.less";

У файлі config/web.php налаштовуємо компонент «Asset Manager» наступним чином:
'assetManager' => [
'bundles' => [
'yii\bootstrap\BootstrapAsset' => [
'sourcePath' => null,
'basePath' => '@webroot',
'baseUrl' => '@web',
'css' => ['css/bootstrap.css'],
],
],
],

Пробуємо
Для прикладу додамо _variables.less наступні рядки:

@navbar-inverse-bg: #00849D;
@navbar-inverse-link-color: white;
@brand-success: #A0CD1B;
@body-bg: #ECFAFB;

Список доступних змінних можна подивитись у файлі /виробника/bower/bootstrap/less/variables.less.

Тепер виконаємо команду gulp і подивимося, що вийшло.



Кольори змінилися також для всіх станів елементів і для всього, що зав'язано на цих кольорах. Ще невеликим бонусом буде можливість використовувати змінні Bootstrap site.less (просто імпортуйте _variables.less).

Папку node_modules web/css має сенс додати в .gitignore.

Less компілюється автоматично при кожній зміні, поки працює Gulp.

Сподіваюся рецепт буде комусь корисний.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.