initial commit
This commit is contained in:
John Bintz
commit
c5207e580f
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
bower_components/
|
||||||
|
.sass-cache/
|
||||||
|
css/
|
||||||
26
Gruntfile.coffee
Normal file
26
Gruntfile.coffee
Normal file
@ -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'
|
||||||
4
README.md
Normal file
4
README.md
Normal file
@ -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.
|
||||||
25
bower.json
Normal file
25
bower.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "bower-and-grunt-presentation",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"authors": [
|
||||||
|
"John Bintz <john@coswellproductions.com>"
|
||||||
|
],
|
||||||
|
"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"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
config/compass.rb
Normal file
3
config/compass.rb
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
sass_dir = 'sass'
|
||||||
|
css_dir = 'css'
|
||||||
|
add_import_path 'bower_components/bootstrap-sass/lib'
|
||||||
BIN
images/angularjs_download.png
Normal file
BIN
images/angularjs_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
images/bootstrap_download.png
Normal file
BIN
images/bootstrap_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
images/bower-logo.png
Normal file
BIN
images/bower-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
images/grunt-logo.png
Normal file
BIN
images/grunt-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
images/jquery_download.png
Normal file
BIN
images/jquery_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
images/nodejs_download.png
Normal file
BIN
images/nodejs_download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
513
index.html
Normal file
513
index.html
Normal file
@ -0,0 +1,513 @@
|
|||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Bower and Grunt</title>
|
||||||
|
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/angular-ui-utils/keypress.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/js-beautify/js/lib/beautify.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/js-beautify/js/lib/beautify-html.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/js-beautify/js/lib/beautify-css.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/prismjs/prism.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/prismjs/components/prism-bash.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/prism-langs/prism.ruby.js"></script>
|
||||||
|
<script type="text/javascript" src="bower_components/angular-presentation/dist/angular-presentation.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/app.css" />
|
||||||
|
<link rel="stylesheet" href="bower_components/angular-presentation/styles/solarized-dark.css" />
|
||||||
|
<link rel="stylesheet" href="bower_components/prismjs/prism-coy.css" />
|
||||||
|
</head>
|
||||||
|
<body ng-app="presentation" ui-keydown="{left: 'options.previousSlide()', right: 'options.nextSlide()', space: 'options.nextSlide()'}">
|
||||||
|
<script type="text/ng-template" id="presentation.html">
|
||||||
|
<div class="presentation"><div class="presentation-wrap" ng-transclude /></div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="slide.html">
|
||||||
|
<article class="slide" ng-animate="'slide'" ng-show="options.currentSlide == id">
|
||||||
|
<table border="0" cellpadding="0" cellspacing="0">
|
||||||
|
<tr><td valign="center" ng-transclude /></tr>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="title.html">
|
||||||
|
<div>
|
||||||
|
<h1 ng-bind-html="title"></h1>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="subtitle.html">
|
||||||
|
<h2 ng-bind-html="subtitle" />
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="controls.html">
|
||||||
|
<aside class="controls">
|
||||||
|
<a class="previous" href="#previous" ng-class="{ inactive: !options.hasPrevious() }" ng-click="options.previousSlide()">Previous</a>
|
||||||
|
<a class="next" href="#next" ng-class="{ inactive: !options.hasNext() }" ng-click="options.nextSlide()">Next</a>
|
||||||
|
</aside>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/ng-template" id="code_displayer.html">
|
||||||
|
<pre><code></code></pre>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<presentation>
|
||||||
|
<controls></controls>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Bower and Grunt</title>
|
||||||
|
<subtitle>An introduction</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/bower-logo.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Dependency management tool</title>
|
||||||
|
<subtitle>specifically for web assets</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>jQuery, AngularJS, and Bootstrap</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/jquery_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/angularjs_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/bootstrap_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>mkdir js</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>mkdir ext/js</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="html">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>yay new versions</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/jquery_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/angularjs_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/bootstrap_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Stop.</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower install --save jquery</code></subtitle>
|
||||||
|
<subtitle><code>bower install --save angular</code></subtitle>
|
||||||
|
<subtitle><code>bower install --save bootstrap</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Command line time!</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><a href="http://cli.learncodethehardway.org/">http://cli.learncodethehardway.org/</a></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>which node</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/nodejs_download.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>npm install -g bower</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>cd ~/our/project/directory</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>bower init</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<script type="text/code-grabber" for="bower.json">
|
||||||
|
{
|
||||||
|
name: 'directory',
|
||||||
|
version: '0.0.0',
|
||||||
|
authors: [
|
||||||
|
'John Bintz <john@coswellproductions.com>'
|
||||||
|
],
|
||||||
|
license: 'MIT',
|
||||||
|
ignore: [
|
||||||
|
'**/.*',
|
||||||
|
'node_modules',
|
||||||
|
'bower_components',
|
||||||
|
'test',
|
||||||
|
'tests'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<title><code>bower.json</code></title>
|
||||||
|
<code-displayer for="bower.json" language="json"></code-displayer>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower install --save jquery</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>--save</code></title>
|
||||||
|
<subtitle>Save this package's info in <code>bower.json</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower_components/</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="html">
|
||||||
|
<head>
|
||||||
|
<script src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||||
|
</head>
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower install --save angular</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower install --save bootstrap</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="html">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>yay new versions</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower update</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="html">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Simple!</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Sass Bootstrap?</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>bower install --save bootstrap-sass</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="sass">
|
||||||
|
@import('bootstrap');
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
.cats { color: green }
|
||||||
|
.dogs { color: blue }
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="html">
|
||||||
|
<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>
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>How to make that CSS file easily?</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>compass watch</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<img src="images/grunt-logo.png" />
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>JavaScript Task Runner</title>
|
||||||
|
<subtitle>for development & pre-production</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<ul>
|
||||||
|
<li><code>make</code></li>
|
||||||
|
<li><code>rake</code></li>
|
||||||
|
<li><code>guard</code></li>
|
||||||
|
</ul>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>Tasks are written in JavaScript</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Yeoman</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>You're going to be looking at one eventually</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>Gruntfile</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="javascript">
|
||||||
|
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')
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>whoa man slow down there's a lot going on there</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Line by line</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>"This is a Gruntfile"</subtitle>
|
||||||
|
<pre language="javascript">
|
||||||
|
module.exports = function(grunt) {
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>"Load in tasks from any npm modules that start with grunt-"</subtitle>
|
||||||
|
<pre language="javascript">
|
||||||
|
require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>A little trick...</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="javascript">
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-compass');
|
||||||
|
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>(that's what computers are for)</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Global npm installation</title>
|
||||||
|
<subtitle><code>npm install -g bower</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Project-specific npm installation</title>
|
||||||
|
<subtitle><code>npm install --save grunt</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="bash">
|
||||||
|
npm install --save grunt-contrib-compass
|
||||||
|
npm install --save grunt-contrib-watch
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle><code>npm install --save matchdep</code></subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="javascript">
|
||||||
|
require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>(neat)</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>"Configure the pre-designed tasks..."</title>
|
||||||
|
<pre language="javascript">
|
||||||
|
grunt.initConfig({
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>"...like Compass..."</title>
|
||||||
|
<pre language="javascript">
|
||||||
|
compass: {
|
||||||
|
dist: {
|
||||||
|
options: {
|
||||||
|
config: 'config/compass.rb'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>config/compass.rb</code></title>
|
||||||
|
<pre language="ruby">
|
||||||
|
sass_dir = "sass"
|
||||||
|
css_dir = "output-css"
|
||||||
|
add_import_path "bower_components/bootstrap-sass/lib"
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>grunt compass:dist</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>"...and watching file updates..."</title>
|
||||||
|
<pre language="javascript">
|
||||||
|
watch: {
|
||||||
|
compass: {
|
||||||
|
files: [ 'sass/*.scss' ],
|
||||||
|
tasks: [ 'compass' ]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>grunt watch:compass</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>"Let's make that the default."</title>
|
||||||
|
<pre language="javascript">
|
||||||
|
grunt.registerTask('default', 'watch:compass')
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title><code>grunt</code></title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<pre language="javascript">
|
||||||
|
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')
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<title>Can't cover all of Grunt tonight</title>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>(just a taste)</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>This presentation uses both Bower and Grunt!</subtitle>
|
||||||
|
</slide>
|
||||||
|
|
||||||
|
<slide>
|
||||||
|
<subtitle>https://github.com/johnbintz/bower-and-grunt-presentation</subtitle>
|
||||||
|
</slide>
|
||||||
|
</presentation>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
19
package.json
Normal file
19
package.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
188
sass/app.scss
Normal file
188
sass/app.scss
Normal file
@ -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%;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user