--- /dev/null
+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
--- /dev/null
+<!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