├── .gitignore
├── .gitmodules
├── README.md
├── scss
└── style.scss
├── package.json
├── gulpfile.js
└── index.html
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | css/
3 |
--------------------------------------------------------------------------------
/.gitmodules:
--------------------------------------------------------------------------------
1 | [submodule "bootstrap"]
2 | path = bootstrap
3 | url = https://github.com/twbs/bootstrap.git
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bootstrap Grid SASS demo
2 |
3 | A quick demo of how to only use the bootstrap 4 grid system by using the sass dependencies. Read the full blog post: [Bootstrap 4 Grid only and SASS with Gulp](http://projects.jonathanmh.com/bootstrap-grid/)
4 |
--------------------------------------------------------------------------------
/scss/style.scss:
--------------------------------------------------------------------------------
1 | $enable-flex: true;
2 | $enable-grid-classes: true;
3 |
4 | @import './bootstrap/scss/_variables.scss';
5 | @import './bootstrap/scss/_mixins.scss';
6 | @import './bootstrap/scss/_normalize.scss';
7 | @import './bootstrap/scss/_reboot.scss';
8 | @import './bootstrap/scss/_grid.scss';
9 |
10 | h1 {
11 | margin-top: 50px;
12 | }
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bootstrap-grid",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "gulp": "^3.9.0",
13 | "gulp-minify-css": "^1.2.2",
14 | "gulp-sass": "^2.1.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var sass = require('gulp-sass');
3 | var minifyCss = require('gulp-minify-css');
4 |
5 | gulp.task('styles', function() {
6 | gulp.src('./scss/style.scss')
7 | .pipe(sass().on('error', sass.logError))
8 | .pipe(minifyCss({compatibility: 'ie9'}))
9 | .pipe(gulp.dest('./css/'))
10 | });
11 |
12 | // Watch task
13 | gulp.task('default',function() {
14 | // run task initially, after that watch
15 | gulp.start('styles');
16 | gulp.watch('./scss/*.scss',['styles']);
17 | });
18 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Bootstrap v4 only grid system | JonathanMH
6 |
7 |
8 |
9 |
31 |
32 |
33 |
--------------------------------------------------------------------------------