fix(bootstrap): WIP. add Bootstrapv2.3.2 sources file to the project

This way we can alter them directly, remove what we don't need, and move
the relevant code to our CSS files.

I downloaded the source from here

https://getbootstrap.com/2.3.2/getting-started.html

I tried to use gulp-less, but it could not compile the Bootstrap files
and generated an error. I used the tool they used in their Makefile.

https://github.com/twitter/recess

Update #429

gulpfile.babel.js

@@ -19,6 +19,14 @@ const content_404 = () =>
 const cleanOutput = () => exec("cd documentation && rm -rf outout/");
 
 const buildContent = () => exec("cd documentation && invoke build");
+const compileBootstrapLess = () =>
+  exec(
+    "node_modules/recess/bin/recess --compile static/bootstrap/bootstrap.less > static/css/bootstrap.css"
+  );
+const compileResponsiveLess = () =>
+  exec(
+    "node_modules/recess/bin/recess --compile static/bootstrap/responsive.less > static/css/bootstrap_responsive.css"
+  );
 
 const reload = cb => {
   browserSync.init(
@@ -54,7 +62,10 @@ const watchFiles = () => {
       "documentation/publishconf.py",
       "templates/**/*.html",
       "static/**/*.css",
+      "static/**/*.less",
       "!static/**/elegant.prod.css",
+      "!static/**/bootstrap.css",
+      "!static/**/bootstrap_responsive.css",
       "static/**/*.js"
     ],
     { ignoreInitial: false },
@@ -88,8 +99,16 @@ const compileCSS = () => {
     .pipe(dest("static/css/"));
 };
 
-const buildAll = series(rmProdCSS, compileCSS, buildContent);
+const buildAll = series(
+  rmProdCSS,
+  compileBootstrapLess,
+  compileResponsiveLess,
+  compileCSS,
+  buildContent
+);
 const elegant = series(
+  compileBootstrapLess,
+  compileResponsiveLess,
   compileCSS,
   cleanOutput,
   buildContent,
@@ -98,6 +117,11 @@ const elegant = series(
 
 exports.validate = run("jinja-ninja templates");
 
-exports.css = series(rmProdCSS, compileCSS);
+exports.css = series(
+  rmProdCSS,
+  compileBootstrapLess,
+  compileResponsiveLess,
+  compileCSS
+);
 exports.elegant = elegant;
 exports.default = elegant;

package.json

@@ -15,6 +15,7 @@
     "gulp-run-command": "^0.0.10",
     "postcss-font-magician": "^2.3.1",
     "postcss-preset-env": "^6.7.0",
+    "recess": "^1.1.9",
     "semantic-release": "^15.13.31"
   },
   "config": {

static/bootstrap/accordion.less

@@ -0,0 +1,34 @@
+//
+// Accordion
+// --------------------------------------------------
+
+
+// Parent container
+.accordion {
+  margin-bottom: @baseLineHeight;
+}
+
+// Group == heading + body
+.accordion-group {
+  margin-bottom: 2px;
+  border: 1px solid #e5e5e5;
+  .border-radius(@baseBorderRadius);
+}
+.accordion-heading {
+  border-bottom: 0;
+}
+.accordion-heading .accordion-toggle {
+  display: block;
+  padding: 8px 15px;
+}
+
+// General toggle styles
+.accordion-toggle {
+  cursor: pointer;
+}
+
+// Inner needs the styles because you can't animate properly with any styles on the element
+.accordion-inner {
+  padding: 9px 15px;
+  border-top: 1px solid #e5e5e5;
+}

static/bootstrap/alerts.less

@@ -0,0 +1,79 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+  padding: 8px 35px 8px 14px;
+  margin-bottom: @baseLineHeight;
+  text-shadow: 0 1px 0 rgba(255,255,255,.5);
+  background-color: @warningBackground;
+  border: 1px solid @warningBorder;
+  .border-radius(@baseBorderRadius);
+}
+.alert,
+.alert h4 {
+  // Specified for the h4 to prevent conflicts of changing @headingsColor
+  color: @warningText;
+}
+.alert h4 {
+  margin: 0;
+}
+
+// Adjust close link position
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: @baseLineHeight;
+}
+
+
+// Alternate styles
+// -------------------------
+
+.alert-success {
+  background-color: @successBackground;
+  border-color: @successBorder;
+  color: @successText;
+}
+.alert-success h4 {
+  color: @successText;
+}
+.alert-danger,
+.alert-error {
+  background-color: @errorBackground;
+  border-color: @errorBorder;
+  color: @errorText;
+}
+.alert-danger h4,
+.alert-error h4 {
+  color: @errorText;
+}
+.alert-info {
+  background-color: @infoBackground;
+  border-color: @infoBorder;
+  color: @infoText;
+}
+.alert-info h4 {
+  color: @infoText;
+}
+
+
+// Block alerts
+// -------------------------
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0;
+}
+.alert-block p + p {
+  margin-top: 5px;
+}

static/bootstrap/bootstrap.less

@@ -0,0 +1,63 @@
+/*!
+ * Bootstrap v2.3.2
+ *
+ * Copyright 2013 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world by @mdo and @fat.
+ */
+
+// Core variables and mixins
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+// CSS Reset
+@import "reset.less";
+
+// Grid system and page structure
+@import "scaffolding.less";
+@import "grid.less";
+@import "layouts.less";
+
+// Base CSS
+@import "type.less";
+@import "code.less";
+@import "forms.less";
+@import "tables.less";
+
+// Components: common
+@import "sprites.less";
+@import "dropdowns.less";
+@import "wells.less";
+@import "component-animations.less";
+@import "close.less";
+
+// Components: Buttons & Alerts
+@import "buttons.less";
+@import "button-groups.less";
+@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
+// Components: Nav
+@import "navs.less";
+@import "navbar.less";
+@import "breadcrumbs.less";
+@import "pagination.less";
+@import "pager.less";
+
+// Components: Popovers
+@import "modals.less";
+@import "tooltip.less";
+@import "popovers.less";
+
+// Components: Misc
+@import "thumbnails.less";
+@import "media.less";
+@import "labels-badges.less";
+@import "progress-bars.less";
+@import "accordion.less";
+@import "carousel.less";
+@import "hero-unit.less";
+
+// Utility classes
+@import "utilities.less"; // Has to be last to override when necessary

static/bootstrap/breadcrumbs.less

@@ -0,0 +1,24 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+  padding: 8px 15px;
+  margin: 0 0 @baseLineHeight;
+  list-style: none;
+  background-color: #f5f5f5;
+  .border-radius(@baseBorderRadius);
+  > li {
+    display: inline-block;
+    .ie7-inline-block();
+    text-shadow: 0 1px 0 @white;
+    > .divider {
+      padding: 0 5px;
+      color: #ccc;
+    }
+  }
+  > .active {
+    color: @grayLight;
+  }
+}