commit 844ca427a388b6d6f81459afe2e71fabcedda9db Author: Joe Fleming Date: Tue Aug 19 18:44:14 2014 -0700 initial commit, starting from prototool diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..352c1d4 --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "public/vendor" +} \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4e3cc0c --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +public/vendor +public/js +public/css +*.swp diff --git a/README.md b/README.md new file mode 100644 index 0000000..f15a522 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +# Prototool + +Stupid simple tool for making quick (mostly frontend) prototypes + +Includes static server with live reload + +# Usage + +Requires node, npm and bower. + +``` +npm install +bower install +``` + +Then just run `gulp` and open [localhost:8080](http://localhost:8080) + +## Code + +### Coffeescript + +Coffeescript is great for prototyping, so it's included. Anything in `src/coffee` will be compiled to JS and placed in `public/js` + +### Less + +CSS pre-processors are a god-send! Less is simple and you can drop normal CSS into it. Anything in `src/less` will be compiled to CSS and included in `public/css` + +### Require + +Require is nice, so it's included. `src/coffee/main.coffee` is the entry point. + +### Index + +`/public` is the main webroot here. `index.html` is loaded by default, and is a stripped down version of the H5BP template. Add more as needed. + +Normalizr and Modernizr are also both included. \ No newline at end of file diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..ab6ad56 --- /dev/null +++ b/bower.json @@ -0,0 +1,26 @@ +{ + "name": "protomap", + "version": "0.0.0", + "authors": [ + "Joe Fleming " + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "coffee-script": "~1.7.1", + "html5-boilerplate": "~4.3.0", + "requirejs": "~2.1.11", + "less": "~1.7.0", + "backbone": "~1.1.2", + "lodash": "~2.4.1", + "jquery": "~2.1.0", + "bluebird": "~1.2.3", + "modernizr": "~2.7.2" + } +} diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..04e5a5e --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,87 @@ +var gulp = require('gulp'); +var gutil = require('gulp-util'); +var gless = require('gulp-less'); +var gclint = require('gulp-coffeelint'); +var gcoffee = require('gulp-coffee'); +var _ = require('lodash'); +var lr = require('tiny-lr'); +var static = require('node-static'); +var exec = require('child_process').exec; + +var server = lr(); + +var config = { + paths: { + less: { + src: 'src/less/**/*.less', + dest: 'public/css' + }, + coffee: { + src: 'src/coffee/**/*.coffee', + dest: 'public/js' + } + }, + webport: 8080, + lrport: 35729 +}; + +gulp.task('less', function() { + gulp.src(config.paths.less.src) + .pipe(gless({ sourceMap: true })) + .pipe(gulp.dest(config.paths.less.dest)); +}); + +gulp.task('lint', function() { + gulp.src(config.paths.coffee.src) + .pipe(gclint()); +}); + +gulp.task('coffee', ['lint'], function() { + gulp.src(config.paths.coffee.src) + .pipe(gcoffee({ bare: true })) + .pipe(gulp.dest(config.paths.coffee.dest)); +}); + +gulp.task('tiny', function(next) { + server.listen(config.lrport, function(err) { + if (err) { + return console.error(err); + } + gutil.log('Server listening on port: ', config.lrport); + next(); + }); +}); + +gulp.task('server', function(next) { + var file = new static.Server('./public', { cache: false }); + require('http').createServer(function(req, res) { + req.addListener('end', function() { + file.serve(req, res); + }).resume(); + }).listen(config.webport, function() { + gutil.log('Server listening on port: ', config.webport); + next(); + }); +}); + +gulp.task('open', function(next) { + exec('open http://localhost:' + config.webport, function() { + next(); + }); +}) + +gulp.task('watch', ['tiny'], function () { + gulp.watch(config.paths.less.src, ['less']); + gulp.watch(config.paths.coffee.src, ['coffee']); + + gulp.watch(['./public/**/*', '!./public/vendor/**/*'], function(e) { + gutil.log('Notifying browser of changes'); + server.changed({ + body: { + files: [e.path] + } + }); + }); +}); + +gulp.task('default', ['less', 'coffee', 'server', 'watch']); diff --git a/package.json b/package.json new file mode 100644 index 0000000..94ecee1 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "name": "protomap", + "version": "0.0.0", + "description": "", + "main": "index.js", + "dependencies": { + "tiny-lr": "0.0.5", + "gulp-util": "~2.2.14", + "gulp-watch": "~0.6.2", + "gulp": "~3.6.2", + "gulp-coffee": "~1.4.2", + "gulp-less": "~1.2.3", + "lodash": "~2.4.1", + "gulp-coffeelint": "~0.3.2", + "node-static": "~0.7.3" + }, + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/public/img/.empty b/public/img/.empty new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..a9b3b9b --- /dev/null +++ b/public/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + +

Hello world! This is prototool.

