Docs: Refactor to use .less file instead, importing Bootstrap vars and mixins,...

Docs: Refactor to use .less file instead, importing Bootstrap vars and mixins, and cleaning all the things up

Gruntfile.js

@@ -170,6 +170,14 @@ module.exports = function (grunt) {
         files: {
           'dist/css/<%= pkg.name %>-theme.css': 'less/theme.less'
         }
+      },
+      compileDocs: {
+        options: {
+          strictMath: true
+        },
+        files: {
+          'docs/assets/css/docs.min.css': 'docs/assets/less/docs.less'
+        }
       }
     },
 
@@ -199,7 +207,7 @@ module.exports = function (grunt) {
         src: 'dist/css/<%= pkg.name %>-theme.css'
       },
       docs: {
-        src: 'docs/assets/css/src/docs.css'
+        src: 'docs/assets/css/docs.css'
       },
       examples: {
         expand: true,
@@ -225,7 +233,7 @@ module.exports = function (grunt) {
           ids: false,
           'overqualified-elements': false
         },
-        src: 'docs/assets/css/src/docs.css'
+        src: 'docs/assets/css/docs.css'
       }
     },
 
@@ -242,10 +250,7 @@ module.exports = function (grunt) {
         }
       },
       docs: {
-        src: [
-          'docs/assets/css/src/docs.css',
-          'docs/assets/css/src/pygments-manni.css'
-        ],
+        src: 'docs/assets/css/docs.min.css',
         dest: 'docs/assets/css/docs.min.css'
       }
     },
@@ -355,6 +360,10 @@ module.exports = function (grunt) {
       less: {
         files: 'less/*.less',
         tasks: 'less'
+      },
+      docs: {
+        files: 'docs/assets/less/*.less',
+        tasks: 'less'
       }
     },
 

docs/_includes/header.html

@@ -29,12 +29,7 @@
 {% endif %}
 
 <!-- Documentation extras -->
-{% if site.github %}
 <link href="../assets/css/docs.min.css" rel="stylesheet">
-{% else %}
-<link href="../assets/css/src/docs.css" rel="stylesheet">
-<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
-{% endif %}
 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="../assets/js/ie10-viewport-bug-workaround.js"></script>

docs/_includes/nav/docs.html

@@ -8,8 +8,7 @@
         <span class="icon-bar"></span>
       </button>
       <a href="../" class="navbar-brand">
-        <span class="visible-xs">Bootstrap</span>
-        <span class="bs-docs-booticon bs-docs-booticon-md hidden-xs">B</span>
+        Bootstrap
       </a>
     </div>
     <nav class="collapse navbar-collapse bs-sidenav-collapse" role="navigation">

docs/assets/css/src/pygments-manni.css

