├── .gitignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── Makefile ├── README.md ├── __tests__ └── hello_world.cjsx ├── assets ├── fonts │ ├── fontcustom-preview.html │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.eot │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.svg │ ├── fontcustom_843a498d718455965cd8b0261bce3acb.ttf │ └── fontcustom_843a498d718455965cd8b0261bce3acb.woff └── index.html ├── fontcustom.yml ├── gulpfile.coffee ├── package.json ├── preprocessor.js ├── public └── .gitignore ├── src ├── scripts │ ├── app.cjsx │ ├── hello_world.cjsx │ ├── router.cjsx │ └── styleguide.cjsx └── styles │ ├── _base.scss │ ├── _elements.scss │ ├── _fontcustom.scss │ ├── _fontcustom_embedded.scss │ ├── _form.scss │ ├── _functions.scss │ ├── _mixins.scss │ ├── _table.scss │ ├── _typography.scss │ ├── _variables.scss │ ├── components │ └── _foundation_highlightjs.scss │ ├── icons │ ├── fontcustom │ │ └── templates │ │ │ └── .gitignore │ ├── home.svg │ └── search.svg │ └── main.scss ├── webpack.config.js └── webpack.production.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # Compiled binary addons (http://nodejs.org/api/addons.html) 20 | build/Release 21 | 22 | # Dependency directory 23 | # Deployed apps should consider commenting this line out: 24 | # see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 25 | node_modules 26 | public/bundle.js 27 | .sass-cache/ 28 | public/bundle.js.map 29 | public/index.html 30 | public/main.css 31 | .fontcustom-manifest.json 32 | public/fonts/ 33 | public/main.css.map 34 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'sass' 4 | gem 'compass' 5 | gem 'breakpoint' 6 | gem 'normalize-scss' 7 | gem 'susy' 8 | gem 'modular-scale' 9 | gem 'sass-css-importer' 10 | gem 'fontcustom' 11 | gem 'sassy-buttons' 12 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | breakpoint (2.5.0) 5 | sass (~> 3.3) 6 | sassy-maps (< 1.0.0) 7 | celluloid (0.16.0) 8 | timers (~> 4.0.0) 9 | chunky_png (1.3.3) 10 | compass (1.0.1) 11 | chunky_png (~> 1.2) 12 | compass-core (~> 1.0.1) 13 | compass-import-once (~> 1.0.5) 14 | rb-fsevent (>= 0.9.3) 15 | rb-inotify (>= 0.9) 16 | sass (>= 3.3.13, < 3.5) 17 | compass-core (1.0.1) 18 | multi_json (~> 1.0) 19 | sass (>= 3.3.0, < 3.5) 20 | compass-import-once (1.0.5) 21 | sass (>= 3.2, < 3.5) 22 | ffi (1.9.6) 23 | fontcustom (1.3.7) 24 | json (~> 1.4) 25 | listen (>= 1.0, < 3.0) 26 | thor (~> 0.14) 27 | hitimes (1.2.2) 28 | json (1.8.1) 29 | listen (2.8.3) 30 | celluloid (>= 0.15.2) 31 | rb-fsevent (>= 0.9.3) 32 | rb-inotify (>= 0.9) 33 | modular-scale (2.0.5) 34 | compass (>= 0.12.0) 35 | multi_json (1.10.1) 36 | normalize-scss (3.0.2) 37 | compass-core (~> 1.0, >= 1.0.0) 38 | sass (~> 3.3, >= 3.3.0) 39 | rb-fsevent (0.9.4) 40 | rb-inotify (0.9.5) 41 | ffi (>= 0.5.0) 42 | sass (3.4.9) 43 | sass-css-importer (1.0.0.beta.0) 44 | sass (>= 3.1) 45 | sassy-buttons (0.2.6) 46 | compass (>= 0.12.2) 47 | sassy-maps (0.4.0) 48 | sass (~> 3.3) 49 | susy (2.1.3) 50 | sass (>= 3.3.0, < 3.5) 51 | thor (0.19.1) 52 | timers (4.0.1) 53 | hitimes 54 | 55 | PLATFORMS 56 | ruby 57 | 58 | DEPENDENCIES 59 | breakpoint 60 | compass 61 | fontcustom 62 | modular-scale 63 | normalize-scss 64 | sass 65 | sass-css-importer 66 | sassy-buttons 67 | susy 68 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Kyle Mathews 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | BIN = ./node_modules/.bin 2 | 3 | publish-gh-pages: 4 | git checkout gh-pages 5 | git merge master gh-pages 6 | gulp build 7 | git add --all . 8 | git commit -m "New release" 9 | git push origin gh-pages 10 | git checkout master 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Coffee React Quickstart 2 | ======================= 3 | 4 | Quickstart for creating React.js web applications. 5 | 6 | It has a number of nice goodies baked in including: 7 | 8 | * Live reloading for both CSS *and* Javascript! This really speeds up development. Live reloading is powered by the [Webpack module bundler](http://webpack.github.io/) and [react-hot-loader](https://github.com/gaearon/react-hot-loader) projects. 9 | * Write your JSX in Coffeescript thanks to [coffee-react-transform](https://github.com/jsdf/coffee-react-transform). 10 | * Amazing URL-driven-development (UDD) with the [react-router project](https://github.com/rackt/react-router). 11 | * Uses [Gulp](http://gulpjs.com/) for building CSS and Javascript. Run `gulp watch` for rebuilding css/js on the fly while developing and `gulp build` to create minified versions for deploying to production. 12 | * Includes sensible element stylings and several useful Sass plugins: 13 | * Susy: best-of-breed grid system. 14 | * modular-scale: easily create pleasing modular type scales. 15 | * Sassy Buttons: flexible button styling. 16 | * Breakpoint: Super simple media queries. 17 | 18 | ## Install dependencies 19 | 20 | Clone this repo and then after entering the new directory run `npm install` and `bundle install`. This will install the respective NPM and Ruby Gem dependencies. 21 | 22 | You'll also need to have gulp installed globally to run the coffeescript gulpfile: `npm install -g gulp` 23 | 24 | ## Development 25 | Run in the root of your directory: `npm run watch` 26 | 27 | This will watch the src directories and build on changes and placed the built css and js files in the public directory. It'll serve everything in the /public directory at localhost:8080 28 | 29 | Then try editing `src/scripts/hello_world.cjsx` and see your changes magically show up in your browser with *no* page reload! 30 | 31 | # Production build 32 | To build for production, simply run `gulp build` 33 | 34 | # Demo 35 | Try out the example app included with this quickstart: http://kyleamathews.github.io/coffee-react-quickstart/ 36 | 37 | 38 | -------------------------------------------------------------------------------- /__tests__/hello_world.cjsx: -------------------------------------------------------------------------------- 1 | # @cjsx React.DOM 2 | 3 | # TODO make this work. 4 | 5 | jest.dontMock '../src/scripts/hello_world' 6 | 7 | describe 'HelloWorld', -> 8 | it 'should render an

with the text "Hello World!"', -> 9 | React = require 'react/addons' 10 | HelloWorld = require '../src/scripts/hello_world' 11 | TestUtils = React.addons.TestUtils 12 | 13 | # Render the HelloWorld component. 14 | helloWorld = 15 | TestUtils.renderIntoDocument(helloWorld) 16 | 17 | # Verify the

Hello World!

element was created. 18 | h1 = TestUtils.findRenderedDOMComponentWithTag(helloWorld, 'h1') 19 | expect(h1.getDOMNode().textContent).toEqual("Hello world!") 20 | -------------------------------------------------------------------------------- /assets/fonts/fontcustom-preview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | fontcustom glyphs preview 5 | 6 | 182 | 183 | 184 | 185 | 191 | 192 | 193 | 194 |
195 |
196 |

fontcustom contains 2 glyphs:

197 | Toggle Preview Characters 198 |
199 | 200 | 201 |
202 |
203 | PpPpPpPpPpPpPpPpPpPp 204 |
205 |
206 | 12141618212436486072 207 |
208 |
209 | 210 | 211 |
212 |
213 | 214 |
215 |
216 | PpPpPpPpPpPpPpPpPpPp 217 |
218 |
219 | 12141618212436486072 220 |
221 |
222 | 223 | 224 |
225 |
226 | 227 | 228 | 231 |
232 | 233 | 234 | -------------------------------------------------------------------------------- /assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KyleAMathews/coffee-react-quickstart/0cef18a901c189b61457284024ac8a3c686ded7e/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.eot -------------------------------------------------------------------------------- /assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by FontForge 20120731 at Thu Jul 31 12:57:32 2014 9 | By Kyle Mathews 10 | Created by Kyle Mathews with FontForge 2.0 (http://fontforge.sf.net) 11 | 12 | 13 | 14 | 27 | 28 | 31 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KyleAMathews/coffee-react-quickstart/0cef18a901c189b61457284024ac8a3c686ded7e/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.ttf -------------------------------------------------------------------------------- /assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KyleAMathews/coffee-react-quickstart/0cef18a901c189b61457284024ac8a3c686ded7e/assets/fonts/fontcustom_843a498d718455965cd8b0261bce3acb.woff -------------------------------------------------------------------------------- /assets/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Quick Start 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /fontcustom.yml: -------------------------------------------------------------------------------- 1 | # --------------------------------------------------------------------------- # 2 | # Project Info 3 | # Defaults shown. Learn more about these options by running 4 | # `fontcustom help` or visiting . 5 | # --------------------------------------------------------------------------- # 6 | 7 | font_name: fontcustom 8 | css_selector: .icon-{{glyph}} 9 | preprocessor_path: "" 10 | autowidth: true 11 | no_hash: false 12 | force: false 13 | debug: false 14 | quiet: false 15 | 16 | 17 | # --------------------------------------------------------------------------- # 18 | # Input Paths 19 | # --------------------------------------------------------------------------- # 20 | 21 | input: 22 | vectors: src/styles/icons/ # required 23 | templates: src/styles/icons/fontcustom/templates 24 | 25 | 26 | # --------------------------------------------------------------------------- # 27 | # Output Paths 28 | # --------------------------------------------------------------------------- # 29 | 30 | output: 31 | fonts: assets/fonts # required 32 | css: src/styles/ 33 | 34 | 35 | # --------------------------------------------------------------------------- # 36 | # Templates 37 | # Included in Font Custom: preview, css, scss, scss-rails 38 | # Custom templates should be saved in the INPUT[:templates] directory and 39 | # referenced by their baserame. 40 | # --------------------------------------------------------------------------- # 41 | 42 | templates: 43 | - scss 44 | - preview 45 | -------------------------------------------------------------------------------- /gulpfile.coffee: -------------------------------------------------------------------------------- 1 | gulp = require 'gulp' 2 | gutil = require 'gulp-util' 3 | webpack = require("webpack") 4 | WebpackDevServer = require("webpack-dev-server") 5 | webpackConfig = require("./webpack.config.js") 6 | webpackProductionConfig = require("./webpack.production.config.js") 7 | map = require 'map-stream' 8 | touch = require 'touch' 9 | _ = require 'underscore' 10 | 11 | # Load plugins 12 | $ = require('gulp-load-plugins')() 13 | 14 | # CSS 15 | gulp.task('css', -> 16 | gulp.src(['src/styles/*.sass', 'src/styles/*.scss']) 17 | .pipe($.compass({ 18 | css: 'public/' 19 | sass: 'src/styles' 20 | image: 'src/styles/images' 21 | style: 'nested' 22 | comments: false 23 | bundle_exec: true 24 | time: true 25 | require: [ 26 | 'susy', 27 | 'modular-scale', 28 | 'normalize-scss', 29 | 'sass-css-importer', 30 | 'sassy-buttons', 31 | 'breakpoint'] 32 | })) 33 | .on('error', (err) -> 34 | gutil.log err 35 | ) 36 | .pipe($.size()) 37 | .pipe(gulp.dest('public/')) 38 | .pipe(map((a, cb) -> 39 | if devServer.invalidate? then devServer.invalidate() 40 | cb() 41 | )) 42 | ) 43 | 44 | gulp.task('copy-assets', -> 45 | gulp.src('assets/**') 46 | .pipe(gulp.dest('public')) 47 | .pipe($.size()) 48 | ) 49 | 50 | # Some quick notes on using fontcustom. 51 | # First you need to install some additional software 52 | # as detailed at https://github.com/FontCustom/fontcustom#installation 53 | # On MacOSX, this comment was the only way I got things to work: https://github.com/FontCustom/fontcustom/issues/209#issuecomment-48014939 54 | # Otherwise I got a Python import error. 55 | # 56 | # Then once things are working, things here are setup so that the generated font 57 | # is base64 encoded and included in the css file. For this to work, you 58 | # need to edit the generated scss file at src/styles/_fontcustom.scss to remove 59 | # its font-face imports. 60 | # Font compilation 61 | gulp.task('font', $.shell.task([ 62 | 'fontcustom compile' 63 | ])) 64 | 65 | gulp.task('font-base-64', -> 66 | gulp.src('assets/fonts/*.ttf') 67 | .pipe($.rename('fontcustom.ttf')) 68 | .pipe($.cssfont64()) 69 | .pipe($.rename('_fontcustom_embedded.scss')) 70 | .pipe(gulp.dest('src/styles/')) 71 | ) 72 | 73 | gulp.task "webpack:build", ['css'], (callback) -> 74 | # Run webpack. 75 | webpack webpackProductionConfig, (err, stats) -> 76 | throw new gutil.PluginError("webpack:build", err) if err 77 | gutil.log "[webpack:build]", stats.toString(colors: true) 78 | callback() 79 | return 80 | 81 | 82 | # Create a single instance of the compiler to allow caching. 83 | devCompiler = webpack(webpackConfig) 84 | gulp.task "webpack:build-dev", ['css'], (callback) -> 85 | 86 | # Run webpack. 87 | devCompiler.run (err, stats) -> 88 | throw new gutil.PluginError("webpack:build-dev", err) if err 89 | gutil.log "[webpack:build-dev]", stats.toString(colors: true) 90 | callback() 91 | return 92 | 93 | return 94 | 95 | devServer = {} 96 | gulp.task "webpack-dev-server", ['css'], (callback) -> 97 | # Ensure there's a `./public/main.css` file that can be required. 98 | touch.sync('./public/main.css', time: new Date(0)) 99 | 100 | # Start a webpack-dev-server. 101 | devServer = new WebpackDevServer(webpack(webpackConfig), 102 | contentBase: './public/' 103 | hot: true 104 | watchOptions: 105 | aggregateTimeout: 100 106 | poll: 300 107 | noInfo: true 108 | ) 109 | devServer.listen 8080, "0.0.0.0", (err) -> 110 | throw new gutil.PluginError("webpack-dev-server", err) if err 111 | gutil.log "[webpack-dev-server]", "http://localhost:8080" 112 | callback() 113 | 114 | return 115 | 116 | gulp.task 'default', -> 117 | gulp.start 'build' 118 | 119 | gulp.task 'build', ['webpack:build', 'copy-assets'] 120 | 121 | gulp.task 'watch', ['css', 'copy-assets', 'webpack-dev-server'], -> 122 | gulp.watch(['src/styles/**'], ['css']) 123 | gulp.watch(['assets/**'], ['copy-assets']) 124 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "coffee-react-quickstart", 3 | "description": "Quickstart for creating React.js web applications", 4 | "version": "0.0.1", 5 | "author": "Kyle Mathews ", 6 | "bugs": "https://github.com/KyleAMathews/coffee-react-quickstart/issues", 7 | "dependencies": { 8 | "cjsx-loader": "^2.0.1", 9 | "coffee-loader": "^0.7.2", 10 | "coffee-react-transform": "^3.1.0", 11 | "coffee-script": "^1.9.3", 12 | "css-loader": "^0.14.4", 13 | "gulp": "^3.9.0", 14 | "gulp-compass": "^2.1.0", 15 | "gulp-cssfont64": "0.0.1", 16 | "gulp-load-plugins": "^0.10.0", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-shell": "^0.4.2", 19 | "gulp-size": "^1.2.1", 20 | "gulp-util": "^3.0.5", 21 | "highlight.js": "^8.6.0", 22 | "jest-cli": "^0.4.5", 23 | "map-stream": "0.0.5", 24 | "react": "^0.14.7", 25 | "react-dom": "^0.14.7", 26 | "react-hot-loader": "^1.3.0", 27 | "react-retina-image": "^1.3.3", 28 | "react-router": "^0.13.3", 29 | "style-loader": "^0.12.3", 30 | "touch": "^1.0.0", 31 | "underscore": "^1.8.3", 32 | "webpack": "^1.12.0", 33 | "webpack-dev-server": "^1.10.1" 34 | }, 35 | "homepage": "https://github.com/KyleAMathews/coffee-react-quickstart", 36 | "jest": { 37 | "scriptPreprocessor": "/preprocessor.js", 38 | "unmockedModulePathPatterns": [ 39 | "/node_modules/react" 40 | ], 41 | "testFileExtensions": [ 42 | "coffee", 43 | "js", 44 | "cjsx" 45 | ], 46 | "moduleFileExtensions": [ 47 | "js", 48 | "json", 49 | "coffee", 50 | "cjsx" 51 | ] 52 | }, 53 | "keywords": [ 54 | "react", 55 | "react-tools", 56 | "quickstart", 57 | "coffeescript", 58 | "cjsx" 59 | ], 60 | "license": "MIT", 61 | "main": "server.coffee", 62 | "repository": "git@github.com:KyleAMathews/coffee-react-quickstart.git", 63 | "scripts": { 64 | "watch": "./node_modules/.bin/gulp watch", 65 | "build": "./node_modules/.bin/gulp build", 66 | "test": "jest" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /preprocessor.js: -------------------------------------------------------------------------------- 1 | var coffee = require('coffee-script'); 2 | var transform = require('coffee-react-transform'); 3 | 4 | module.exports = { 5 | process: function(src, path) { 6 | // CoffeeScript files can be .coffee, .litcoffee, or .coffee.md 7 | if (coffee.helpers.isCoffee(path) || (path.match(/\.cjsx/))) { 8 | return coffee.compile(transform(src), {'bare': true}); 9 | } 10 | 11 | return src; 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /public/.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KyleAMathews/coffee-react-quickstart/0cef18a901c189b61457284024ac8a3c686ded7e/public/.gitignore -------------------------------------------------------------------------------- /src/scripts/app.cjsx: -------------------------------------------------------------------------------- 1 | Link = require('react-router').Link 2 | RouteHandler = require('react-router').RouteHandler 3 | 4 | # Provides global navigation for app e.g. the "Hello | Styleguide" at the top. 5 | module.exports = React.createClass 6 | displayName: 'HelloWorld' 7 | render: -> 8 |
9 |
Hello | Styleguide
10 | 11 |
12 | -------------------------------------------------------------------------------- /src/scripts/hello_world.cjsx: -------------------------------------------------------------------------------- 1 | Link = require('react-router').Link 2 | 3 | module.exports = React.createClass 4 | displayName: 'HelloWorld' 5 | 6 | render: -> 7 |
8 |

Hello world!

9 |

You're looking at the Coffeescript React Quickstart project by Kyle Mathews.

10 |

It has a number of nice goodies baked in including:

11 |
    12 |
  • Live reloading while developing for both CSS and Javascript! This really speeds up development. Live reloading is powered by the Webpack module bundler and react-hot-loader projects.
    • 13 |
  • Write your JSX in Coffeescript thanks to coffee-react-transform.
    • 14 |
  • Amazing URL-driven-development (UDD) with the react-router project.
    • 15 |
  • Uses Gulp for building CSS and Javascript. Run gulp watch for rebuilding css/js on the fly while developing and gulp build to create minified versions for deploying to production.
    • 16 |
  • Easily create a custom font icon! Drop svg files in src/styles/icons and use them like {""} (which becomes ) and {""} (which becomes )
    • 17 |
  • Includes sensible element stylings and several useful Sass plugins:
    • 18 | 24 |
25 |
26 | -------------------------------------------------------------------------------- /src/scripts/router.cjsx: -------------------------------------------------------------------------------- 1 | # Load css first thing. It gets injected in the in a