Создание собственных версий 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 и bower (команды запускаются в папке mybootstrap):

npm init
bower init

npm 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-dev

npm опция --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