initial commit
authorMark Hayes <mark@zurb.com>
Mon, 18 Nov 2013 20:08:15 +0000 (12:08 -0800)
committerMark Hayes <mark@zurb.com>
Mon, 18 Nov 2013 20:08:15 +0000 (12:08 -0800)
.gitignore [new file with mode: 0644]
Gruntfile.js [new file with mode: 0644]
README.md [new file with mode: 0644]
bower.json [new file with mode: 0644]
index.html [new file with mode: 0644]
js/app.js [new file with mode: 0644]
package.json [new file with mode: 0644]
scss/_settings.scss [new file with mode: 0644]
scss/app.scss [new file with mode: 0644]

diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..d2573be
--- /dev/null
@@ -0,0 +1,4 @@
+*.DS_Store
+/css/*
+/bower_components/*
+/node_modules/*
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644 (file)
index 0000000..8da6324
--- /dev/null
@@ -0,0 +1,34 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+
+    sass: {
+      options: {
+        includePaths: ['bower_components/foundation/scss']
+      },
+      dist: {
+        options: {
+          outputStyle: 'compressed'
+        },
+        files: {
+          'css/app.css': 'scss/app.scss'
+        }        
+      }
+    },
+
+    watch: {
+      grunt: { files: ['Gruntfile.js'] },
+
+      sass: {
+        files: 'scss/**/*.scss',
+        tasks: ['sass']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-sass');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+
+  grunt.registerTask('build', ['sass']);
+  grunt.registerTask('default', ['build','watch']);
+}
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644 (file)
index 0000000..4088530
--- /dev/null
+++ b/README.md
@@ -0,0 +1,22 @@
+# Foundation libsass template
+
+This is a template to start your own project that uses Grunt and libsass!
+
+## Requirements
+
+You'll need to have the following items installed before continuing.
+
+  * Node.js
+  * Grunt
+  * Bower
+
+## Quickstart
+
+```bash
+git clone git@github.com:zurb/foundation-libsass-template.git
+```
+
+## Directory Strucutre
+
+  * `scss/_settings.scss`: Foundation configuration settings go in here
+  * `scss/app.scss`: Application styles go here
diff --git a/bower.json b/bower.json
new file mode 100644 (file)
index 0000000..028481f
--- /dev/null
@@ -0,0 +1,6 @@
+{
+  "name": "foundation-libsass-template",
+  "dependencies": {
+    "foundation": "zurb/bower-foundation"
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..a5053cd
--- /dev/null
@@ -0,0 +1,95 @@
+<!doctype html>
+<html class="no-js" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Foundation | Welcome</title>
+    <link rel="stylesheet" href="css/app.css" />
+    <script src="bower_components/modernizr/modernizr.js"></script>
+  </head>
+  <body>
+    
+    <div class="row">
+      <div class="large-12 columns">
+        <h2>Welcome to Foundation</h2>
+        <hr />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-8 columns">
+        <h3>The Grid</h3>
+
+        <!-- Grid Example -->
+        <div class="row">
+          <div class="large-12 columns">
+            <div class="panel">
+              <p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-6 columns">
+            <div class="panel">
+              <p>Six columns</p>
+            </div>
+          </div>
+          <div class="large-6 columns">
+            <div class="panel">
+              <p>Six columns</p>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="large-4 columns">
+            <div class="panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+          <div class="large-4 columns">
+            <div class="panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+          <div class="large-4 columns">
+            <div class="panel">
+              <p>Four columns</p>
+            </div>
+          </div>
+        </div>
+
+        <h3>Buttons</h3>
+
+        <div class="row">
+          <div class="large-6 columns">
+            <p><a href="#" class="small button">Small Button</a></p>
+            <p><a href="#" class="button">Medium Button</a></p>
+            <p><a href="#" class="large button">Large Button</a></p>
+          </div>
+          <div class="large-6 columns">
+            <p><a href="#" class="small alert button">Small Alert Button</a></p>
+            <p><a href="#" class="success button">Medium Success Button</a></p>
+            <p><a href="#" class="large secondary button">Large Secondary Button</a></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="large-4 columns">
+        <h4>Getting Started</h4>
+        <p>We're stoked you want to try Foundation! To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
+
+        <h4>Other Resources</h4>
+        <p>Once you've exhausted the fun in this document, you should check out:</p>
+        <ul class="disc">
+          <li><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</li>
+          <li><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</li>
+          <li><a href="http://twitter.com/foundationzurb">@foundationzurb</a><br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</li>
+        </ul>
+      </div>
+    </div>
+    
+    <script src="bower_components/jquery/jquery.min.js"></script>
+    <script src="bower_components/foundation/js/foundation.min.js"></script>
+    <script src="js/app.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
new file mode 100644 (file)
index 0000000..c3c8817
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1 @@
+$(document).foundation();
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644 (file)
index 0000000..b4f8dba
--- /dev/null
@@ -0,0 +1,10 @@
+{
+  "name": "foundation-libsass-template",
+  "version": "0.0.1",
+  "devDependencies": {
+    "node-sass": "~0.7.0",
+    "grunt": "~0.4.1",
+    "grunt-contrib-watch": "~0.5.3",
+    "grunt-sass": "~0.8.0"
+  }
+}
diff --git a/scss/_settings.scss b/scss/_settings.scss
new file mode 100644 (file)
index 0000000..715d5c3
--- /dev/null
@@ -0,0 +1 @@
+// Foundation Settings
\ No newline at end of file
diff --git a/scss/app.scss b/scss/app.scss
new file mode 100644 (file)
index 0000000..514110c
--- /dev/null
@@ -0,0 +1,2 @@
+@import "settings";
+@import "foundation";
\ No newline at end of file