Compile all CSS through a main LESS file

Dynalon · Apr 17, 2014 · b7dc396 · b7dc396
1 parent 2a33e17
commit b7dc396
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 80 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -60,9 +60,7 @@ module.exports = function(grunt) {
         // * ORDER OF FILES IS IMPORTANT
         // * ALWAYS ADD EACH FILE TO BOTH minified/unminified SECTIONS!
         cssFiles: [
-            'tmp/bootstrap.min.css',
-            'extlib/css/prism.default.css',
-            'extlib/css/colorbox.css',
+            'tmp/main.min.css',
         ],
         jsFiles: [
             'bower_components/jquery/jquery.min.js',
@@ -73,9 +71,7 @@ module.exports = function(grunt) {
         ],
         // for debug builds use unminified versions:
         unminifiedCssFiles: [
-            'tmp/bootstrap.css',
-            'extlib/css/colorbox.css',
-            'extlib/css/prism.default.css',
+            'tmp/main.css'
         ],
         unminifiedJsFiles: [
             'bower_components/jquery/jquery.js',
@@ -106,15 +102,15 @@ module.exports = function(grunt) {
                     compress: true,
                 },
                 files: {
-                    'tmp/bootstrap.min.css': 'extlib/less/bootstrap.less',
+                    'tmp/main.min.css': 'styles/main.less',
                 },
             },
             dev: {
                 options: {
                     compress: false,
                 },
                 files: {
-                    'tmp/bootstrap.css': 'extlib/less/bootstrap.less',
+                    'tmp/main.css': 'styles/main.less',
                 },
             },
         },

diff --git a/index.tmpl b/index.tmpl
@@ -13,78 +13,6 @@
     <meta name="fragment" content="!">
     <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
     <meta charset="UTF-8">
-    <style type="text/css">
-    /* hide the main content while we assemble everything */
-    .md-hidden-load { display: none; }
-
-    .anchor-highlight {
-        font-size: 0.7em;
-        margin-left: 0.25em;
-    }
-    /* for pageContentMenu */
-    #md-page-menu {
-            position: static;
-    }
-    #md-page-menu a.active {
-        /* background-color: rgba(0, 0, 0, 0.01); */
-        font-weight: bold;
-    }
-    @media (min-width: 992px) {
-        #md-page-menu.affix {
-            position: fixed;
-        }
-    }
-    @media (min-width: 768px) {
-        .md-float-left .col-sm-8, .md-float-right .col-sm-8 {
-            max-width: 66.67%;
-        }
-        .md-float-left .col-sm-4, .md-float-right .col-sm-4  {
-            max-width: 33.33%;
-        }
-        .md-float-left .col-sm-2, .md-float-right .col-sm-2 {
-            max-width: 16.67%;
-        }
-
-    }
-    @media (max-width: 992px) {
-        a.forkmeongithub {
-            display: none;
-        }
-    }
-    @media (max-width: 768px) {
-        /* don't use floating for smaller screens */
-        .md-float-left .col-sm-8, .md-float-left .col-sm-4, .md-float-left .col-sm-2 {
-            width: 100%;
-            max-width: !important;
-            min-width: 100%;
-        }
-        .md-float-right .col-sm-8, .md-float-right .col-sm-4, .md-float-right .col-sm-2 {
-            width: 100%;
-            max-width: !important;
-            min-width: 100%;
-        }
-    }
-
-    .md-floatenv .md-text {
-        /* md-text is not of md-col-* but needs the spacing */
-        margin-left: 15px;
-        margin-right: 15px;
-    }
-
-    /* float images */
-    .md-float-left .col-sm-8, .md-float-left .col-sm-4, .md-float-left .col-sm-2 {
-        width: auto;
-    }
-    .md-float-right .col-sm-8, .md-float-right .col-sm-4, .md-float-right .col-sm-2 {
-        float: right !important;
-        width: auto;
-    }
-    #md-all .md-copyright-footer {
-        background-color: !important;
-        font-size: smaller;
-        padding: 1em;
-    }
-    </style>
 
 <%
     var task = grunt.config('currentTask').name;

diff --git a/styles/custom.css b/styles/custom.css
@@ -0,0 +1,4 @@
+/*
+ * Custom CSS file
+ * PLACE HERE YOUR CUSTOM STYLESHEETS TO PERSONALIZE MDWIKI
+ */
diff --git a/styles/main.less b/styles/main.less
@@ -0,0 +1,17 @@
+/* 
+ * Main stylesheet file
+ */
+
+// Paths
+@extlib: "../extlib";
+
+// MDwiki base CSS
+@import (less)  "mdwiki.css";
+
+// Vendor components
+@import         "@{extlib}/less/bootstrap.less";
+@import (less)  "@{extlib}/css/prism.default.css";
+@import (less)  "@{extlib}/css/colorbox.css";
+
+// Your custom CSS or LESS files
+@import (less)  "custom.css";
diff --git a/styles/mdwiki.css b/styles/mdwiki.css
@@ -0,0 +1,73 @@
+/* 
+ * MDwiki base CSS file
+ * DON'T TOUCH UNLESS YOU KNOW WHAT ARE YOU DOING 
+ */
+
+/* hide the main content while we assemble everything */
+ .md-hidden-load {
+    display: none;
+}
+.anchor-highlight {
+    font-size: 0.7em;
+    margin-left: 0.25em;
+}
+/* for pageContentMenu */
+ #md-page-menu {
+    position: static;
+}
+#md-page-menu a.active {
+    /* background-color: rgba(0, 0, 0, 0.01); */
+    font-weight: bold;
+}
+@media (min-width: 992px) {
+    #md-page-menu.affix {
+        position: fixed;
+    }
+}
+@media (min-width: 768px) {
+    .md-float-left .col-sm-8, .md-float-right .col-sm-8 {
+        max-width: 66.67%;
+    }
+    .md-float-left .col-sm-4, .md-float-right .col-sm-4 {
+        max-width: 33.33%;
+    }
+    .md-float-left .col-sm-2, .md-float-right .col-sm-2 {
+        max-width: 16.67%;
+    }
+}
+@media (max-width: 992px) {
+    a.forkmeongithub {
+        display: none;
+    }
+}
+@media (max-width: 768px) {
+    /* don't use floating for smaller screens */
+    .md-float-left .col-sm-8, .md-float-left .col-sm-4, .md-float-left .col-sm-2 {
+        width: 100%;
+        max-width: !important;
+        min-width: 100%;
+    }
+    .md-float-right .col-sm-8, .md-float-right .col-sm-4, .md-float-right .col-sm-2 {
+        width: 100%;
+        max-width: !important;
+        min-width: 100%;
+    }
+}
+.md-floatenv .md-text {
+    /* md-text is not of md-col-* but needs the spacing */
+    margin-left: 15px;
+    margin-right: 15px;
+}
+/* float images */
+ .md-float-left .col-sm-8, .md-float-left .col-sm-4, .md-float-left .col-sm-2 {
+    width: auto;
+}
+.md-float-right .col-sm-8, .md-float-right .col-sm-4, .md-float-right .col-sm-2 {
+    float: right !important;
+    width: auto;
+}
+#md-all .md-copyright-footer {
+    background-color: !important;
+    font-size: smaller;
+    padding: 1em;
+}