Add less support and bootstrap 2.1.1 styles

bdavisx · Sep 14, 2012 · adf7273 · adf7273
1 parent baf5e24
commit adf7273
Show file tree

Hide file tree

Showing 44 changed files with 5,736 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -17,3 +17,8 @@ You can have grunt (testacular) continuously watch for file changes and automati
 * Run `grunt test-watch`
 * Open one or more browsers and point them to `http://localhost:8080`.
 * Each time a file changes the tests will be run against each browser.
+# Folders
+
+* `dist` contains build results
+* `src` contains application's sources
+* `test` contains test sources
diff --git a/grunt.js b/grunt.js
@@ -1,7 +1,10 @@
 module.exports = function (grunt) {
 
+  grunt.loadNpmTasks('grunt-recess');
+
   // Project configuration.
   grunt.initConfig({
+    distdir: 'dist',
     pkg:'<json:package.json>',
     meta:{
       banner:'/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
@@ -16,13 +19,29 @@ module.exports = function (grunt) {
     concat:{
       dist:{
         src:['<banner:meta.banner>', 'src/**/*.js'],
-        dest:'dist/<%= pkg.name %>.js'
+        dest:'<%= distdir %>/<%= pkg.name %>.js'
       }
     },
     min:{
       dist:{
         src:['<banner:meta.banner>', '<config:concat.dist.dest>'],
-        dest:'dist/<%= pkg.name %>.min.js'
+        dest:'<%= distdir %>/<%= pkg.name %>.min.js'
+      }
+    },
+    recess: {
+      build: {
+        src: ['src/modules/*/less/*.less'],
+        dest: '<%= distdir %>/<%= pkg.name %>.css',
+        options: {
+          compile: true
+        }
+      },
+      min: {
+        src: '<config:recess.build.dest>',
+        dest: '<%= distdir %>/<%= pkg.name %>.min.css',
+        options: {
+          compress: true
+        }
       }
     },
     watch:{
@@ -47,7 +66,7 @@ module.exports = function (grunt) {
   });
 
   // Default task.
-  grunt.registerTask('default', 'lint test concat min concatPartials index');
+  grunt.registerTask('default', 'lint test concat  min recess:build recess:min concatPartials index');
 
   // Testacular stuff
   var testacularCmd = process.platform === 'win32' ? 'testacular.cmd' : 'testacular';
@@ -60,7 +79,7 @@ module.exports = function (grunt) {
           grunt.fail.fatal("Test failed...");
         }
         done(!code);
-    });
+  });
     child.stdout.pipe(process.stdout);
     child.stderr.pipe(process.stderr);
   };
@@ -74,9 +93,9 @@ module.exports = function (grunt) {
     var options = ['--single-run', '--no-auto-watch', '--reporter=dots'];
     if (process.env.TRAVIS) {
       options.push('--browsers=Firefox');
-    }
+      }
     runTestacular('start', options);
-  });
+    });
 
   // HTML stuff
   grunt.registerTask('index', 'Process index.html', function(){

diff --git a/src/index.html b/src/index.html
@@ -1,16 +1,33 @@
-<html ng-app="app">
+<!DOCTYPE html>
+<html lang="en" ng-app="app">
 <head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
-    <script type="text/javascript" src="angular-app.min.js"></script>
+    <script type="text/javascript" src="<%= grunt.config.get('pkg.name') %>.min.js"></script>
 
-<!-- partials start -->
-<%= grunt.file.read('dist/partials.tpl.html') %>
-<!-- partials end -->
+    <link rel="stylesheet" type="text/css" href="<%= grunt.config.get('pkg.name') %>.min.css"/>
 
+    <!-- partials:start -->
+    <%= grunt.file.read('dist/partials.tpl.html') %>
+    <!-- partials:end -->
 </head>
+
 <body ng-controller="AppController">
-    Hello, {{user || 'Anonymous'}}! You are here: {{location.path()}}
-    <hr>
-    <div ng-view></div>
+
+<div class="navbar">
+    <div class="navbar-inner">
+        <a class="brand" href="#">Title</a>
+        <ul class="nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#">Link</a></li>
+            <li><a href="#">Link</a></li>
+        </ul>
+    </div>
+</div>
+<ul class="breadcrumb">
+    <li class="active">{{location.path()}}</li>
+</ul>
+
+<div ng-view></div>
+
 </body>
 </html>
diff --git a/src/modules/app/less/bootstrap/accordion.less b/src/modules/app/less/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(4px);
+}
+.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;
+}
diff --git a/src/modules/app/less/bootstrap/alerts.less b/src/modules/app/less/bootstrap/alerts.less
@@ -0,0 +1,65 @@
+//
+// 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(4px);
+  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-danger,
+.alert-error {
+  background-color: @errorBackground;
+  border-color: @errorBorder;
+  color: @errorText;
+}
+.alert-info {
+  background-color: @infoBackground;
+  border-color: @infoBorder;
+  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;
+}
diff --git a/src/modules/app/less/bootstrap/breadcrumbs.less b/src/modules/app/less/bootstrap/breadcrumbs.less
@@ -0,0 +1,24 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+  padding: 8px 15px;
+  margin: 0 0 @baseLineHeight;
+  list-style: none;
+  background-color: #f5f5f5;
+  .border-radius(4px);
+  li {
+    display: inline-block;
+    .ie7-inline-block();
+    text-shadow: 0 1px 0 @white;
+  }
+  .divider {
+    padding: 0 5px;
+    color: #ccc;
+  }
+  .active {
+    color: @grayLight;
+  }
+}