commit c5207e580f1009dd90484359a6985f4367f36a77 Author: John Bintz Date: Thu Feb 20 16:28:13 2014 -0500 initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5a6df20 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +bower_components/ +.sass-cache/ +css/ diff --git a/Gruntfile.coffee b/Gruntfile.coffee new file mode 100644 index 0000000..5148e63 --- /dev/null +++ b/Gruntfile.coffee @@ -0,0 +1,26 @@ +module.exports = (grunt) -> + require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks) + path = require('path') + + grunt.initConfig { + express: + server: + options: + bases: path.resolve(__dirname) + compass: + dist: + options: + config: 'config/compass.rb' + watch: + compass: + files: [ 'sass/*.scss' ] + tasks: [ 'compass' ] + concurrent: + dist: + tasks: [ 'watch:compass', 'server' ] + options: + logConcurrentOutput: true + } + + grunt.registerTask 'server', [ 'express', 'express-keepalive' ] + grunt.registerTask 'default', 'concurrent:dist' diff --git a/README.md b/README.md new file mode 100644 index 0000000..911f0a1 --- /dev/null +++ b/README.md @@ -0,0 +1,4 @@ +John's Bower and Grunt presentation + +After cloning, run `npm install` and `bower install`. Then +run `grunt server` or open `index.html` in your browser. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..13cf262 --- /dev/null +++ b/bower.json @@ -0,0 +1,25 @@ +{ + "name": "bower-and-grunt-presentation", + "version": "0.0.0", + "authors": [ + "John Bintz " + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "jquery": "~2.1.0", + "angular": "~1.2.14-build.2273", + "js-beautify": "~1.4.2", + "solarized": "~0.1.2", + "angular-ui-utils": "bower-keypress", + "bootstrap-sass": "~3.0.2", + "prismjs": "*", + "angular-presentation": "git://github.com/johnbintz/angular-presentation" + } +} diff --git a/config/compass.rb b/config/compass.rb new file mode 100644 index 0000000..5193546 --- /dev/null +++ b/config/compass.rb @@ -0,0 +1,3 @@ +sass_dir = 'sass' +css_dir = 'css' +add_import_path 'bower_components/bootstrap-sass/lib' diff --git a/images/angularjs_download.png b/images/angularjs_download.png new file mode 100644 index 0000000..680040f Binary files /dev/null and b/images/angularjs_download.png differ diff --git a/images/bootstrap_download.png b/images/bootstrap_download.png new file mode 100644 index 0000000..7586d57 Binary files /dev/null and b/images/bootstrap_download.png differ diff --git a/images/bower-logo.png b/images/bower-logo.png new file mode 100644 index 0000000..2ed647c Binary files /dev/null and b/images/bower-logo.png differ diff --git a/images/grunt-logo.png b/images/grunt-logo.png new file mode 100644 index 0000000..93bf2a8 Binary files /dev/null and b/images/grunt-logo.png differ diff --git a/images/jquery_download.png b/images/jquery_download.png new file mode 100644 index 0000000..2d457e1 Binary files /dev/null and b/images/jquery_download.png differ diff --git a/images/nodejs_download.png b/images/nodejs_download.png new file mode 100644 index 0000000..012c27b Binary files /dev/null and b/images/nodejs_download.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9fb6127 --- /dev/null +++ b/index.html @@ -0,0 +1,513 @@ + + + Bower and Grunt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Bower and Grunt + An introduction + + + + + + + + Dependency management tool + specifically for web assets + + + + jQuery, AngularJS, and Bootstrap + + + + + + + + + + + + + + + + <code>mkdir js</code> + + + + <code>mkdir ext/js</code> + + + + 
+          <head>
+            <link rel="stylesheet" href="ext/css/bootstrap.min.css" />
+            <script src="ext/js/jquery-1.10.01.min.js"></script>
+            <script src="ext/js/angular-1.2.15.min.js"></script>
+            <script src="ext/js/bootstrap.min.js"></script>
+          </head>
+
+ + + + yay new versions + + + + + + + + + + + + + + + + Stop. + + + + bower install --save jquery + bower install --save angular + bower install --save bootstrap + + + + Command line time! + + + + http://cli.learncodethehardway.org/ + + + + <code>which node</code> + + + + + + + + <code>npm install -g bower</code> + + + + cd ~/our/project/directory + + + + <code>bower init</code> + + + + + + <code>bower.json</code> + + + + + bower install --save jquery + + + + <code>--save</code> + Save this package's info in bower.json + + + + bower_components/ + + + + 
+          <head>
+            <script src="bower_components/jquery/dist/jquery.min.js"></script>
+          </head>
+
+ + + + bower install --save angular + + + + bower install --save bootstrap + + + + 
+          <head>
+            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
+            <script src="bower_components/jquery/dist/jquery.min.js"></script>
+            <script src="bower_components/jquery/angular.min.js"></script>
+            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+          </head>
+
+ + + + yay new versions + + + + bower update + + + + 
+          <head>
+            <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
+            <script src="bower_components/jquery/dist/jquery.min.js"></script>
+            <script src="bower_components/jquery/angular.min.js"></script>
+            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+          </head>
+
+ + + + Simple! + + + + Sass Bootstrap? + + + + bower install --save bootstrap-sass + + + + 
+          @import('bootstrap');
+
+          h1 {
+            .cats { color: green }
+            .dogs { color: blue }
+          }
+
+ + + + 
+          <head>
+            <link rel="stylesheet" href="output-css/application.css" />
+            <script src="bower_components/jquery/dist/jquery.min.js"></script>
+            <script src="bower_components/jquery/angular.min.js"></script>
+            <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+          </head>
+
+ + + + How to make that CSS file easily? + + + + compass watch + + + + + + + + JavaScript Task Runner + for development & pre-production + + + +
    +
  • make
    • +
  • rake
    • +
  • guard
    • +
+ + + + Tasks are written in JavaScript + + + + Yeoman + + + + You're going to be looking at one eventually + + + + <code>Gruntfile</code> + + + + 
+          module.exports = function(grunt) {
+            require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
+
+            grunt.initConfig({
+              compass: {
+                dist: {
+                  options: {
+                    config: 'config/compass.rb'
+                  }
+                }
+              },
+              watch: {
+                compass: {
+                  files: [ 'sass/*.scss' ],
+                  tasks: [ 'compass' ]
+                }
+              }
+            });
+
+            grunt.registerTask('default', 'watch:compass')
+          };
+
+ + + + whoa man slow down there's a lot going on there + + + + Line by line + + + + "This is a Gruntfile" + 
+          module.exports = function(grunt) {
+
+ + + + "Load in tasks from any npm modules that start with grunt-" + 
+          require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
+
+ + + + A little trick... + + + + 
+          grunt.loadNpmTasks('grunt-contrib-compass');
+          grunt.loadNpmTasks('grunt-contrib-watch');
+
+ + + + (that's what computers are for) + + + + Global npm installation + npm install -g bower + + + + Project-specific npm installation + npm install --save grunt + + + + 
+          npm install --save grunt-contrib-compass
+          npm install --save grunt-contrib-watch
+
+ + + + npm install --save matchdep + + + + 
+          require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
+
+ + + + (neat) + + + + "Configure the pre-designed tasks..." + 
+          grunt.initConfig({
+
+ + + + "...like Compass..." + 
+          compass: {
+            dist: {
+              options: {
+                config: 'config/compass.rb'
+              }
+            }
+          },
+
+ + + + <code>config/compass.rb</code> + 
+          sass_dir = "sass"
+          css_dir = "output-css"
+          add_import_path "bower_components/bootstrap-sass/lib"
+
+ + + + <code>grunt compass:dist</code> + + + + "...and watching file updates..." + 
+          watch: {
+            compass: {
+              files: [ 'sass/*.scss' ],
+              tasks: [ 'compass' ]
+            }
+          }
+
+ + + + <code>grunt watch:compass</code> + + + + "Let's make that the default." + 
+          grunt.registerTask('default', 'watch:compass')
+
+ + + + <code>grunt</code> + + + + 
+          module.exports = function(grunt) {
+            require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
+
+            grunt.initConfig({
+              compass: {
+                dist: {
+                  options: {
+                    config: 'config/compass.rb'
+                  }
+                }
+              },
+              watch: {
+                compass: {
+                  files: [ 'sass/*.scss' ],
+                  tasks: [ 'compass' ]
+                }
+              }
+            });
+
+            grunt.registerTask('default', 'watch:compass')
+          };
+
+ + + + Can't cover all of Grunt tonight + + + + (just a taste) + + + + This presentation uses both Bower and Grunt! + + + + https://github.com/johnbintz/bower-and-grunt-presentation + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..7ddef93 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "bower-and-grunt-presentation", + "version": "0.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "BSD-2-Clause", + "dependencies": { + "grunt": "~0.4.2", + "matchdep": "~0.3.0", + "grunt-express": "~1.2.1", + "grunt-contrib-compass": "~0.7.2", + "grunt-contrib-watch": "~0.5.3", + "grunt-concurrent": "~0.4.3" + } +} diff --git a/sass/app.scss b/sass/app.scss new file mode 100644 index 0000000..cdc058d --- /dev/null +++ b/sass/app.scss @@ -0,0 +1,188 @@ +@import 'compass'; + +// Core variables and mixins +@import "variables"; + +// Modify this for custom colors, font-sizes, etc +@import "mixins"; + +// Grid system and page structure +@import "scaffolding"; +@import "grid"; + +// Base CSS +@import "type"; +@import "code"; +@import "forms"; +@import "tables"; + +// Components: Buttons & Alerts +@import "buttons"; +@import "button-groups"; + +// Note: alerts share common CSS with buttons and thus have styles in buttons.less + +// Components: Nav +@import "navs"; +@import "navbar"; + +// Components: Popovers +@import "modals"; +@import "tooltip"; +@import "popovers"; + +// Components: Misc +@import "progress-bars"; + +// Utility classes +@import "utilities"; + +.current-state { + &, * { + font-size: 25px; + } +} + +pre code { + font-size: 14px; +} + +h1 { + font-size: 65px; + line-height: 65px; + + code { + font-size: 60px; + } +} + +h2 { + font-size: 45px; + line-height: 45px; +} + +.btn { + font-size: 30px; + margin: 20px 0; + padding: 10px; +} + +.controls { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + + a { + position: absolute; + z-index: 100; + bottom: 30px; + + &.previous { + left: 30px; + } + + &.next { + right: 30px; + } + + @include single-transition(opacity, 0.5s); + + &.inactive { + opacity: 0.25; + } + + opacity: 1; + + font-size: 2em; + } +} + +.slide, .slide table { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +table { + width: 800px; + height: 100%; + margin: 0 auto; +} + +td { + width: 100%; + height: 100%; + text-align: center; +} + +pre { + text-align: left; +} + +.slide-hide,.slide-show { + @include single-transition(all, 0.25s); +} + +.slide-hide { + opacity: 1; + @include rotate3d(0, 0, 0); +} + +.slide-hide.slide-hide-active { + opacity: 0; + @include rotate3d(10, 0, 0); +} + +.slide-show { + opacity: 0; + @include rotate3d(10, 0, 0); +} + +.slide-show.slide-show-active { + opacity: 1; + @include rotate3d(0, 0, 0); +} + +.mind_blown-hide, .mind_blown-show { + @include single-transition(all, 1.0s); +} + +.mind_blown-hide { + display: none; +} + +.mind_blown-hide.mind_blown-hide-active { + display: none; +} + +.mind_blown-show { + @include rotate3d(-180, -180, -30); + opacity: 0; +} + +.mind_blown-show.mind_blown-show-active { + @include rotate3d(0, 0, 0); + opacity: 1; +} + +.presentation { + position: fixed !important; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.slide { + +} + +li { + text-align: left; + font-size: 150%; +}