Commit a73c6c9b authored by Dennis Appel's avatar Dennis Appel

Add Foundation CSS Framework

parent 8d07c5e2
.vscode
db.sqlite3
node_modules/
......@@ -123,3 +123,7 @@ USE_TZ = True
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
{% include "header.html" %}
{% extends "base.html" %}
{% block content %}
{% if checklist_entries %}
<div id='checklist'>
......@@ -7,7 +8,8 @@
{% for entry in checklist_entries %}
<li>
<label>
<input type="checkbox">{{entry.checkListEntryTitle}} [{{entry.checkListEntrySeverity}}]
<input type="checkbox">{{entry.checkListEntryTitle}}
<span class="primary label">[{{entry.checkListEntrySeverity}}]</span>
</label>
<a href ="{% url 'wiki:index' %}#item_{{entry.id}}">Wiki</a>
<a href ="{% url 'glossary:index'%}#item_{{entry.id}}">Glossary</a>
......@@ -20,5 +22,5 @@
</div>
{% endif %}
{% endblock %}
{% include "footer.html" %}
.DS_Store
bower_components
node_modules
npm-debug.log
css
# Changelog
## Version 1.0 (November 19, 2015)
Initial release.
# Foundation for Sites Template
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
This is the basic starter project for [Foundation for Sites 6](http://foundation.zurb.com/sites). It includes a Sass compiler and a starter HTML file for you.
## 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
```
Use this command to set up a blank Foundation for Sites project with this template:
```bash
foundation new --framework sites --template basic
```
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
### Manual Setup
To manually set up the template, first download it with Git:
```bash
git clone https://github.com/zurb/foundation-sites-template projectname
```
Then open the folder in your command line, and install the needed dependencies:
```bash
cd projectname
npm install
```
Finally, run `npm start` to run the Sass compiler. It will re-run every time you save a Sass file.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
];
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());
};
function serve() {
browserSync.init({
server: "./"
});
gulp.watch("scss/*.scss", sass);
gulp.watch("*.html").on('change', browserSync.reload);
}
gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));
<!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>
$(document).foundation();
This diff is collapsed.
{
"name": "foundation-sites-template",
"version": "1.0.0",
"description": "Basic template for a new Foundation for Sites project.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp sass"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"dependencies": {
"foundation-sites": "~6.4.0",
"jquery": ">=3.0.0",
"motion-ui": "~2.0.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"autoprefixer": "^9.1.5",
"browser-sync": "^2.18.13",
"gulp": "^4.0.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-sites-template.git"
},
"private": true
}
This diff is collapsed.
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-global-styles;
// @include foundation-grid;
// @include foundation-flex-grid;
@include foundation-xy-grid-classes;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
// @include foundation-range-input;
@include foundation-accordion;
@include foundation-accordion-menu;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-card;
@include foundation-close-button;
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
@include foundation-label;
@include foundation-media-object;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;
@include foundation-visibility-classes;
// @include foundation-float-classes;
@include foundation-flex-classes;
// @include foundation-prototype-classes;
@include motion-ui-transitions;
@include motion-ui-animations;
This diff is collapsed.
<!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>
{% load staticfiles %}
<link rel="stylesheet" href="{% static '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>
{% block header %}{% endblock %}
{% block navigation %}{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
<script src="{% static 'node_modules/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'node_modules/what-input/dist/what-input.js' %}"></script>
<script src="{% static 'node_modules/foundation-sites/dist/js/foundation.js' %}"></script>
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>
<h1>FOOTER</h1>
{% load staticfiles %}
<h1>FOOTER</h1>
<script src="{% static 'project/node_modules/jquery/dist/jquery.js' %}"></script>
<script src="{% static 'project/node_modules/what-input/dist/what-input.js' %}"></script>
<script src="{% static 'project/node_modules/foundation-sites/dist/js/foundation.js' %}"></script>
<script src="{% static 'project/js/app.js' %}"></script>
</body>
</html>
<!doctype html>
<html class="no-js" lang="en">
<head>
{% load staticfiles %}
<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>
<h1>HEADER</h1>
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment