Создание собственных версий bootstrap
Обновлено: 14.03.2016, 18:12 |
Раздел: Bootstrap
Помимо использования официальных предложенных для скачивания компирированых версий разработчик сайтов может легко и гибко настроить Bootstrap по своему желанию с помощью Gulp и Sass.
В этой статье научимся создавать свой собственный вариант bootstrap.
Установка gulp и bower
Предполагается, что вы установили node.js и нпм на свой компьютер.
Во-первых, установить глобально gulp :
npm install --global gulp или npm install -g gulp
затем установить bower:
npm install -g bower
инициализация проекта
создать новую папку проекта например "mybootstrap". создать такие подпапки:
mybootstrap/
- src/
- css/
- dist/
- css/
- gulpfile.js
объяснение структуры папок:
- src/, папка наших исходных файлов, как правило, такие как scss, js или html файлы. В этом простом проекте, мы будем иметь только scss файлы в src/css/.
- dist/, релиз нашего дистрибутива или папки. Мы никогда не будем редактировать файлы непосредственно в этой папке. Как правило, все файлы в этой папке и вложенных в нее папках будут автоматически сгенерированы gulp.
- gulpfile.js, главный исходный файл gulp мы напишем gulp код для создания задачи в этом файле позже.
npm init bower initnpm init интерактивно создаст package.json файл и сохранит свои node.js зависимости пакетов. Все необходимые node.js модуль, пакеты будут зарегистрированы в файле package.json и установлены в папке node_modules в вашей корневой директории проекта.
Аналогично, bower init интеративно создаст bower.json файл и сохранит bower зависимости пакета все требуемые bower пакеты будут зарегистрированы. В bower.json и установлены в папку bower_components в вашем корневой папке проекта
теперь структура нашего проекта будет такая:
mybootstrap/
- src/
- css/
- dist/
- css/
- gulpfile.js
- package.json
- bower.json
Если вы используете инструмент контроля версий вроде git, вы должны отслеживать изменения только в двух папках node_modules и bower_components. Потому что если вы клонируете или переместите проект в другое место, npm и bower автоматически установит все необходимые зависимости по этим двум json файлов с помощью команды:
npm install bower install
добавить gulp и bower зависимости к проекту
добавить gulp:npm install gulp --save-devnpm опция --save-dev дополнительно сохранит зависимость package.json файл текущего проекта.
чтобы использовать sass с gulp, мы также должны установить gulp-sass модуль:
npm install gulp-sass --save-devПосле этого ваш файл package.json должен выглядеть примерно так:
{ "name": "mybootstrap", "version": "1.0.0", "description": "Custom theme project for Bootstrap", "devDependencies": { "gulp": "^3.9.1", "gulp-sass": "^2.0.3" } }
Установка Bootstrap scss файлов
bower пакет bootstrap-sass-дополнительно поддерживает исходные файлы scss Bootstrap-а. Мы установим этот пакет:bower install bootstrap-sass-official --saveобратите внимание что bower опция --save будет дополнительно сохранять зависимость файле bower.json, так же как --save-dev опция в npm install. теперь файл bower.json будет такой:
"dependencies": { "bootstrap-sass-official": "~3.3.6" }
Создание нашего scss файла
Создадим наш исходный файл css в папке mybootstrap/src/css/main.scss.Импортируем в наш файл Bootstrap:
/* main.scss */ @import "bootstrap"; @import "bootstrap/theme";
gulpfile.js
мы собираемся использовать gulp для компиляции scss файл в mybootstrap/src/scss/ в css файл и затем скопировать его в mybootstrap/dist/css/. мы делаем это в gulpfile.js используя gulp задачу. первый шаг подключить модуль gulp:/* gulpfile.js */ var gulp = require('gulp'), sass = require('gulp-sass');второй шаг сконфигурировать gulpfile.js:
/* gulpfile.js */ ...... // source and distribution folder var source = 'src/', dest = 'dist/'; // Bootstrap scss source var bootstrapSass = { in: './bower_components/bootstrap-sass/' }; // fonts var fonts = { in: [source + 'fonts/*.*', bootstrapSass.in + 'assets/fonts/**/*'], out: dest + 'fonts/' }; // css source file: .scss files var css = { in: source + 'css/main.scss', out: dest + 'css/', watch: source + 'css/**/*', sassOpts: { outputStyle: 'nested', precison: 3, errLogToConsole: true, includePaths: [bootstrapSass.in + 'assets/stylesheets'] } };третий шаг добавить задачу шрифтов gulp скопировать bootstrap required fonts в папку dist:
/* gulpfile.js */ ...... // copy bootstrap required fonts to dest gulp.task('fonts', function () { return gulp .src(fonts.in) .pipe(gulp.dest(fonts.out)); });четвертый шаг компилировать исходный scss в css и копировать результат в css файл в папку dist:
/* gulpfile.js */ ...... // compile scss gulp.task('sass', ['fonts'], function () { return gulp.src(css.in) .pipe(sass(css.sassOpts)) .pipe(gulp.dest(css.out)); });добавить задачу по умолчанию:
/* gulpfile.js */ ...... // default task gulp.task('default', ['sass'], function () { gulp.watch(css.watch, ['sass']); });
Переопределение и настройка стили
Переопределение стилей компонентов Bootstrap в теме определяются с помощью переменных. Эти переменные определяются в файле _variables.scss. Взгляните на этот файл. Обратите внимание, что есть директива!defaultв конце каждой строки декларации.
Эта директива означает, что текущая переменная будет определена и установлено значение, только если она не будет определена или имеет уже значение. Итак, если мы приписываем нашей собственной значение для этих переменных перед импортом Bootstrap, мы можем переопределить их. Нам нужна копия
mybootstrap/bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss в mybootstrap/src/css/_variables.scssзатем импортируем _variables.scss (должно быть перед импортом Bootstrap) в нашем main.scss файле:
/* main.scss */ @import "variables"; @import "bootstrap"; @import "bootstrap/theme";Теперь переопределить то, что вы хотите в src/css/_variables.scss:
/* _variables.scss */ $body-bg: pink; $link-color: green; $font-size-base: 18px;
перекомпилировать наш scss в css файл
gulpЭта команда создаст Bootstrap theme CSS файл.
теперь мы буде использовать dist/css/main.css.
Источник: http://www.codevoila.com/post/5/customizing-bootstrap-css-style-with-gulp-bower-and-sass