Skip to content

Commit

Permalink
Initial commit with folder structure and Sass compiler working
Browse files Browse the repository at this point in the history
  • Loading branch information
@gakimball
gakimball committed May 11, 2015
0 parents commit 25d4582
Show file tree
Hide file tree
Showing 8 changed files with 245 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .gitignore
@@ -0,0 +1,5 @@
.DS_Store
bower_components
node_modules
npm-debug.log
css
21 changes: 21 additions & 0 deletions bower.json
@@ -0,0 +1,21 @@
{
"name": "foundation-sites-template",
"version": "0.0.1",
"authors": [
"ZURB <foundation@zurb.com>"
],
"description": "Basic template for a new Foundation for Sites project.",
"main": "index.html",
"license": "MIT",
"homepage": "http://foundation.zurb.com",
"dependencies": {
"foundation": "^5.5.0"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
22 changes: 22 additions & 0 deletions gulpfile.js
@@ -0,0 +1,22 @@
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

var sassPaths = [
'bower_components/foundation/scss'
];

gulp.task('sass', function() {
return gulp.src('./scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
errLogToConsole: true
}))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest('./css'));
});

gulp.task('default', ['sass'], function() {
gulp.watch(['./scss/**/*.scss'], ['sass']);
});
171 changes: 171 additions & 0 deletions index.html
@@ -0,0 +1,171 @@
<!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</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">
<h1>Welcome to Foundation</h1>
</div>
</div>

<div class="row">
<div class="large-12 columns">
<div class="panel">
<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="row">
<div class="large-4 medium-4 columns">
<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 columns">
<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 columns">
<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="row">
<div class="large-4 medium-4 medium-push-2 columns">
<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 columns">
<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="row">
<div class="large-8 medium-8 columns">
<h5>Here&rsquo;s your basic grid:</h5>
<!-- Grid Example -->

<div class="row">
<div class="large-12 columns">
<div class="callout panel">
<p><strong>This is a twelve column section in a row.</strong> 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 medium-6 columns">
<div class="callout panel">
<p>Six columns</p>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="callout panel">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="callout panel">
<p>Four columns</p>
</div>
</div>
</div>

<hr />

<h5>We bet you&rsquo;ll need a form somewhere:</h5>
<form>
<div class="row">
<div class="large-12 columns">
<label>Input Label</label>
<input type="text" placeholder="large-12.columns" />
</div>
</div>
<div class="row">
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<label>Input Label</label>
<input type="text" placeholder="large-4.columns" />
</div>
<div class="large-4 medium-4 columns">
<div class="row collapse">
<label>Input Label</label>
<div class="small-9 columns">
<input type="text" placeholder="small-9.columns" />
</div>
<div class="small-3 columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<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="row">
<div class="large-6 medium-6 columns">
<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 columns">
<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="row">
<div class="large-12 columns">
<label>Textarea Label</label>
<textarea placeholder="small-12.columns"></textarea>
</div>
</div>
</form>
</div>

<div class="large-4 medium-4 columns">
<h5>Try one of these buttons:</h5>
<p><a href="#" class="small button">Simple Button</a><br/>
<a href="#" class="small radius button">Radius Button</a><br/>
<a href="#" class="small round button">Round Button</a><br/>
<a href="#" class="medium success button">Success Btn</a><br/>
<a href="#" class="medium alert button">Alert Btn</a><br/>
<a href="#" class="medium secondary button">Secondary Btn</a></p>
<div class="panel">
<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/docs/" class="small button">Go to Foundation Docs</a>
</div>
</div>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions js/app.js
@@ -0,0 +1 @@
$(document).foundation();
23 changes: 23 additions & 0 deletions package.json
@@ -0,0 +1,23 @@
{
"name": "foundation-sites-template",
"version": "0.0.1",
"description": "Basic template for a new Foundation for Sites project.",
"main": "gulpfile.js",
"dependencies": {
"gulp-autoprefixer": "^2.2.0",
"gulp": "^3.8.11",
"gulp-sass": "^2.0.0",
"gulp-load-plugins": "^0.10.0"
},
"devDependencies": {
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.2.0",
"gulp-load-plugins": "^0.10.0",
"gulp-sass": "^2.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT"
}
Empty file added scss/_settings.scss
Empty file.
2 changes: 2 additions & 0 deletions scss/app.scss
@@ -0,0 +1,2 @@
@import "settings";
@import "foundation";

0 comments on commit 25d4582

Please sign in to comment.