Restructure proj, compile js

bower.json

@@ -19,7 +19,8 @@
     "test",
     "tests"
   ],
-  "dependencies": {
+  "devDependencies": {
+    "closure-compiler": "http://dl.google.com/closure-compiler/compiler-20150315.zip",
     "smooth_scroll": "git://github.com/cferdinandi/smooth-scroll.git#~7.1.1"
   }
 }

gulpfile.js

@@ -18,6 +18,7 @@
  */
 
 var autoprefixer = require('gulp-autoprefixer');
+var closureCompiler = require('gulp-closure-compiler');
 var gulp = require('gulp');
 var plumber = require('gulp-plumber');
 var rename = require('gulp-rename');
@@ -37,18 +38,46 @@ var SASS_OPTIONS = {
   'outputStyle': 'compressed'
 };
 
-gulp.task('buildcss', function() {
+gulp.task('basecss', function() {
   return gulp.src('./src/sass/base.scss')
       .pipe(plumber())
       .pipe(sass(SASS_OPTIONS))
       .pipe(autoprefixer(AUTOPREFIXER_OPTIONS))
-      .pipe(rename('base.css'))
-      .pipe(gulp.dest('./dist/'));
+      .pipe(rename('base.min.css'))
+      .pipe(gulp.dest('./dist/css/'));
+});
+
+gulp.task('basejs', function() {
+  return gulp.src('./src/js/**.js')
+      .pipe(closureCompiler({
+        compilerPath: './bower_components/closure-compiler/compiler.jar',
+        compilerFlags: {
+          compilation_level: 'SIMPLE_OPTIMIZATIONS',
+          warning_level: 'VERBOSE'
+        },
+        fileName: 'base.min.js',
+        js: [
+            './src/js/**.js',
+            '!**_test.js'
+        ],
+        tieredCompilation: true
+      }))
+      .pipe(gulp.dest('./dist/js/'));
+});
+
+gulp.task('sitecss', function() {
+  return gulp.src('./src/sass/site.scss')
+      .pipe(plumber())
+      .pipe(sass(SASS_OPTIONS))
+      .pipe(autoprefixer(AUTOPREFIXER_OPTIONS))
+      .pipe(rename('site.min.css'))
+      .pipe(gulp.dest('./dist/css/'));
 });
 
 gulp.task('watch', function() {
-  gulp.watch(['./src/sass/*.scss'], ['buildcss']);
+  gulp.watch(['./src/js/*.js'], ['basejs']);
+  gulp.watch(['./src/sass/*.scss'], ['basecss', 'sitecss']);
 });
 
-gulp.task('build', ['buildcss']);
-gulp.task('default', ['buildcss', 'watch']);
+gulp.task('build', ['basecss', 'basejs', 'sitecss']);
+gulp.task('default', ['basecss', 'basejs', 'sitecss', 'watch']);

package.json

@@ -10,6 +10,7 @@
     "bower": "^1.6.3",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^3.1.0",
+    "gulp-closure-compiler": "^0.3.1",
     "gulp-plumber": "^1.0.1",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4",

podspec.yaml

@@ -4,8 +4,10 @@ description: Base CSS and JS
 root: /base/
 
 static_dirs:
-- static_dir: /dist/
+- static_dir: /dist/css/
   serve_at: /static/css/
+- static_dir: /dist/js/
+  serve_at: /static/js/
 - static_dir: /static/images/
   serve_at: /static/images/
 - static_dir: /bower_components/smooth_scroll/dist/

src/js/scrollfix.js

@@ -0,0 +1,52 @@
+// Copyright 2015 Steven Le ([email protected])
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @fileoverview Scrollfix.
+ * @author [email protected] (Steven Le)
+ */
+
+goog.provide('base.scrollfix');
+
+/** @private {Element} */
+base.scrollfix.scrollEl_ = null;
+
+/** @private {Element} */
+base.scrollfix.fixedEl_ = null;
+
+/**
+ * Initializes a scrollfix element.
+ * @param {!Element} scrollEl Element to monitor for scroll.
+ * @param {!Element} fixedEl Element to attach an "active" class to when the
+ *     user scrolls past the {@code scrollEl} element.
+ */
+base.scrollfix.init = function(scrollEl, fixedEl) {
+  base.scrollfix.scrollEl_ = scrollEl;
+  base.scrollfix.fixedEl_ = fixedEl;
+
+  document.body.onscroll = base.scrollfix.onScroll_;
+  base.scrollfix.onScroll_();
+};
+
+/**
+ * On scroll callback function.
+ * @private
+ */
+base.scrollfix.onScroll_ = function() {
+  var scrollTop = window.pageYOffset || document.body.scrollTop;
+  var clientTop = document.body.clientTop || 0;
+  var top = scrollTop - clientTop;
+  base.scrollfix.fixedEl_.classList.toggle(
+      'active', top > base.scrollfix.scrollEl_.offsetTop);
+};

src/sass/site.scss

@@ -0,0 +1,176 @@
+// Copyright 2015 Steven Le ([email protected])
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+body {
+  color: #333;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 22px;
+}
+h1,
+h2,
+h3,
+h4 {
+  font-weight: 400;
+}
+
+code {
+  background-color: #f5f5f5;
+  background-image: radial-gradient(#fcfcfc, #f5f5f5);
+  border: 1px solid #dedede;
+  font-family: monospace;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+pre code {
+  border-radius: 3px;
+  display: block;
+  padding: 10px;
+  white-space: pre-wrap;
+}
+
+table {
+  font-weight: 300;
+  table-layout: fixed;
+  width: 100%;
+
+  thead th {
+    font-weight: 400;
+  }
+  tbody td {
+    font-weight: 300;
+  }
+  td,
+  th {
+    padding: 10px 0;
+  }
+  tr {
+    border-bottom: 1px solid #dedede;
+  }
+}
+
+.button {
+  background-color: #2996cc;
+  border-radius: 3px;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 400;
+  padding: 10px 40px;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #2586b7;
+  }
+}
+
+.border-bottom {
+  border-bottom: 1px solid #dedede;
+}
+
+#overview {
+  background-color: #5fb7e4;
+  background-image: radial-gradient(circle, #5fb7e4, #4ca4d2);
+  color: #fff;
+
+  h1 {
+    font-size: 20px;
+    line-height: 32px;
+    margin-bottom: 0;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    font-size: 38px;
+    font-weight: 300;
+    line-height: 40px;
+    max-width: 400px;
+  }
+}
+
+.subnav {
+  background-color: #f5f5f5;
+  background-image: radial-gradient(#fcfcfc, #f5f5f5);
+  border-bottom: 1px solid #dedede;
+  border-top: 1px solid #dedede;
+  padding: 15px 0;
+
+  a,
+  a:visited {
+    color: #2996cc;
+    font-size: 13px;
+    font-weight: 400;
+    margin-right: 20px;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+  a:hover {
+    color: #2586b7;
+  }
+
+  &.scrollfix {
+    display: none;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+  }
+  &.scrollfix.active {
+    display: block;
+  }
+}
+
+#grid .content {
+  padding: 60px 0;
+}
+
+.demo {
+  padding: 20px 0;
+
+  h4 {
+    font-weight: 300;
+  }
+}
+.demo-box {
+  background-color: #f5f5f5;
+  background-image: radial-gradient(#fcfcfc, #f5f5f5);
+  border: 1px solid #dedede;
+  border-radius: 3px;
+  height: 20px;
+  width: 100%;
+
+  &.short {
+    height: 10px;
+  }
+  &.tall {
+    height: 50px;
+  }
+}
+
+.icon {
+  height: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50px;
+
+  &.placeholder {
+    border: 2px solid #dedede;
+    border-radius: 50%;
+  }
+}

views/_base.html

@@ -4,7 +4,7 @@
 <title>Base</title>
 <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
 <link rel="shortcut icon" href="/static/images/favicon.ico">
-<link rel="stylesheet" media="screen" href="/static/css/base.css">
+<link rel="stylesheet" media="screen" href="/static/css/base.min.css">
 <script>
 if (window.location.host.substr(-10) == '.github.io'
     && window.location.protocol != 'https:') {