+ + + + + diff --git a/src/coffee/.empty b/src/coffee/.empty new file mode 100644 index 0000000..e69de29 diff --git a/src/coffee/app.coffee b/src/coffee/app.coffee new file mode 100644 index 0000000..d4ac60e --- /dev/null +++ b/src/coffee/app.coffee @@ -0,0 +1,2 @@ +define (require) -> + console.log('hello'); \ No newline at end of file diff --git a/src/coffee/main.coffee b/src/coffee/main.coffee new file mode 100644 index 0000000..62012d6 --- /dev/null +++ b/src/coffee/main.coffee @@ -0,0 +1,50 @@ +### +Configuration for require.js +### + +BOWERPATH = "/vendor/" +NODEPATH = "../../node_modules/" + +requirejs.config + baseUrl: "/js" + + paths: + jsx: BOWERPATH + "require-jsx/jsx" + text: BOWERPATH + "requirejs-plugins/lib/text" + async: BOWERPATH + "requirejs-plugins/src/async" + json: BOWERPATH + "requirejs-plugins/src/json" + backbone: BOWERPATH + "backbone/backbone" + lodash: BOWERPATH + "lodash/dist/lodash.underscore" + jquery: BOWERPATH + "jquery/dist/jquery" + bluebird: BOWERPATH + "bluebird/js/browser/bluebird" + react: BOWERPATH + "react/react" + JSXTransformer: BOWERPATH + "react/JSXTransformer" + bacon: BOWERPATH + "bacon/dist/Bacon" + "react-bacon": NODEPATH + "react-bacon/dist/react-bacon" + + shim: + backbone: + deps: [ + "jquery" + "lodash" + ] + exports: "Backbone" + + JSXTransformer: + exports: "JSXTransformer" + + "react-bacon": + deps: [ + "bacon" + "react" + ] + + urlArgs: (new Date()).getTime() # Disable caching + + +# Add Google Maps shim +define "gmaps", ["async!//maps.google.com/maps/api/js?client=gme-colonyamericanhomes&v=3.exp&sensor=false"], -> + "use strict" + return window.google.maps + +require ['app'] \ No newline at end of file diff --git a/src/less/.empty b/src/less/.empty new file mode 100644 index 0000000..e69de29 diff --git a/src/less/main.less b/src/less/main.less new file mode 100644 index 0000000..294e019 --- /dev/null +++ b/src/less/main.less @@ -0,0 +1,304 @@ +/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ + +/* + * What follows is the result of much research on cross-browser styling. + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, + * Kroc Camen, and the H5BP dev community and team. + */ + +/* ========================================================================== + Base styles: opinionated defaults + ========================================================================== */ + +html, +button, +input, +select, +textarea { + color: #222; +} + +html { + font-size: 1em; + line-height: 1.4; +} + +/* + * Remove text-shadow in selection highlight: h5bp.com/i + * These selection rule sets have to be separate. + * Customize the background color to match your design. + */ + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +::selection { + background: #b3d4fc; + text-shadow: none; +} + +/* + * A better looking default horizontal rule + */ + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +/* + * Remove the gap between images, videos, audio and canvas and the bottom of + * their containers: h5bp.com/i/440 + */ + +audio, +canvas, +img, +video { + vertical-align: middle; +} + +/* + * Remove default fieldset styles. + */ + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +/* + * Allow only vertical resizing of textareas. + */ + +textarea { + resize: vertical; +} + +/* ========================================================================== + Browse Happy prompt + ========================================================================== */ + +.browsehappy { + margin: 0.2em 0; + background: #ccc; + color: #000; + padding: 0.2em 0; +} + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + + + + + + + + + + + + + + + + + +/* ========================================================================== + Helper classes + ========================================================================== */ + +/* + * Image replacement + */ + +.ir { + background-color: transparent; + border: 0; + overflow: hidden; + /* IE 6/7 fallback */ + *text-indent: -9999px; +} + +.ir:before { + content: ""; + display: block; + width: 0; + height: 150%; +} + +/* + * Hide from both screenreaders and browsers: h5bp.com/u + */ + +.hidden { + display: none !important; + visibility: hidden; +} + +/* + * Hide only visually, but have it available for screenreaders: h5bp.com/v + */ + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* + * Extends the .visuallyhidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ + +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +/* + * Hide visually and from screenreaders, but maintain layout + */ + +.invisible { + visibility: hidden; +} + +/* + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. + */ + +.clearfix:before, +.clearfix:after { + content: " "; /* 1 */ + display: table; /* 2 */ +} + +.clearfix:after { + clear: both; +} + +/* + * For IE 6/7 only + * Include this rule to trigger hasLayout and contain floats. + */ + +.clearfix { + *zoom: 1; +} + +/* ========================================================================== + EXAMPLE Media Queries for Responsive Design. + These examples override the primary ('mobile first') styles. + Modify as content requires. + ========================================================================== */ + +@media only screen and (min-width: 35em) { + /* Style adjustments for viewports that meet the condition */ +} + +@media print, + (-o-min-device-pixel-ratio: 5/4), + (-webkit-min-device-pixel-ratio: 1.25), + (min-resolution: 120dpi) { + /* Style adjustments for high resolution devices */ +} + +/* ========================================================================== + Print styles. + Inlined to avoid required HTTP connection: h5bp.com/r + ========================================================================== */ + +@media print { + * { + background: transparent !important; + color: #000 !important; /* Black prints faster: h5bp.com/s */ + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + /* + * Don't show links for images, or javascript/internal links + */ + + .ir a:after, + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; /* h5bp.com/t */ + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + @page { + margin: 0.5cm; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } +}