Frontend build with zurb foundation to reestructure CCGN styles

frontend-build/.gitignore

@@ -0,0 +1,5 @@
+.DS_Store
+bower_components
+node_modules
+npm-debug.log
+css

frontend-build/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## Version 1.0 (November 19, 2015)
+
+Initial release.

frontend-build/README.md

@@ -0,0 +1,31 @@
+# Frontend Build for cc-commoners theme
+
+This is the frontend build environment for cc-commoners theme. It works with [Foundation for Sites 6](http://foundation.zurb.com/sites). Also includes a Sass compiler and another tasks in gulp for building dependencies files and minify images
+
+## Installation
+
+To use this template, your computer needs:
+
+- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
+- [Git](https://git-scm.com/)
+
+This template can be installed with the Foundation CLI, or downloaded and set up manually.
+
+### Using the CLI
+
+Install the Foundation CLI with this command:
+
+```bash
+npm install foundation-cli --global
+```
+
+
+### Setup
+
+To install all the  needed dependencies:
+
+```bash
+npm install
+```
+
+Finally, run `gulp watch` to run the Sass compiler watch. It will re-run every time you save a Sass file.

frontend-build/gulpfile.js

@@ -0,0 +1,98 @@
+var gulp          = require('gulp');
+var browserSync   = require('browser-sync').create();
+var $             = require('gulp-load-plugins')();
+var autoprefixer  = require('autoprefixer');
+var rename        = require('gulp-rename');
+var uglify        = require('gulp-uglify');
+var concat        = require('gulp-concat');
+var imagemin      = require('gulp-imagemin');
+var cssmin        = require('gulp-cssmin');
+var sourcemaps    = require('gulp-sourcemaps');
+
+var template_name = 'cc-commoners';
+var sassPaths = [
+  'node_modules/foundation-sites/scss',
+  'node_modules/motion-ui/src'
+];
+
+var js = {
+  //JS Dependencies
+  fileList: [
+    'node_modules/foundation-sites/dist/js/plugins/foundation.core.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.keyboard.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.triggers.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.timerAndImageLoader.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.box.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.motion.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.util.nest.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.sticky.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.tabs.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.equalizer.js',
+    'node_modules/foundation-sites/dist/js/plugins/foundation.tooltip.js',
+    //'node_modules/swipebox/src/js/jquery.swipebox.js',
+    //'node_modules/slick-carousel/slick/slick.js',
+  ],
+  //CSS Dependencies
+  styles: [
+    'node_modules/swipebox/src/css/swipebox.css',
+    'node_modules/slick-carousel/slick/slick.css',
+    'node_modules/slick-carousel/slick/slick-theme.css',
+  ]
+};
+/* Build single JS dependencies file  */
+gulp.task('build-js', function () {
+  return gulp.src(js.fileList)
+    .pipe(sourcemaps.init())
+    .pipe(concat('dependencies.js'))
+    .pipe(uglify().on('error', gutil.log))
+    //.pipe( sourcemaps.write( '/' ) )
+    .pipe(gulp.dest('../themes/' + template_name + '/assets/js'));
+});
+/* Theme Image optimization */
+gulp.task('imgmin', function () {
+  gulp.src('../themes/' + template_name + '/img/*')
+    .pipe(imagemin())
+    .pipe(gulp.dest('../themes/' + template_name + '/assets/images/'))
+});
+/* Build single CSS dependencies file */
+gulp.task('build-css', function () {
+  return gulp.src(js.styles)
+    .pipe(sourcemaps.init())
+    .pipe(concat('dependencies.css'))
+    .pipe(cssmin())
+    //.pipe( sourcemaps.write( '/' ) )
+    .pipe(gulp.dest('../themes/' + template_name + '/assets/css'));
+});
+function sass() {
+  return gulp.src('scss/app.scss')
+    .pipe($.sass({
+      includePaths: sassPaths,
+      //outputStyle: 'compressed' // if css compressed **file size**
+    })
+      .on('error', $.sass.logError))
+    .pipe($.postcss([
+      autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] })
+    ]))
+    //.pipe(gulp.dest('css'))
+    //.pipe(browserSync.stream());
+    .pipe(rename('style.css'))
+    .pipe(gulp.dest('../themes/' + template_name +'/assets/css'))
+    .pipe(gulp.dest('./css'));
+};
+
+function serve() {
+  browserSync.init({
+    server: "./"
+  });
+
+  gulp.watch("scss/*.scss", sass);
+  gulp.watch("*.html").on('change', browserSync.reload);
+}
+function watch() {
+  gulp.watch("scss/*.scss", sass)
+}
+gulp.task('sass', sass);
+gulp.task('watch', watch);
+gulp.task('serve', gulp.series('sass', serve));
+gulp.task('default', gulp.series('sass', serve));

frontend-build/index.html

@@ -0,0 +1,170 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Foundation for Sites</title>
+    <link rel="stylesheet" href="css/app.css">
+  </head>
+  <body>
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x">
+        <div class="large-12 cell">
+          <h1>Welcome to Foundation</h1>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x">
+        <div class="large-12 cell">
+          <div class="callout">
+            <h3>We&rsquo;re stoked you want to try Foundation! </h3>
+            <p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+            <p>Once you've exhausted the fun in this document, you should check out:</p>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
+              </div>
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
+              </div>
+              <div class="large-4 medium-4 cell">
+                <p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 medium-push-2 cell">
+                <p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
+              </div>
+              <div class="large-4 medium-4 medium-pull-2 cell">
+                <p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x">
+        <div class="large-8 medium-8 cell">
+          <h5>Here&rsquo;s your basic grid:</h5>
+          <!-- Grid Example -->
+
+          <div class="grid-x grid-padding-x">
+            <div class="large-12 cell">
+              <div class="primary callout">
+                <p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid-x grid-padding-x">
+            <div class="large-6 medium-6 cell">
+              <div class="primary callout">
+                <p>Six cell</p>
+              </div>
+            </div>
+            <div class="large-6 medium-6 cell">
+              <div class="primary callout">
+                <p>Six cell</p>
+              </div>
+            </div>
+          </div>
+          <div class="grid-x grid-padding-x">
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+            <div class="large-4 medium-4 small-4 cell">
+              <div class="primary callout">
+                <p>Four cell</p>
+              </div>
+            </div>
+          </div>
+
+          <hr />
+
+          <h5>We bet you&rsquo;ll need a form somewhere:</h5>
+          <form>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-12.cell" />
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-4 medium-4 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.cell" />
+              </div>
+              <div class="large-4 medium-4 cell">
+                <label>Input Label</label>
+                <input type="text" placeholder="large-4.cell" />
+              </div>
+              <div class="large-4 medium-4 cell">
+                <div class="grid-x">
+                  <label>Input Label</label>
+                  <div class="input-group">
+                    <input type="text" placeholder="small-9.cell" class="input-group-field" />
+                    <span class="input-group-label">.com</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Select Box</label>
+                <select>
+                  <option value="husker">Husker</option>
+                  <option value="starbuck">Starbuck</option>
+                  <option value="hotdog">Hot Dog</option>
+                  <option value="apollo">Apollo</option>
+                </select>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-6 medium-6 cell">
+                <label>Choose Your Favorite</label>
+                <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
+                <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
+              </div>
+              <div class="large-6 medium-6 cell">
+                <label>Check these out</label>
+                <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
+                <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
+              </div>
+            </div>
+            <div class="grid-x grid-padding-x">
+              <div class="large-12 cell">
+                <label>Textarea Label</label>
+                <textarea placeholder="small-12.cell"></textarea>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="large-4 medium-4 cell">
+          <h5>Try one of these buttons:</h5>
+          <p><a href="#" class="button">Simple Button</a><br/>
+          <a href="#" class="success button">Success Btn</a><br/>
+          <a href="#" class="alert button">Alert Btn</a><br/>
+          <a href="#" class="secondary button">Secondary Btn</a></p>
+          <div class="callout">
+            <h5>So many components, girl!</h5>
+            <p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
+            <a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="node_modules/jquery/dist/jquery.js"></script>
+    <script src="node_modules/what-input/dist/what-input.js"></script>
+    <script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>

frontend-build/js/app.js

@@ -0,0 +1 @@
+$(document).foundation();