github-migration
/
bower-and-grunt-presentation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

This commit is contained in:
John Bintz 2014-02-20 16:28:13 -05:00
commit c5207e580f
14 changed files with 782 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
node_modules/
bower_components/
.sass-cache/
css/

26
Gruntfile.coffee Normal file
View 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
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
images/bootstrap_download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
images/bower-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/grunt-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
images/jquery_download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
images/nodejs_download.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

513
index.html Normal file
View 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">
&lt;head>
&lt;link rel="stylesheet" href="ext/css/bootstrap.min.css" />
&lt;script src="ext/js/jquery-1.10.01.min.js">&lt;/script>
&lt;script src="ext/js/angular-1.2.15.min.js">&lt;/script>
&lt;script src="ext/js/bootstrap.min.js">&lt;/script>
&lt;/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">
&lt;head>
&lt;script src="bower_components/jquery/dist/jquery.min.js">&lt;/script>
&lt;/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">
&lt;head>
&lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
&lt;script src="bower_components/jquery/dist/jquery.min.js">&lt;/script>
&lt;script src="bower_components/jquery/angular.min.js">&lt;/script>
&lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js">&lt;/script>
&lt;/head>
</pre>
</slide>
<slide>
<title>yay new versions</title>
</slide>
<slide>
<subtitle><code>bower update</code></subtitle>
</slide>
<slide>
<pre language="html">
&lt;head>
&lt;link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
&lt;script src="bower_components/jquery/dist/jquery.min.js">&lt;/script>
&lt;script src="bower_components/jquery/angular.min.js">&lt;/script>
&lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js">&lt;/script>
&lt;/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">
&lt;head>
&lt;link rel="stylesheet" href="output-css/application.css" />
&lt;script src="bower_components/jquery/dist/jquery.min.js">&lt;/script>
&lt;script src="bower_components/jquery/angular.min.js">&lt;/script>
&lt;script src="bower_components/bootstrap/dist/js/bootstrap.min.js">&lt;/script>
&lt;/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 &amp; 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
View 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
View 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%;
}