Introducing Bootstrap 4

Bootstrap (and its dependency popper.js) are now used from npm packages,
allowing better version control and custom building of only the required
components for both styling and javascript.

At this moment the whole styling of bootstrap is included, once the Cloud
redesign is over it will be stripped to only the used components.

.gitignore

@@ -6,6 +6,7 @@ __pycache__
 
 /cloud/templates/
 /cloud/static/assets/css/
+/cloud/static/assets/js/bootstrap.min.js
 node_modules/
 
 /config_local.py

gulpfile.js

@@ -29,7 +29,12 @@ var destination = {
     js: 'cloud/static/assets/js',
 }
 
-var pillar = '../pillar/';
+var source = {
+    pillar: '../pillar/',
+    bootstrap: 'node_modules/bootstrap/',
+    popper: 'node_modules/popper.js/'
+}
+
 
 /* CSS */
 gulp.task('styles', function() {
@@ -95,6 +100,28 @@ gulp.task('scripts_concat_tutti', function() {
 });
 
 
+// Combine all needed Bootstrap JavaScript into a single file.
+gulp.task('scripts_concat_bootstrap', function() {
+
+    toUglify = [
+        source.popper    + 'dist/umd/popper.min.js',
+        source.bootstrap + 'js/dist/index.js',
+        source.bootstrap + 'js/dist/util.js',
+        source.bootstrap + 'js/dist/tooltip.js',
+        source.bootstrap + 'js/dist/dropdown.js',
+    ];
+
+    gulp.src(toUglify)
+        .pipe(gulpif(enabled.failCheck, plumber()))
+        .pipe(gulpif(enabled.maps, sourcemaps.init()))
+        .pipe(concat("bootstrap.min.js"))
+        .pipe(gulpif(enabled.uglify, uglify()))
+        .pipe(gulpif(enabled.maps, sourcemaps.write(".")))
+        .pipe(chmod(644))
+        .pipe(gulp.dest(destination.js))
+        .pipe(gulpif(argv.livereload, livereload()));
+});
+
 
 // While developing, run 'gulp watch'
 gulp.task('watch',function() {
@@ -104,7 +131,7 @@ gulp.task('watch',function() {
     }
 
     gulp.watch('src/styles/**/*.sass',['styles']);
-    gulp.watch(pillar + 'src/styles/**/*.sass',['styles']);
+    gulp.watch(source.pillar + 'src/styles/**/*.sass',['styles']);
 
     gulp.watch('src/templates/**/*.pug',['templates']);
     gulp.watch('src/scripts/*.js',['scripts']);
@@ -128,4 +155,5 @@ gulp.task('cleanup', function() {
 // Run 'gulp' to build everything at once
 var tasks = [];
 if (enabled.cleanup) tasks.push('cleanup');
-gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti']));
+
+gulp.task('default', tasks.concat(['styles', 'templates', 'scripts', 'scripts_concat_tutti', 'scripts_concat_bootstrap']));

package.json

@@ -23,5 +23,9 @@
 		"gulp-sourcemaps": "~1.6.0",
 		"gulp-uglify": "~1.5.3",
 		"minimist": "^1.2.0"
+	},
+	"dependencies": {
+		"bootstrap": "^4.1.3",
+		"popper.js": "^1.14.4"
 	}
 }

src/styles/main.sass

@@ -1,14 +1,93 @@
-@import ../../../pillar/src/styles/_normalize
+// Boi-tstrap
-@import ../../../pillar/src/styles/_config
+@import "../../node_modules/bootstrap/scss/functions"
-@import ../../../pillar/src/styles/_utils
+@import "../../node_modules/bootstrap/scss/variables"
+@import "../../node_modules/bootstrap/scss/mixins"
 
-/* Generic styles (comments, notifications, etc) come from base.css */
+@import ../../../pillar/src/styles/config
+
+$primary: $color-primary
+
+$body-bg: $color-background
+$body-color: $color-text
+
+$color-background-nav: #fff
+$link-color: $primary
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
+$font-size-base: .9rem
+
+@import "../../node_modules/bootstrap/scss/root"
+@import "../../node_modules/bootstrap/scss/reboot"
+
+@import "../../node_modules/bootstrap/scss/type"
+@import "../../node_modules/bootstrap/scss/images"
+
+@import "../../node_modules/bootstrap/scss/code"
+@import "../../node_modules/bootstrap/scss/grid"
+@import "../../node_modules/bootstrap/scss/tables"
+@import "../../node_modules/bootstrap/scss/forms"
+@import "../../node_modules/bootstrap/scss/buttons"
+@import "../../node_modules/bootstrap/scss/transitions"
+@import "../../node_modules/bootstrap/scss/dropdown"
+@import "../../node_modules/bootstrap/scss/button-group"
+@import "../../node_modules/bootstrap/scss/input-group"
+@import "../../node_modules/bootstrap/scss/custom-forms"
+
+@import "../../node_modules/bootstrap/scss/nav"
+@import "../../node_modules/bootstrap/scss/navbar"
+
+@import "../../node_modules/bootstrap/scss/card"
+@import "../../node_modules/bootstrap/scss/breadcrumb"
+@import "../../node_modules/bootstrap/scss/pagination"
+@import "../../node_modules/bootstrap/scss/badge"
+@import "../../node_modules/bootstrap/scss/jumbotron"
+@import "../../node_modules/bootstrap/scss/alert"
+@import "../../node_modules/bootstrap/scss/progress"
+@import "../../node_modules/bootstrap/scss/media"
+@import "../../node_modules/bootstrap/scss/list-group"
+@import "../../node_modules/bootstrap/scss/close"
+@import "../../node_modules/bootstrap/scss/modal"
+@import "../../node_modules/bootstrap/scss/tooltip"
+@import "../../node_modules/bootstrap/scss/popover"
+@import "../../node_modules/bootstrap/scss/carousel"
+
+@import "../../node_modules/bootstrap/scss/utilities"
+@import "../../node_modules/bootstrap/scss/print"
+
+@import ../../../pillar/src/styles/normalize
+@import ../../../pillar/src/styles/utils
+@import ../../../pillar/src/styles/apps_base
+@import ../../../pillar/src/styles/error
+
+@import ../../../pillar/src/styles/components/base
+
+@import ../../../pillar/src/styles/components/jumbotron
+@import ../../../pillar/src/styles/components/alerts
+@import ../../../pillar/src/styles/components/navbar
+@import ../../../pillar/src/styles/components/footer
+@import ../../../pillar/src/styles/components/shortcode
+@import ../../../pillar/src/styles/components/statusbar
+@import ../../../pillar/src/styles/components/search
+
+@import ../../../pillar/src/styles/components/flyout
+@import ../../../pillar/src/styles/components/forms
+@import ../../../pillar/src/styles/components/inputs
+@import ../../../pillar/src/styles/components/buttons
+@import ../../../pillar/src/styles/components/popover
+@import ../../../pillar/src/styles/components/tooltip
+@import ../../../pillar/src/styles/components/checkbox
+@import ../../../pillar/src/styles/components/overlay
+@import ../../../pillar/src/styles/components/card
+
+@import ../../../pillar/src/styles/comments
+@import ../../../pillar/src/styles/notifications
 
 /* Blender Cloud specific styles */
 @import ../../../pillar/src/styles/_project
 @import ../../../pillar/src/styles/_project-sharing
 @import ../../../pillar/src/styles/_project-dashboard
 @import ../../../pillar/src/styles/_user
+
 @import _welcome
 @import _homepage
 @import _services

src/templates/layout.pug

@@ -46,7 +46,6 @@ html(lang="en")
 		link(href="{{ url_for('static', filename='assets/img/favicon.png') }}", rel="shortcut icon")
 		link(href="{{ url_for('static', filename='assets/img/apple-touch-icon-precomposed.png') }}", rel="icon apple-touch-icon-precomposed", sizes="192x192")
 
-		link(href="{{ url_for('static_pillar', filename='assets/css/vendor/bootstrap.min.css') }}", rel="stylesheet")
 		link(href="{{ url_for('static', filename='assets/google-font-roboto/roboto.css') }}", rel="stylesheet")
 
 		| {% block head %}{% endblock %}
@@ -318,10 +317,10 @@ html(lang="en")
 					span.nc-date
 						a(href="")
 
+		script(src="{{ url_for('static_cloud', filename='assets/js/bootstrap.min.js') }}")
 		noscript
 			link(href='//fonts.googleapis.com/css?family=Roboto:300,400', rel='stylesheet', type='text/css')
 
-		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.bootstrap-3.3.7.min.js') }}")
 
 		| {% if current_user.is_authenticated %}
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typewatch-3.0.0.min.js') }}")