feat(*): Updated to bootstrap 3 and ui-bootstrap 0.10

temp3l · Apr 15, 2014 · 5568231 · 5568231
1 parent 33af060
commit 5568231
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 147 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -11,10 +11,10 @@ module.exports = function ( grunt ) {
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-coffee');
+  grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-conventional-changelog');
   grunt.loadNpmTasks('grunt-bump');
   grunt.loadNpmTasks('grunt-coffeelint');
-  grunt.loadNpmTasks('grunt-recess');
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-ngmin');
   grunt.loadNpmTasks('grunt-html2js');
@@ -162,9 +162,9 @@ module.exports = function ( grunt ) {
       build_css: {
         src: [
           '<%= vendor_files.css %>',
-          '<%= recess.build.dest %>'
+          '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
         ],
-        dest: '<%= recess.build.dest %>'
+        dest: '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
       },
       /**
        * The `compile_js` target is the concatenation of our application source
@@ -238,31 +238,23 @@ module.exports = function ( grunt ) {
     },
 
     /**
-     * `recess` handles our LESS compilation and uglification automatically.
+     * `grunt-contrib-less` handles our LESS compilation and uglification automatically.
      * Only our `main.less` file is included in compilation; all other files
      * must be imported from this file.
      */
-    recess: {
+    less: {
       build: {
-        src: [ '<%= app_files.less %>' ],
-        dest: '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css',
-        options: {
-          compile: true,
-          compress: false,
-          noUnderscores: false,
-          noIDs: false,
-          zeroUnits: false
+        files: {
+          '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css': '<%= app_files.less %>'
         }
       },
       compile: {
-        src: [ '<%= recess.build.dest %>' ],
-        dest: '<%= recess.build.dest %>',
+        files: {
+          '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css': '<%= app_files.less %>'
+        },
         options: {
-          compile: true,
-          compress: true,
-          noUnderscores: false,
-          noIDs: false,
-          zeroUnits: false
+          cleancss: true,
+          compress: true
         }
       }
     },
@@ -381,7 +373,7 @@ module.exports = function ( grunt ) {
           '<%= html2js.common.dest %>',
           '<%= html2js.app.dest %>',
           '<%= vendor_files.css %>',
-          '<%= recess.build.dest %>'
+          '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
         ]
       },
 
@@ -395,7 +387,7 @@ module.exports = function ( grunt ) {
         src: [
           '<%= concat.compile_js.dest %>',
           '<%= vendor_files.css %>',
-          '<%= recess.compile.dest %>'
+          '<%= build_dir %>/assets/<%= pkg.name %>-<%= pkg.version %>.css'
         ]
       }
     },
@@ -506,7 +498,7 @@ module.exports = function ( grunt ) {
        */
       less: {
         files: [ 'src/**/*.less' ],
-        tasks: [ 'recess:build' ]
+        tasks: [ 'less:build' ]
       },
 
       /**
@@ -560,7 +552,7 @@ module.exports = function ( grunt ) {
    * The `build` task gets your app ready to run for development and testing.
    */
   grunt.registerTask( 'build', [
-    'clean', 'html2js', 'jshint', 'coffeelint', 'coffee', 'recess:build',
+    'clean', 'html2js', 'jshint', 'coffeelint', 'coffee', 'less:build',
     'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',
     'copy:build_appjs', 'copy:build_vendorjs', 'index:build', 'karmaconfig',
     'karma:continuous' 
@@ -571,7 +563,7 @@ module.exports = function ( grunt ) {
    * minifying your code.
    */
   grunt.registerTask( 'compile', [
-    'recess:compile', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', 'index:compile'
+    'less:compile', 'copy:compile_assets', 'ngmin', 'concat:compile_js', 'uglify', 'index:compile'
   ]);
 
   /**

diff --git a/bower.json b/bower.json
@@ -4,8 +4,8 @@
   "devDependencies": {
     "angular": "~1.2",
     "angular-mocks": "~1.2",
-    "bootstrap": "~2.3.2",
-    "angular-bootstrap": "~0.3",
+    "bootstrap": "~3.1",
+    "angular-bootstrap": "~0.10.0",
     "angular-ui-router": "~0.2"
   },
   "dependencies": {}

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "dependencies": {},
   "devDependencies": {
     "grunt": "~0.4.1",
-    "grunt-recess": "~0.3.0",
+    "grunt-contrib-less": "~0.11.0",
     "grunt-contrib-clean": "~0.4.1",
     "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-jshint": "~0.4.3",

diff --git a/src/app/about/about.tpl.html b/src/app/about/about.tpl.html
@@ -1,4 +1,4 @@
-<div class="row-fluid">
+<div class="row">
   <h1 class="page-header">
     The Elevator Pitch
     <small>For the lazy and impatient.</small>
@@ -141,10 +141,10 @@ <h2>Font Awesome</h2>
     are drawn through Font Awesome! All it takes is a little class:
   </p>
 
-  <pre>&lt;i class="icon-flag"&gt;&lt/i&gt</pre>
+  <pre>&lt;i class="fa fa-flag"&gt;&lt/i&gt</pre>
 
   <p>
-    And you get one of these: <i class="icon-flag"> </i>. Neat!
+    And you get one of these: <i class="fa fa-flag"> </i>. Neat!
   </p>
 
   <h2>Placeholders</h2>

diff --git a/src/app/home/home.tpl.html b/src/app/home/home.tpl.html
@@ -7,7 +7,7 @@ <h1>Non-Trivial AngularJS Made Easy</h1>
     libraries around.
   </p>
 
-  <ul class="inline social-buttons">
+  <ul class="list-inline social-buttons">
     <li>
       <iframe 
         src="http://ghbtns.com/github-btn.html?user=joshdmiller&amp;repo=ng-boilerplate&amp;type=watch&amp;count=true" 
@@ -37,12 +37,12 @@ <h1>Non-Trivial AngularJS Made Easy</h1>
   </ul> 
 
   <div class="btn-group">
-    <a href="https://github.com/joshdmiller/ng-boilerplate#readme" class="btn btn-large">
-      <i class="icon-book"></i>
+    <a href="https://github.com/joshdmiller/ng-boilerplate#readme" class="btn btn-large btn-default">
+      <i class="fa fa-book"></i>
       Read the Docs
     </a>
     <a href="https://github.com/joshdmiller/ng-boilerplate" class="btn btn-large btn-success">
-      <i class="icon-download"></i>
+      <i class="fa fa-download"></i>
       Download
     </a>
   </div>
@@ -51,46 +51,46 @@ <h1>Non-Trivial AngularJS Made Easy</h1>
 
 <div class="marketing">
   <div class="row">
-    <div class="span4">
-      <h4><i class="icon-thumbs-up"></i> Good to Go!</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-thumbs-up"></i> Good to Go!</h4>
       <p>
         Kickstarts your project quickly, with everything you need, so you can 
         focus on what matters: your app.
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-magic"></i> Complete Build System</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-magic"></i> Complete Build System</h4>
       <p>
         A smart, <a href="http://gruntjs.com">Grunt</a>-based build system 
         designed to save you time and energy.
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-retweet"></i> Modularization</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-retweet"></i> Modularization</h4>
       <p>
         Supports a structure that maintains separation of concerns while
         ensuring maximum code reuse.
       </p>
     </div>
   </div>
   <div class="row">
-    <div class="span4">
-      <h4><i class="icon-star"></i> AngularJS</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-star"></i> AngularJS</h4>
       <p>
         JavaScript framework that augments browser-based, single-page 
         applications with MVC functionality.
         <a href="http://angularjs.org">More &raquo;</a>
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-resize-small"></i> LESS CSS</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-resize-small"></i> LESS CSS</h4>
       <p>
         The dynamic stylesheet language that extends CSS with efficiency.
         <a href="http://lesscss.org">More &raquo;</a>
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-twitter"></i> Twitter Bootstrap</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-twitter"></i> Twitter Bootstrap</h4>
       <p>
         Sleek, intuitive, and powerful front-end framework for faster and easier
         web development.
@@ -99,25 +99,25 @@ <h4><i class="icon-twitter"></i> Twitter Bootstrap</h4>
     </div>
   </div>
   <div class="row">
-    <div class="span4">
-      <h4><i class="icon-circle"></i> Angular UI Bootstrap</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-circle"></i> Angular UI Bootstrap</h4>
       <p>
         Pure AngularJS components for Bootstrap written by the 
         <a href="https://github.com/angular-ui?tab=members">AngularUI Team</a>.
         <a href="http://angular-ui.github.com/bootstrap">More &raquo;</a>
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-flag"></i> Font Awesome</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-flag"></i> Font Awesome</h4>
       <p>
         The iconic font designed for use with Twitter Bootstrap.
         <a href="http://fortawesome.github.com/Font-Awesome">
           More &raquo;
         </a>
       </p>
     </div>
-    <div class="span4">
-      <h4><i class="icon-asterisk"></i> Placeholders</h4>
+    <div class="col-xs-12 col-sm-6 col-md-4">
+      <h4><i class="fa fa-asterisk"></i> Placeholders</h4>
       <p>
         Client-side image and text placeholder directives written in pure 
         AngularJS to make designing mock-ups wicked-fast.

diff --git a/src/index.html b/src/index.html
@@ -16,8 +16,10 @@
     <meta property="og:image" content="https://a248.e.akamai.net/assets.github.com/images/modules/logos_page/Octocat.png?1366128846" />
     <meta property="og:description" content="Non-Trivial AngularJS Made Easy: Everything you need to kickstart AngularJS projects: a best-practice directory structure, an intelligent build system, and the best web design libraries around.">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <!-- font awesome from BootstrapCDN -->
-    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
+    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 
     <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
     <link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>
@@ -32,47 +34,58 @@
   </head>
   <body>
     <div class="container">
-      <div class="masthead">
-        <h3 class="muted">ng-boilerplate <small><a
-              href="http://github.com/joshdmiller/ng-boilerplate/blob/master/CHANGELOG.md">v<%= version %></a></small></h3>
-        <div class="navbar">
-          <div class="navbar-inner">
-            <div class="container">
-              <ul class="nav">
-                <li ui-route="/home" ng-class="{active:$uiRoute}">
-                  <a href="#/home">
-                    <i class="icon-home"></i>
-                    Home
-                  </a>
-                </li>
-                <li ui-route="/about" ng-class="{active:$uiRoute}">
-                  <a href="#/about">
-                    <i class="icon-info-sign"></i>
-                    What is it?
-                  </a>
-                </li>
-                <li>
-                  <a href="https://github.com/joshdmiller/ng-boilerplate#readme">
-                    <i class="icon-book"></i>
-                    Read the Docs
-                  </a>
-                </li>
-                <li>
-                  <a href="https://github.com/joshdmiller/ng-boilerplate">
-                    <i class="icon-github-alt"></i>
-                    Github
-                  </a>
-                </li>
-                <li>
-                  <a href="https://github.com/joshdmiller/ng-boilerplate/issues">
-                    <i class="icon-comments"></i>
-                    Support
-                  </a>
-                </li>
-              </ul>
-            </div>
+      <div class="navbar navbar-default">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" ng-init="menuCollapsed = true"
+            ng-click="menuCollapsed = ! menuCollapsed">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <div class="navbar-brand">
+            ngbp
+            <small>
+              <a href="http://github.com/ngbp/ngbp/blob/v<%= version %>-release/CHANGELOG.md">
+                v<%= version %>
+              </a>
+            </small>
           </div>
         </div>
+        <div class="collapse navbar-collapse" collapse="menuCollapsed">
+          <ul class="nav navbar-nav">
+            <li ui-sref-active="active">
+              <a href ui-sref="home">
+                <i class="fa fa-home"></i>
+                Home
+              </a>
+            </li>
+            <li ui-sref-active="active">
+              <a href ui-sref="about">
+                <i class="fa fa-info-circle"></i>
+                What is it?
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/joshdmiller/ng-boilerplate#readme">
+                <i class="fa fa-book"></i>
+                Read the Docs
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/joshdmiller/ng-boilerplate">
+                <i class="fa fa-github-alt"></i>
+                Github
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/joshdmiller/ng-boilerplate/issues">
+                <i class="fa fa-comments"></i>
+                Support
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
 
@@ -82,10 +95,10 @@ <h3 class="muted">ng-boilerplate <small><a
       <div class="container">
         <div class="footer-inner">
           <ul class="social">
-            <li><a target="_blank" href="http://gplus.to/joshdmiller"><i class="icon-google-plus-sign"></i></a></li>
-            <li><a target="_blank" href="http://twitter.com/joshdmiller"><i class="icon-twitter-sign"></i></a></li>
-            <li><a target="_blank" href="http://linkedin.com/in/joshdmiller"><i class="icon-linkedin-sign"></i></a></li>
-            <li><a target="_blank" href="http://github.com/joshdmiller/ng-boilerplate"><i class="icon-github-sign"></i></a></li>
+            <li><a target="_blank" href="http://gplus.to/joshdmiller"><i class="fa fa-google-plus-sign"></i></a></li>
+            <li><a target="_blank" href="http://twitter.com/joshdmiller"><i class="fa fa-twitter-sign"></i></a></li>
+            <li><a target="_blank" href="http://linkedin.com/in/joshdmiller"><i class="fa fa-linkedin-sign"></i></a></li>
+            <li><a target="_blank" href="http://github.com/joshdmiller/ng-boilerplate"><i class="fa fa-github-sign"></i></a></li>
           </ul>