-.hll { background-color: #ffffcc }
- /*{ background: #f0f3f3; }*/
-.c { color: #999; } /* Comment */
-.err { color: #AA0000; background-color: #FFAAAA } /* Error */
-.k { color: #006699; } /* Keyword */
-.o { color: #555555 } /* Operator */
-.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
-.cp { color: #009999 } /* Comment.Preproc */
-.c1 { color: #999; } /* Comment.Single */
-.cs { color: #999; } /* Comment.Special */
-.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */
-.ge { font-style: italic } /* Generic.Emph */
-.gr { color: #FF0000 } /* Generic.Error */
-.gh { color: #003300; } /* Generic.Heading */
-.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */
-.go { color: #AAAAAA } /* Generic.Output */
-.gp { color: #000099; } /* Generic.Prompt */
-.gs { } /* Generic.Strong */
-.gu { color: #003300; } /* Generic.Subheading */
-.gt { color: #99CC66 } /* Generic.Traceback */
-.kc { color: #006699; } /* Keyword.Constant */
-.kd { color: #006699; } /* Keyword.Declaration */
-.kn { color: #006699; } /* Keyword.Namespace */
-.kp { color: #006699 } /* Keyword.Pseudo */
-.kr { color: #006699; } /* Keyword.Reserved */
-.kt { color: #007788; } /* Keyword.Type */
-.m { color: #FF6600 } /* Literal.Number */
-.s { color: #d44950 } /* Literal.String */
-.na { color: #4f9fcf } /* Name.Attribute */
-.nb { color: #336666 } /* Name.Builtin */
-.nc { color: #00AA88; } /* Name.Class */
-.no { color: #336600 } /* Name.Constant */
-.nd { color: #9999FF } /* Name.Decorator */
-.ni { color: #999999; } /* Name.Entity */
-.ne { color: #CC0000; } /* Name.Exception */
-.nf { color: #CC00FF } /* Name.Function */
-.nl { color: #9999FF } /* Name.Label */
-.nn { color: #00CCFF; } /* Name.Namespace */
-.nt { color: #2f6f9f; } /* Name.Tag */
-.nv { color: #003333 } /* Name.Variable */
-.ow { color: #000000; } /* Operator.Word */
-.w { color: #bbbbbb } /* Text.Whitespace */
-.mf { color: #FF6600 } /* Literal.Number.Float */
-.mh { color: #FF6600 } /* Literal.Number.Hex */
-.mi { color: #FF6600 } /* Literal.Number.Integer */
-.mo { color: #FF6600 } /* Literal.Number.Oct */
-.sb { color: #CC3300 } /* Literal.String.Backtick */
-.sc { color: #CC3300 } /* Literal.String.Char */
-.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */
-.s2 { color: #CC3300 } /* Literal.String.Double */
-.se { color: #CC3300; } /* Literal.String.Escape */
-.sh { color: #CC3300 } /* Literal.String.Heredoc */
-.si { color: #AA0000 } /* Literal.String.Interpol */
-.sx { color: #CC3300 } /* Literal.String.Other */
-.sr { color: #33AAAA } /* Literal.String.Regex */
-.s1 { color: #CC3300 } /* Literal.String.Single */
-.ss { color: #FFCC33 } /* Literal.String.Symbol */
-.bp { color: #336666 } /* Name.Builtin.Pseudo */
-.vc { color: #003333 } /* Name.Variable.Class */
-.vg { color: #003333 } /* Name.Variable.Global */
-.vi { color: #003333 } /* Name.Variable.Instance */
-.il { color: #FF6600 } /* Literal.Number.Integer.Long */
-
-.css .o,
-.css .o + .nt,
-.css .nt + .nt { color: #999; }

docs/assets/less/syntax.less

+.hll { background-color: #ffffcc }
+.c { color: #999; }
+.err { color: #AA0000; background-color: #FFAAAA }
+.k { color: #006699; }
+.o { color: #555555 }
+.cm { color: #999; }
+.cp { color: #009999 }
+.c1 { color: #999; }
+.cs { color: #999; }
+.gd { background-color: #FFCCCC; border: 1px solid #CC0000 }
+.ge { font-style: italic }
+.gr { color: #FF0000 }
+.gh { color: #003300; }
+.gi { background-color: #CCFFCC; border: 1px solid #00CC00 }
+.go { color: #AAAAAA }
+.gp { color: #000099; }
+.gu { color: #003300; }
+.gt { color: #99CC66 }
+.kc { color: #006699; }
+.kd { color: #006699; }
+.kn { color: #006699; }
+.kp { color: #006699 }
+.kr { color: #006699; }
+.kt { color: #007788; }
+.m { color: #FF6600 }
+.s { color: #d44950 }
+.na { color: #4f9fcf }
+.nb { color: #336666 }
+.nc { color: #00AA88; }
+.no { color: #336600 }
+.nd { color: #9999FF }
+.ni { color: #999999; }
+.ne { color: #CC0000; }
+.nf { color: #CC00FF }
+.nl { color: #9999FF }
+.nn { color: #00CCFF; }
+.nt { color: #2f6f9f; }
+.nv { color: #003333 }
+.ow { color: #000000; }
+.w { color: #bbbbbb }
+.mf { color: #FF6600 }
+.mh { color: #FF6600 }
+.mi { color: #FF6600 }
+.mo { color: #FF6600 }
+.sb { color: #CC3300 }
+.sc { color: #CC3300 }
+.sd { color: #CC3300; font-style: italic }
+.s2 { color: #CC3300 }
+.se { color: #CC3300; }
+.sh { color: #CC3300 }
+.si { color: #AA0000 }
+.sx { color: #CC3300 }
+.sr { color: #33AAAA }
+.s1 { color: #CC3300 }
+.ss { color: #FFCC33 }
+.bp { color: #336666 }
+.vc { color: #003333 }
+.vg { color: #003333 }
+.vi { color: #003333 }
+.il { color: #FF6600 }
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }

docs/index.html

@@ -5,7 +5,7 @@ title: Bootstrap · The world's most popular mobile-first and responsive f
 
 <main class="bs-docs-masthead" id="content" role="main">
   <div class="container">
-    <span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
+    <span class="bs-docs-booticon outline">B</span>
     <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
     <p class="lead">
       <a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}');">Download Bootstrap</a>