<body>
<!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/wired" id="notice">
- <div class="info">
- <div id="clockdiv" class="countdown">
- <span class="timer-day days"></span>
- <span class="timer-colon">:</span>
- <span class="timer-hour hours"></span>
- <span class="timer-colon">:</span>
- <span class="timer-hour minutes"></span>
- <span class="timer-colon">:</span>
- <span class="timer-seconds seconds"></span>
- </div>
- </div>
- </a> -->
+ <!-- find info-banner or info-banner-wired partial -->
+ <!-- /Info Banner For Announcements or Links -->
<div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Info Banner For Announcements or Links -->
- <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
- <div class="info">
- <h5>Foundation 6 is here!</h5>
- </div>
- </a> -->
+ <!-- find info-banner or info-banner-wired partial -->
+ <!-- /Info Banner For Announcements or Links -->
{{> navigation}}
{{> mobile-navigation}}
--- /dev/null
+---
+title: CSS
+description: Here's the simplest way to get going. The straight CSS version of Foundation includes everything you need to start hacking away, right now! It's a perfect way to kickstart a new prototype or create a finished product with Foundation.
+previous:
+ url: flexbox.html
+ title: Flexbox
+next:
+ url: javascript.html
+ title: JavaScript
+videos:
+ -
+ title: CSS Version
+ desc: Getting Started with CSS Version
+ url: https://youtu.be/wHSwKCPXFcw
+---
+
+## Download and Install
+
+To get going with Foundation, simply download a default or custom CSS package from the download page.
+
+<a target="_blank" href="http://foundation.zurb.com/sites/download.html/" class="button">Download Foundation CSS</a>
+
+<hr>
+
+## Setting Up Your Project
+
+After downloading the css files, follow these simple steps to get started:
+
+### 1
+
+First, after you unzip the package, move the folder to your desired location and open it in a text editor. If you don't have one already, we use <a href="http://www.sublimetext.com/">Sublime Text</a> here at ZURB because it's very customizable, powerful, and simply rocks.
+
+
+### 2
+
+The `index.html` is your homepage. It has been linked up with foundation.css, normalize, and all the necessary JavaScript files for you. Just add your code between the `<body>` tags.
+
+### 3
+
+Next, you should create a new stylesheet and link it in the header of your HTML file, like so:
+
+
+```
+ <link rel="stylesheet" href="css/foundation.css">
+
+ <!-- This is how you would link your custom stylesheet -->
+ <link rel="stylesheet" href="css/app.css">
+
+ <script src="js/vendor/modernizr.js"></script>
+
+</head>
+```
+
+<div class="callout"><strong>Note:</strong> At ZURB, we call our custom stylesheets `app.css`. This is important for updating purposes: if you are going to add custom stylings to Foundation components, the code should be copied into your `app.css` file and edited there.</div>
+
+---
+
+## What You Get
+
+When you download the Foundation CSS package, you'll receive a .zip file that contains all the things you need to get started with Foundation. Below we explain every file in detail and how you can add your custom CSS.
+
+<div class="row">
+ <div class="medium-6 columns">
+ <div class="header-container">
+ <h3>Stylesheets</h3>
+ </div>
+ <ul class="info-list">
+ <li>
+ <strong>foundation.css</strong>
+ <p>The default CSS for Foundation is kept here. You can find the component and its settings there. You will use this file as you are developing because it's easier to read.</p>
+ </li>
+ <li>
+ <strong>foundation.min.css</strong>
+ <p>A minified, much smaller CSS file you can use if you don't need or want to pick apart the actual underlying Foundation CSS.</p>
+ </li>
+ <li>
+ <strong>normalize.css</strong>
+ <p>We've included a copy of Normalize here to give you the option to remove quirks in browsers so that all webpages render elements consistently. We recommend you use this because some Foundation styles are dependant on it.</p>
+ </li>
+ </ul>
+ <div class="header-container">
+ <h3>JavaScript</h3>
+ </div>
+ <ul class="info-list">
+ <li>
+ <strong>foundation.min.js</strong>
+ <p>If you are using any Foundation JavaScript components, this needs to be loaded on the page. We recommend at the end before your closing `<body>` tags like so:</p>
+ <img src="{{root}}assets/img/generic/js-cssversion.html" class="" height="" width="" alt="">
+
+ </li>
+ <li>
+ <strong>/foundation</strong>
+ <p>This is a directory that contains each plugin as a single JavaScript file, so you can check out the source code. And if you'd like, include certain ones but not others, or do your own minifying.</p>
+ </li>
+ <li>
+ <strong>/vendor</strong>
+ <p>This folder contains a few external JS files that Foundation makes use of including: Modernizr, another open-source tool from Paul Irish and Nicolas Gallagher, as well as jQuery 2.</p>
+ </li>
+ </ul>
+ </div>
+ <div class="medium-6 columns">
+ <div class="header-container">
+ <h3>Other</h3>
+ </div>
+ <ul class="info-list">
+ <li><strong>index.html</strong><p>This is an example index file which contains some sample markup (the grid, buttons, etc) as well as the basic structure of a responsive Foundation page. Feel free to change or destroy this file as you see fit, just bear in mind that some of the document ```<head>``` is required for the page to work including the CSS/JS that is linked up at the end of the document.</p></li>
+ <li><strong>humans.txt</strong><p>Located in the site root just next to the robots.txt file. You don't have to use if you don't want. You can mention the developer, the designer, the copywriter, the webmaster, the SEO, SEM or SMO. Name as many people who helped make the site, or not.</p></li>
+ <li><strong>robots.txt</strong><p>Website owners use the robots.txt file to give instructions about their site to web-crawling robots (also known as Web Wanderers, Crawlers, or Spiders). This is called The Robots Exclusion Protocol. Adding this page allows you to block web robots from indexing parts of your site. You can read more about it <a href="http://zurb.us/1jixgzu">here</a>.</p></li>
+ </ul>
+ </div>
+</div>
+
+<hr>
+
+
+<div class="row">
+ <div class="small-12 path-container columns">
+ <h2>Best Practices</h2>
+ <h2 class="subheader">We have some best practice recommendations to help you optimize your experience with the Foundation CSS package.</h2>
+ <h3>Making Changes to Foundation Default Stylings</h3>
+ <div class="row">
+ <div class="large-7 columns">
+ <img class="round-margin" src="http://foundation.zurb.com/sites/docs/v/5.5.3/assets/img/images/using-css.png">
+ </div>
+ <div class="large-5 columns">
+ <p>In order to update your Foundation CSS when we release a new version, we recommend keeping your `foundation.css` file clean of any changes. Any components that you want to add your own stylings to should be copied to your `app.css` file where you can make changes there.</p>
+ <p class="subheader"><strong>Note:</strong> be sure to link the `app.css` stylesheet into the `<head>` of your file.</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<hr>
+
+
+## HTML Page Markup
+
+As you'll see in our `index.html` sample, Foundation pages have some specific markup required for them to work. This code block is a simple boilerplate for content-free Foundation pages that we hope comes in handy.
+
+
next:
url: sass.html
title: Sass
+flexbox:
+ - scss/util/_flex.scss
+videos:
+ -
+ title: Flexbox Utility Classes
+ desc: Learn how to use Flexbox Utility Classes
+ url: https://www.youtube.com/embed/UVLINsAuFEI
+ -
+ title: Flexbox and Cards
+ desc: Learn how to use Flexbox Utility Classes with Foundation Cards
+ url: https://youtu.be/Du7rwO4y564
+ -
+ title: Intro to Flexbox
+ desc: Foundation Flexbox Meetup at ZURB HQ
+ url: https://youtu.be/lqUORRmKOmI
---
Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days though, there's a better way... if you are happy with the below browser support!
next:
url: "installation.html"
title: "Installation"
+videos:
+ -
+ title: Foundation's Documentation
+ desc: Get the most out of Foundation's Documentation
+ url: https://www.youtube.com/embed/UVLINsAuFEI
---
<div class="row">
<div class="medium-12 large-6 columns docs-stacked-spacing" style="margin-top:0">
<ul class="faq-accordion" data-accordion style="margin-top:0">
<li class="faq-accordion-item" data-accordion-item>
- <a href="#" class="faq-accordion-title">Getting Help</a>
+ <a href="#" class="faq-accordion-title">Ways to get started</a>
<div class="faq-accordion-content" data-tab-content>
- This is where the content goes.
+ <p>Foundation ships with vanilla CSS, but its source code utilizes the most popular CSS preprocessor, Sass. Quickly get started with precompiled CSS or build on Sass Version for ultimate control.</p>
+
+ <a href="{{root}}css.html" class="secondary button">CSS Version</a>
+ <a href="{{root}}installation.html" class="button">Sass Version</a>
</div>
</li>
<li class="faq-accordion-item" data-accordion-item>
<a href="http://zurb.com/responsive" class="button-docs secondary">View More Sites Built with Foundation</a>
</div>
+---
+
+## Resources to Get You Started
+
+<div class="row small-up-1 medium-up-2 large-up-3 thumb-row">
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/foundation-6-grid-basics-mobile-first.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/learn/training/tuts-grid-basics-mobile-first.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, CSS</h5>
+ <p class="thumb-description" target="_blank">The basics of the Foundation 6 Grid and Mobile First<span class="thumb-author">Jon - Foundation Team</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/introduction-to-the-foundation-grid.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-grid-jamesstone.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, HTML</h5>
+ <p class="thumb-description">Intro to the Foundation Grid<span class="thumb-author">James Stone</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/getting-started-with-foundation-6-gary-jennings.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-intro-jenning.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, DOWNLOAD, CSS</h5>
+ <p class="thumb-description">Getting Started with Foundation 6<span class="thumb-author">Gary Jennings</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/getting-started-with-foundation-6-gary-jennings.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-intro-jenning.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, CSS, INSTALL, PROJECT STRUCTURE</h5>
+ <p class="thumb-description">Setting Up Your Foundation 6 Project<span class="thumb-author">Gary Jennings</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/foundation-6-source-ordering-buttons.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/learn/training/tuts-grid-source-ordering-buttons.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, CSS</h5>
+ <p class="thumb-description">Prototyping with Foundation 6 Grid Source Ordering and Buttons<span class="thumb-author">Tim - Foundation Team</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://appsbyjohn.com/learn/using-the-foundation-framework-for-responsive-web-design/" target="_blank">
+ <p class="thumb-description">Using the Foundation Framework for Responsive Web Design<span class="thumb-author">By John MacAdam</span></p>
+ </a>
+ <a href="http://www.webdesignerdepot.com/2014/11/the-ultimate-guide-to-getting-started-with-foundation/" target="_blank">
+ <p class="thumb-description">The ultimate guide to getting started with Foundation<span class="thumb-author">By Ezequiel Bruni</span></p>
+ </a>
+ <a href="https://scotch.io/bar-talk/a-quick-look-at-the-best-new-foundation-6-features" target="_blank">
+ <p class="thumb-description">A Quick Look at the Best New Foundation 6 Features<span class="thumb-author">By Scotch.io</span></p>
+ </a>
+ </div>
+
+</div>
+
+<div class="text-center">
+ <a href="http://zurb.com/university/lessons" class="button-docs secondary">See More Tutorials</a>
+</div>
---
## Other Integrations
The Foundation community has helped us integrate the framework into Rails, WordPress, Django, and more. Head to our [resources page](http://foundation.zurb.com/sites/resources) to find even more ways to use Foundation.
+
+---
+
+## Resources to Get You Started
+
+<div class="row small-up-1 medium-up-2 large-up-3 thumb-row">
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/foundation-6-grid-basics-mobile-first.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/learn/training/tuts-grid-basics-mobile-first.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, CSS</h5>
+ <p class="thumb-description" target="_blank">The basics of the Foundation 6 Grid and Mobile First<span class="thumb-author">Jon - Foundation Team</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/introduction-to-the-foundation-grid.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-grid-jamesstone.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, HTML</h5>
+ <p class="thumb-description">Intro to the Foundation Grid<span class="thumb-author">James Stone</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/getting-started-with-foundation-6-gary-jennings.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-intro-jenning.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, DOWNLOAD, CSS</h5>
+ <p class="thumb-description">Getting Started with Foundation 6<span class="thumb-author">Gary Jennings</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/getting-started-with-foundation-6-gary-jennings.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/develop/tuts-intro-jenning.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, CSS, INSTALL, PROJECT STRUCTURE</h5>
+ <p class="thumb-description">Setting Up Your Foundation 6 Project<span class="thumb-author">Gary Jennings</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://foundation.zurb.com/learn/foundation-6-source-ordering-buttons.html" target="_blank">
+ <img src="http://foundation.zurb.com/assets/img/learn/training/tuts-grid-source-ordering-buttons.png" class="tuts-img" height="" width="" alt="image clip of video">
+ <h5 class="thumb-category">F6, GRID, LAYOUT, CSS</h5>
+ <p class="thumb-description">Prototyping with Foundation 6 Grid Source Ordering and Buttons<span class="thumb-author">Tim - Foundation Team</span></p>
+ </a>
+ </div>
+
+ <div class="column">
+ <a href="http://appsbyjohn.com/learn/using-the-foundation-framework-for-responsive-web-design/" target="_blank">
+ <p class="thumb-description">Using the Foundation Framework for Responsive Web Design<span class="thumb-author">By John MacAdam</span></p>
+ </a>
+ <a href="http://www.webdesignerdepot.com/2014/11/the-ultimate-guide-to-getting-started-with-foundation/" target="_blank">
+ <p class="thumb-description">The ultimate guide to getting started with Foundation<span class="thumb-author">By Ezequiel Bruni</span></p>
+ </a>
+ <a href="https://scotch.io/bar-talk/a-quick-look-at-the-best-new-foundation-6-features" target="_blank">
+ <p class="thumb-description">A Quick Look at the Best New Foundation 6 Features<span class="thumb-author">By Scotch.io</span></p>
+ </a>
+ </div>
+
+</div>
+
+<div class="text-center">
+ <a href="http://zurb.com/university/lessons" class="button-docs secondary">See More Tutorials</a>
+</div>
+
next:
url: magellan.html
title: Magellan
+
+videos:
+ -
+ video-url: blah
+ video-desc: blah
---
## Responsive Menu
--- /dev/null
+<a href="http://zurb.com/wired" id="notice">
+ <div class="info">
+ <div id="clockdiv" class="countdown">
+ <span class="timer-day days"></span>
+ <span class="timer-colon">:</span>
+ <span class="timer-hour hours"></span>
+ <span class="timer-colon">:</span>
+ <span class="timer-hour minutes"></span>
+ <span class="timer-colon">:</span>
+ <span class="timer-seconds seconds"></span>
+ </div>
+ </div>
+</a>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
