Yii2: Customizing Bootstrap with Less
In Yii2 and many of its third-party extensions, Bootstrap is used. Usually, Bootstrap is not replaced by something else, because it is quite convenient to work with it, and it looks quite aesthetic. If you wanted to refresh the application interface, it may not be very pleasant to redefine heaps of css-properties. I will not offer everyday “skins” from bootswatch, it is more pleasant to take a preprocessor and redefine several variables. You can transform the look of the site in this way thoroughly. I will show with the example of Less, since the actual bootstrap is written on it. If desired, you can replace the default package with Sass or Stylus and change the code below to the preprocessor, respectively.
To compile Less we need NodeJS. It is very easy to install, you can take it here . We also need Gulp, through which we will manage the process.
To install Gulp globally, you can do:
')
npm i -g gulp Customize Gulp
We create package.json in the root, inside we write {}.
Now we will execute:
npm i -D gulp gulp-less gulp-notify gulp-plumber gulp-util gulp-autoprefixer Create gulpfile.js with the following code:
'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']); Preparing Less
Copy content from web / css / site.css to web / less / site.less .
Next we create the files: bootstrap.less, _variables.less and _mixins.less .
Fill in bootstrap.less with this code:
Long copy-paste
/*! * 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 "../../vendor/bower/bootstrap/less/normalize.less"; @import "../../vendor/bower/bootstrap/less/print.less"; @import "../../vendor/bower/bootstrap/less/glyphicons.less"; // Core CSS @import "../../vendor/bower/bootstrap/less/scaffolding.less"; @import "../../vendor/bower/bootstrap/less/type.less"; @import "../../vendor/bower/bootstrap/less/code.less"; @import "../../vendor/bower/bootstrap/less/grid.less"; @import "../../vendor/bower/bootstrap/less/tables.less"; @import "../../vendor/bower/bootstrap/less/forms.less"; @import "../../vendor/bower/bootstrap/less/buttons.less"; // Components @import "../../vendor/bower/bootstrap/less/component-animations.less"; @import "../../vendor/bower/bootstrap/less/dropdowns.less"; @import "../../vendor/bower/bootstrap/less/button-groups.less"; @import "../../vendor/bower/bootstrap/less/input-groups.less"; @import "../../vendor/bower/bootstrap/less/navs.less"; @import "../../vendor/bower/bootstrap/less/navbar.less"; @import "../../vendor/bower/bootstrap/less/breadcrumbs.less"; @import "../../vendor/bower/bootstrap/less/pagination.less"; @import "../../vendor/bower/bootstrap/less/pager.less"; @import "../../vendor/bower/bootstrap/less/labels.less"; @import "../../vendor/bower/bootstrap/less/badges.less"; @import "../../vendor/bower/bootstrap/less/jumbotron.less"; @import "../../vendor/bower/bootstrap/less/thumbnails.less"; @import "../../vendor/bower/bootstrap/less/alerts.less"; @import "../../vendor/bower/bootstrap/less/progress-bars.less"; @import "../../vendor/bower/bootstrap/less/media.less"; @import "../../vendor/bower/bootstrap/less/list-group.less"; @import "../../vendor/bower/bootstrap/less/panels.less"; @import "../../vendor/bower/bootstrap/less/responsive-embed.less"; @import "../../vendor/bower/bootstrap/less/wells.less"; @import "../../vendor/bower/bootstrap/less/close.less"; // Components w/ JavaScript @import "../../vendor/bower/bootstrap/less/modals.less"; @import "../../vendor/bower/bootstrap/less/tooltip.less"; @import "../../vendor/bower/bootstrap/less/popovers.less"; @import "../../vendor/bower/bootstrap/less/carousel.less"; // Utility classes @import "../../vendor/bower/bootstrap/less/utilities.less"; @import "../../vendor/bower/bootstrap/less/responsive-utilities.less"; //@import "../../vendor/bower/bootstrap/less/theme.less"; _Variables.less file:
@import "../../vendor/bower/bootstrap/less/variables.less"; @icon-font-path: "http://netdna.bootstrapcdn.com/bootstrap/3.3.6/fonts/"; _Mixins.less file:
@import "../../vendor/bower/bootstrap/less/mixins.less"; @import "_variables.less"; In the config / web.php file, configure the Asset Manager component as follows:
'assetManager' => [ 'bundles' => [ 'yii\bootstrap\BootstrapAsset' => [ 'sourcePath' => null, 'basePath' => '@webroot', 'baseUrl' => '@web', 'css' => ['css/bootstrap.css'], ], ], ], We try
For example, add the following lines to _variables.less :
@navbar-inverse-bg: #00849D; @navbar-inverse-link-color: white; @brand-success: #A0CD1B; @body-bg: #ECFAFB; The list of available variables can be found in the file /vendor/bower/bootstrap/less/variables.less .
Now execute the gulp command and see what happens.
The colors have also changed for all the states of the elements and for everything that is tied to these colors. Another small bonus is the ability to use Bootstrap variables in site.less (just import the _variables.less ).
It makes sense to add the node_modules and web / css folder to .gitignore .
Less is compiled automatically with every change while Gulp is running.
I hope the recipe will be useful to someone.
Source: https://habr.com/ru/post/314184/
All Articles