Initial commit

This commit is contained in:
Samuel Philipp 2016-10-28 19:33:25 +02:00
commit b953a6c158
326 changed files with 76065 additions and 0 deletions

View file

@ -0,0 +1,46 @@
{
"modules": [
"grid",
"typography",
"button",
"forms",
"abide",
"accordion",
"accordion_menu",
"badge",
"breadcrumbs",
"button_group",
"callout",
"close_button",
"menu",
"menu_icon",
"drilldown_menu",
"dropdown",
"dropdown_menu",
"equalizer",
"flex_video",
"interchange",
"label",
"magellan",
"media_object",
"off_canvas",
"orbit",
"pagination",
"progress_bar",
"responsive_menu",
"responsive_toggle",
"reveal",
"slider",
"sticky",
"switch",
"table",
"tabs",
"thumbnail",
"title_bar",
"toggler",
"tooltip",
"top_bar",
"visibility",
"float"
]
}

View file

@ -0,0 +1,218 @@
# This is the customizer's master module list.
# Each item in the list is a module with any of these keys:
# - sass: Name of the CSS export. 'grid' becomes '@include foundation-grid;'
# - js: Name of the JavaScript file. 'accordion' becomes 'foundation.accordion.js'
# - js_utils: Names of plugin dependencies. 'box' becomes 'foundation.util.box.js'
grid:
sass: grid
flex_grid:
sass: flex-grid
flex_classes:
sass: flex-classes
typography:
sass: typography
button:
sass: button
forms:
sass: forms
input_range:
sass: range-input
abide:
js: abide
accordion:
sass: accordion
js: accordion
js_utils:
- keyboard
- motion
accordion_menu:
sass: accordion-menu
js: accordionMenu
js_utils:
- keyboard
- motion
- nest
badge:
sass: badge
breadcrumbs:
sass: breadcrumbs
button_group:
sass: button-group
callout:
sass: callout
close_button:
sass: close-button
drilldown_menu:
sass: drilldown-menu
js: drilldown
js_utils:
- keyboard
- motion
- nest
dropdown:
sass: dropdown
js: dropdown
js_utils:
- keyboard
- box
- triggers
dropdown_menu:
sass: dropdown-menu
js: dropdownMenu
js_utils:
- keyboard
- motion
- box
- nest
equalizer:
js: equalizer
flex_video:
sass: flex-video
interchange:
js: interchange
js_utils:
- triggers
- timerAndImageLoader
label:
sass: label
magellan:
js: magellan
js_utils:
- motion
media_object:
sass: media-object
menu:
sass: menu
menu_icon:
sass: menu-icon
off_canvas:
sass: off-canvas
js: offcanvas
orbit:
sass: orbit
js: orbit
js_utils:
- motion
- timerAndImageLoader
- keyboard
- touch
pagination:
sass: pagination
progress_bar:
sass: progress-bar
progress_element:
sass: progress-element
responsive_menu:
js: responsiveMenu
js_utils:
- triggers
- mediaQuery
responsive_toggle:
js: responsiveToggle
js_utils:
- mediaQuery
meter_element:
sass: meter-element
slider:
sass: slider
js: slider
js_utils:
- box
- motion
- triggers
- mediaQuery
- keyboard
sticky:
sass: sticky
js: sticky
js_utils:
- triggers
- mediaQuery
reveal:
sass: reveal
js: reveal
js_utils:
- box
- motion
- triggers
- mediaQuery
- keyboard
switch:
sass: switch
table:
sass: table
tabs:
sass: tabs
js: tabs
js_utils:
- keyboard
- timerAndImageLoader
thumbnail:
sass: thumbnail
title_bar:
sass: title-bar
toggler:
js: toggler
js_utils:
- motion
tooltip:
sass: tooltip
js: tooltip
js_utils:
- box
- triggers
- mediaQuery
- motion
top_bar:
sass: top-bar
visibility:
sass: visibility-classes
float:
sass: float-classes

View file

@ -0,0 +1,11 @@
{
"modules": [
"typography",
"grid",
"forms",
"button",
"callout",
"reveal"
],
"variables": {}
}

View file

@ -0,0 +1,169 @@
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<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/foundation.css">
<link rel="stylesheet" href="css/app.css">
</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="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="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="primary callout">
<p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.callout 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="primary callout">
<p>Six columns</p>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="primary callout">
<p>Six columns</p>
</div>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<p>Four columns</p>
</div>
</div>
<div class="large-4 medium-4 small-4 columns">
<div class="primary callout">
<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="input-group">
<input type="text" placeholder="small-9.columns" class="input-group-field" />
<span class="input-group-label">.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="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>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>