Web page raw outline

.gitignore

@@ -0,0 +1,9 @@
+*.sql
+*.swp
+*.un~
+bower_components/
+dist/
+mysql/
+node_modules/
+tags
+tmp/

bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "Awesome OS X Website",
+  "version": "0.1.0",
+  "authors": [
+    "Marcel Bischoff <marcel@herrbischoff.com>"
+  ],
+  "license": "All rights reserved",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "fastclick": "~1.0.6"
+  },
+  "overrides": {}
+}

gulpfile.coffee

@@ -0,0 +1,191 @@
+###############################################################################
+## Autoload gulp plugins
+###############################################################################
+
+gulp = require 'gulp'
+gulpLoadPlugins = require 'gulp-load-plugins'
+plugins = gulpLoadPlugins
+  pattern: [
+    'gulp-*'
+    'gulp.*'
+    'del'
+    'main-bower-files'
+    'nib'
+    'rupture'
+    'jeet'
+  ]
+browserSync = require 'browser-sync'
+  .create()
+
+
+###############################################################################
+## Source files and folders
+###############################################################################
+
+paths =
+  images:
+    svg:
+      input: [
+        'src/images/**/*.svg'
+        '!src/images/css/**/*'
+      ]
+      icons: 'src/images/icons/**/*.svg'
+      output: 'src/stylus'
+  jade:
+    input: 'src/jade/**/*.jade'
+    output: 'dist'
+  styles:
+    input: 'src/stylus/**/*.styl'
+    output: 'dist/css'
+  js:
+    main:
+      input: 'src/javascript/**/*.coffee'
+      output: 'dist/javascript'
+
+
+###############################################################################
+## Jade templates
+###############################################################################
+
+gulp.task 'jade', ->
+  return gulp.src paths.jade.input
+    .pipe plugins.changed paths.jade.output, extension: '.html'
+    .pipe plugins.plumber
+      derrorHandler: (error) ->
+        plugins.util.log '(ERROR)', error.message
+        plugins.util.beep()
+      errorHandler: plugins.notify.onError "Error: <%= error.message %>"
+    .pipe plugins.jade
+      pretty: true
+    .pipe gulp.dest paths.jade.output
+
+
+###############################################################################
+## Process CoffeeScript
+###############################################################################
+
+gulp.task 'javascript', ->
+  jsFiles = plugins.mainBowerFiles({base: './bower_components', filter: /.*\.js$/i})
+  jsFiles.push 'src/javascript/*.js'
+  coffeeFilter = plugins.filter 'main.coffee'
+  return gulp
+    .src paths.js.main.input
+    .pipe plugins.plumber
+      derrorHandler: (error) ->
+        plugins.util.log '(ERROR)', error.message
+        plugins.util.beep()
+      errorHandler: plugins.notify.onError "Error: <%= error.message %>"
+    .pipe plugins.sourcemaps.init()
+    .pipe plugins.coffee()
+    .pipe plugins.addSrc.prepend jsFiles
+    .pipe plugins.concat 'bundle.js'
+    # .pipe plugins.uglify()
+    .pipe plugins.rename
+      suffix: '.min'
+    .pipe plugins.sourcemaps.write('../maps')
+    .pipe gulp.dest paths.js.main.output
+
+
+###############################################################################
+## Process SVG icons
+###############################################################################
+
+gulp.task 'icons', ->
+  svgFilter = plugins.filter '*.svg'
+  gulp.src paths.images.svg.icons
+    .pipe plugins.svgSymbols
+      title: false
+    .pipe plugins.filter '*.svg'
+    .pipe plugins.replace /fill=\"(.*)\"/g, 'fill="param(fill) $1"'
+    .pipe gulp.dest 'dist'
+
+
+###############################################################################
+## Stylus
+###############################################################################
+
+gulp.task 'stylus', ['icons'], ->
+  gulp.src paths.styles.input
+    .pipe plugins.plumber
+      derrorHandler: (error) ->
+        plugins.util.log '(ERROR)', error.message
+        plugins.util.beep()
+      errorHandler: plugins.notify.onError "Error: <%= error.message %>"
+    .pipe plugins.sourcemaps.init()
+    .pipe plugins.stylus
+      use: [
+        plugins.nib()
+        plugins.jeet()
+        plugins.rupture()
+      ]
+      'include css': true
+    .pipe plugins.minifyCss()
+    .pipe plugins.sourcemaps.write('../maps')
+    .pipe gulp.dest paths.styles.output
+    .pipe browserSync.stream
+      match: '**/*.css'
+
+
+###############################################################################
+## BrowserSync
+###############################################################################
+
+gulp.task 'jade-watch', ['jade'], ->
+  browserSync.reload()
+  return
+
+gulp.task 'js-watch', ['javascript'], ->
+  browserSync.reload()
+  return
+
+gulp.task 'browser-sync', ['jade'], ->
+  browserSync.init
+    server:
+      baseDir: 'dist'
+    injectChanges: true
+    open: false
+    ghostMode: false
+    notify: false
+
+  gulp.watch(paths.jade.input, ['jade-watch'])
+  gulp.watch paths.js.main.input, ['js-watch']
+  gulp.watch 'bower_components/**/*', ['js-watch']
+  gulp.watch paths.styles.input, ['stylus']
+  gulp.watch paths.images.svg.icons, ['icons']
+
+
+###############################################################################
+## Default task
+###############################################################################
+
+gulp.task 'default', [
+  'jade'
+  'javascript'
+  'icons'
+  'stylus'
+  'browser-sync'
+]
+
+
+###############################################################################
+## Build task
+###############################################################################
+
+gulp.task 'build', [
+  'jade'
+  'javascript'
+  'icons'
+  'stylus'
+]
+
+
+###############################################################################
+## Make a clean slate
+###############################################################################
+
+gulp.task 'clean', ->
+  plugins.del [
+    'dist/*/**'
+    'src/stylus/sprite*.styl'
+  ]
+

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "Awesome-OS-X-Website",
+  "version": "0.1.0",
+  "description": "Awesome OS X Website",
+  "main": "gulpfile.coffee",
+  "devDependencies": {
+    "browser-sync": "^2.5.3",
+    "coffee-script": "^1.9.2",
+    "del": "^2.0.0",
+    "gulp": "^3.8.11",
+    "gulp-add-src": "^0.2.0",
+    "gulp-changed": "^1.3.0",
+    "gulp-coffee": "^2.3.1",
+    "gulp-concat": "^2.5.2",
+    "gulp-filter": "^3.0.1",
+    "gulp-if": "^2.0.0",
+    "gulp-jade": "^1.1.0",
+    "gulp-load-plugins": "^1.0.0-rc.1",
+    "gulp-minify-css": "^1.1.1",
+    "gulp-notify": "^2.2.0",
+    "gulp-plumber": "^1.0.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-replace": "^0.5.3",
+    "gulp-sourcemaps": "^1.5.2",
+    "gulp-stylus": "^2.0.1",
+    "gulp-svg-symbols": "^0.3.1",
+    "gulp-uglify": "^1.2.0",
+    "gulp-util": "^3.0.4",
+    "jeet": "^6.1.2",
+    "main-bower-files": "^2.6.2",
+    "nib": "^1.1.0",
+    "picturefill": "^2.3.1",
+    "rupture": "^0.6.1",
+    "vinyl": "^0.5.1"
+  },
+  "author": "Marcel Bischoff"
+}

src/README.md

@@ -0,0 +1,13 @@
+# Awesome OS X Website
+
+Development version of the Awesome OS X website. This is a raw "proof of concept" build, intended to be improved on.
+
+## Development
+
+```
+npm install
+bower install
+gulp
+```
+
+The generated site is output to the `dist` folder and served via `localhost:3000`.

src/jade/index.jade

@@ -0,0 +1,12 @@
+doctype html
+html
+  head
+    meta(charset="utf-8")
+    meta(name="viewport" content="width=device-width")
+    title Awesome OS X
+    link(rel='stylesheet' href='css/main.css')
+    script(src="javascript/bundle.min.js")
+  body
+    main
+      input.search(type="text")
+      .content