Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

163 lines (127 sloc) 7.347 kB
<? $page_title = "The Most Advanced Responsive Front-end Framework from ZURB" ?>
<?php include("includes/_header.php"); ?>
<header id="homepage">
<div class="row">
<div class="twelve columns">
<h1>Foundation 3</h1>
<h4>The most advanced responsive front-end framework in the world.</h4>
<a href="download.php" class="large button">Download Foundation 3.0</a>
</div>
</div>
</header>
<section id="homepageFeatures">
<div class="row">
<div class="nine columns">
<h3>What's new in 3.0?</h3>
<div class="row">
<div class="four columns">
<a href="whats-new.php"><div class="pic" id="homepageImgSass"></div></a>
<h5>Developed with Sass</h5>
<p>Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself &mdash; and gives you new tools to quickly customize and built on top of Foundation.</p>
</div>
<div class="four columns">
<a href="whats-new.php"><div class="pic" id="homepageImgFeatures"></div></a>
<h5>Feature Complete</h5>
<p>We've added new elements, new options, and tons of streamlining to make this the fastest way to prototype responsively &mdash; and take that right into production.</p>
</div>
<div class="four columns">
<a href="whats-new.php"><div class="pic" id="homepageImgAdvanced"></div></a>
<h5>Freakishly Advanced</h5>
<p>Foundation is the most advanced front-end framework in the world. While the framework works all the way back to IE8, we're taking advantage of new, awesome Web technology to help you build better and faster.</p>
</div>
</div>
</div>
<div class="three columns">
<div id="github">
<h4>Latest Update on Github</h4>
<span class="date">loading...</span>
<span class="description"></span>
<a href="#" class="commit"></a>
<a href="github-mac://openRepo/https://github.com/zurb/foundation" class="button secondary">Clone Now</a>
<img src="images/yeti9000.png" />
</div>
</div>
</div>
</section>
<section class="row" id="frameworkFeatures">
<div class="twelve columns">
<h3>Start here, build everywhere.</h3>
<div class="row">
<div class="four columns">
<a href="grid.php" class="pic" id="featureGrid"></a>
<h4><a href="grid.php">Flexible Grid</a></h4>
<p>The Grid lets you lay out pages quickly and logically with a flexible, nestable system. Even better, the Grid can be whatever size you need &mdash; it's easily adapted to any size screens, from phones to TVs.</p>
</div>
<div class="four columns">
<a href="prototyping.php" class="pic" id="featurePrototype"></a>
<h4><a href="prototyping.php">Rapid Prototyping</a></h4>
<p>Foundation includes dozens of styles and elements to help you quickly put together clickable prototypes, that can then be adapted and styled into polished production code. Forms, buttons, tabs, all kinds of good stuff.</p>
</div>
<div class="four columns">
<a href="mobile.php" class="pic" id="featureDevices"></a>
<h4><a href="mobile.php">Multidevice Mobility</a></h4>
<p>The Grid lets you quickly put together page layouts for mobile devices and the desktop. You don't need two different sites &mdash; the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.</p>
</div>
</div>
</div>
</section>
<section id="caseStudies">
<div class="row">
<div class="twelve columns">
<h3>Case Studies</h3>
</div>
</div>
<div class="row">
<div class="six columns">
<div class="case-study">
<a href="case-flite.php"><img src="images/case-study-flite.png" /></a>
<h4><a href="case-flite.php">Flite</a></h4>
<p>When online advertising tech firm Flite needed to do a redesign of its website, it knew that it had to work on any device, not just desktops.<br /><a href="case-flite.php">Read the case study &rarr;</a></p>
</div>
</div>
<div class="six columns">
<div class="case-study">
<a href="case-swizzle.php"><img src="images/case-study-swizzle.png" /></a>
<h4><a href="case-swizzle.php">Swizzle</a></h4>
<p>Online service and design agency Swizzle built this site just a month after the release of Foundation, and it's beautifully responsive.<br /><a href="case-swizzle.php">Read the case study &rarr;</a></p>
</div>
</div>
</div>
<div class="row">
<div class="six columns">
<div class="case-study">
<a href="case-soapbox.php"><img src="images/case-study-soapbox.png" /></a>
<h4><a href="case-soapbox.php">ZURBsoapbox</a></h4>
<p>One of the first sites built with Foundation, this site helps visitors to ZURB's speaking series learn, listen, and RSVP to events.<br /><a href="case-soapbox.php">Read the case study &rarr;</a></p>
</div>
</div>
<div class="six columns">
<div class="case-study">
<a href="case-reel.php"><img src="images/case-study-reel.png" /></a>
<h4><a href="case-reel.php">Reel</a></h4>
<p>A presentation hosting Web app built by ZURB, Foundation not only drives the entire app UI, but also drives its embeddable presentations.<br /><a href="case-reel.php">Read the case study &rarr;</a></p>
</div>
</div>
</div>
</section>
<section id="usingFoundation">
<div class="row">
<div class="twelve columns">
<h3>Sites Using Foundation</h3>
<a href="mailto:foundation@zurb.com" class="top-right">Is your site using Foundation? Let us know!</a>
<ul class="block-grid five-up">
<li><a href="http://projection.pixar.com/" id="usingPixar" target="_blank"><img src="images/usingPixar.png" /></a></li>
<li><a href="http://codesign.lanl.gov/" id="usingLosAlamos" target="_blank"><img src="images/usingLosAlamos.png" /></a></li>
<li><a href="http://www.flite.com/" id="usingFlite" target="_blank"><img src="images/usingFlite.png" /></a></li>
<li><a href="http://www.zurb.com" id="usingZURB" target="_blank"><img src="images/usingZURB.png" /></a></li>
<li><a href="http://www.getfelix.com/" id="usingFelix" target="_blank"><img src="images/usingFelix.png" /></a></li>
<li><a href="https://webfwd.org/" id="usingWebFWD" target="_blank"><img src="images/usingMozilla.png" /></a></li>
<li><a href="http://reelapp.com/" id="usingReel" target="_blank"><img src="images/usingReel.png" /></a></li>
<li><a href="http://spurapp.com/" id="usingSpur" target="_blank"><img src="images/usingSpur.png" /></a></li>
<li><a href="http://zurb.com/soapbox/" id="usingSoapbox" target="_blank"><img src="images/usingSoapbox.png" /></a></li>
<li><a href="http://axeapp.com/" id="usingAxe" target="_blank"><img src="images/usingAxe.png" /></a></li>
</ul>
</div>
</div>
</section>
<?php include("includes/_footer.php"); ?>
Jump to Line
Something went wrong with that request. Please try again.