zurb-foundation-5

--- title: Getting Started --- <h3 class="subheader">Getting started with Foundation is easy. Whether you are a master of Sass, building a new app, or making your existing site responsive, we've got you covered.</h3> <hr> <div class="row"> <div class="small-12 columns"> <h2>What is Foundation?</h2> <h2 class="subheader">Foundation is the most advanced, responsive front-end framework in the world. The framework is mobile friendly and ready for you to customize it any way you want to use it.</h2> <div class="row whatis"> <div class="large-7 columns"> <img data-interchange="[{{assets}}/img/images/responsive-medium.svg, (default)], [{{assets}}/img/images/responsive.svg, (large)]"> </div> <div class="large-5 columns"> <p>Millions of designers and engineers use Foundation as part of their workflows. It was the first framework to introduce the concepts of responsive design, semantics, mobile first and partials. It's also compatibile with most browsers and devices. Foundation is the professional choice for designers and engineers.</p> <p><a href="http://foundation.zurb.com/business/why-foundation.html">Why choose foundation →</a></p> <p><a href="{{relative absolute 'dist/docs/compatibility.html'}}">Foundation Compatibility →</a></p> </div> </div> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h2>What Are You Building?</h2> <h2 class="subheader">We have three different packages to get you started:</h2> </div> </div> <div class="row circle-list skill-list"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/css.svg" > <h4>Hack on CSS</h4> <p class="skill-level subheader">Skill level <i class="fi-star"></i></p> <p>The straight CSS version is perfect if you want to just start writing code, rapid prototype, or building a simple, static site. We'll give you all the pieces you need, no setup required.</p> <p><a href="{{relative absolute 'dist/docs/css.html'}}">CSS Install →</a></p> </div> <hr class="dashed hide-for-medium-up"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/scss.svg"> <h4>Customize with Sass</h4> <p class="skill-level subheader">Skill level <i class="fi-star"></i> <i class="fi-star"></i></p> <p>Check out to get started with Sass (SCSS) to let you customize... well, everything. Setup is straight forward and if you haven't used Sass before, once you do, you'll never look back.</p> <p><a href="{{relative absolute 'dist/docs/sass.html'}}">Sass Install →</a></p> </div> <hr class="dashed hide-for-medium-up"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/rails.svg"> <h4>Build an App</h4> <p class="skill-level subheader">Skill level <i class="fi-star"></i> <i class="fi-star"></i> <i class="fi-star"></i></p> <p>We use Rails to build our apps (Notable, Verify, Solidify, ZURB University, and the Foundation Forum) and you can too. We'll show you how to use the Foundation gem and get set up.</p> <p><a href="{{relative absolute 'dist/docs/applications.html'}}">App Install →</a></p> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h2>What Comes With Foundation?</h2> <h2 class="subheader">Foundation has a ton of components and structures to help you build a responsive site without having to worry about all of your baseline, foundational (see what we did there?) code.</h2> <p>You can see all of Foundation's components on one page called the <a href="{{rel 'components/kitchen_sink.html'}}">Kitchen Sink</a> or check out a small snapshot of what Foundation includes: </p> </div> </div> <section class="what-comes-with">  <section class="grid-example"> <div class="row"> <div class="large-6 columns"> <h3 class="button-title">The Grid</h3> <p>Our grid works on almost any device and has support for nesting, source ordering, offsets and device presentation. Frankly, it's a little too easy. In no time, you'll be creating complex layouts like this.</p> <p>Need a head start on some of your designs or some extra inspiration to see the full potential of a responsive front-end framework? <a href="#resources">Check out a list of our Foundation resources!</a></p> </div> <div class="large-6 columns"> {{> gs_grid_example}} </div> </div> </section> <hr class="dashed">  <div class="row"> <div class="large-6 columns"> <h3 class="button-title">Buttons</h3> <p>Clicking on stuff is awesome, so hook up your users with buttons to do stuff. There are some lightweight button styles for size, presentation, and color to make customizing your own button as easy as adding a class.</p> </div> <div class="large-6 columns"> {{> gs_button_example}} </div> </div> <hr class="dashed">  <div class="row"> <div class="large-6 columns"> <h3 class="button-title">Navigation</h3> <p>People have to get around. Navigation styles in Foundation include: a robust top bar with dropdowns; button; search bars; a cool icon bar; a bitchin' off-canvas implementation; and a bunch of other navigational constructs.</p> </div> <div class="large-6 columns"> {{> gs_navigation_example}} </div> </div> <hr class="dashed"> <div class="row"> <div class="large-6 columns"> <h3 class="button-title">Plugins</h3> <p>We've included a ton of JavaScript plugins written just for Foundation: pop-up modals (Reveal); add a required validation for forms (Abide); create content tabs; alerts; and tons more.</p> </div> <div class="large-6 columns"> {{> gs_plugins_example}} </div> </div> </section> <hr> <div class="row"> <div class="small-12 columns"> <h2>Test Drive Foundation</h2> <h2 class="subheader">Want to give Foundation a quick spin? We've set up a Codepen where you can play around with the default Foundation download — HTML, CSS and JS. It's a pretty swanky way to just see what Foundation has to offer.</h2> </div> </div> <section class="codepen-demo"> <div class="row"> <div class="small-12 columns"> <ul class="tabs" data-tab> <li class="tab-title active"><a href="#testdrive-1">Foundation Grid</a></li> <li class="tab-title "><a href="#testdrive-2">Navigation</a></li> <li class="tab-title"><a href="#testdrive-3">Forms</a></li> <li class="tab-title"><a href="#testdrive-4">Interchange</a></li> </ul> <div class="tabs-content"> <div class="content active" id="testdrive-1"> <p>We put together a small demo to show easy it is to start creating with the Foundation Grid! We've used visibility classes, a medium grid, and even source ordering. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p> <p data-height="350" data-theme-id="7558" data-slug-hash="olduj" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/olduj/'>Grid Example</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script> </div> <div class="content " id="testdrive-2"> <p>We put together a small demo to show you how to use a visibility class to have a Top bar on medium and large screens and an off-canvas menu for small screens. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p> <p data-height="350" data-theme-id="7558" data-slug-hash="vKwHa" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/vKwHa/'>Navigation Example</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script> </div> <div class="content" id="testdrive-3"> <p>We put together a small demo to show you how to use a our forms. We have check boxes, input boxes, and so much more. You can play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p> <p data-height="350" data-theme-id="7558" data-slug-hash="AuvoL" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/AuvoL/'>Foundation Forms</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script> </div> <div class="content" id="testdrive-4"> <p>We have a small demo to show off one our coolest features, Interchange! Take a look at the code, you can even play with this Codepen yourself. Go ahead and fork it, change it, enjoy it!</p> <p data-height="350" data-theme-id="7558" data-slug-hash="fcFnq" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/ZURBFoundation/pen/fcFnq/'>fcFnq</a> by ZURB Foundation (<a href='http://codepen.io/ZURBFoundation'>@ZURBFoundation</a>) on <a href='http://codepen.io'>CodePen</a>.</p><script async src="//codepen.io/assets/embed/ei.js"></script> </div> </div> </div> </div> </section> <hr> <div class="row gs-resources"> <div class="small-12 columns"> <h2 id="resources">Foundation Resources</h2> <h2 class="subheader">Not enough to get you started? Think again. Check out all the cool things we've got for you.</h2> <div class="row"> <div class="small-12 columns"> <div class="row circle-list"> <div class="medium-4 columns"> <h4>Components</h4> <p>If you need tools to help get your project started? We have some <a href="http://foundation.zurb.com/templates.html">templates</a> we've put together, custom code snippets in our <a href="http://patterntap.com/code">Building Blocks</a>, and <a href="http://foundation.zurb.com/responsive-tables.html">responsive tables</a>. We can also help if you need <a href="http://foundation.zurb.com/icon-fonts.html">icon fonts</a> or <a href="http://foundation.zurb.com/social-icons.html">social icons</a>.</p> </div> <div class="medium-4 columns"> <h4>Development Tools</h4> <p>The Foundation community has put together <a href="http://foundation.zurb.com/develop/resources.html">free themes</a> for Wordpress, Drupal, Shopify, Jekyll, and more! Or if you're looking for <a href="http://madmimi.github.io/angular-foundation/">Angular directives for Foundation</a>, <a href="https://github.com/zurb/foundation-5-sublime-snippets">Sublime Text Snippets</a>, or <a href="http://zacksmash.github.io/foundation-5-coda-2-clips/">Clips for Coda</a> we can help you out.</p> </div> <div class="medium-4 columns"> <h4>Inspiration</h4> <p>Looking for something to jumpstart your creative juices? We've got you covered with a fully <a href="http://zurb.com/responsive">Responsive Gallery</a>, our <a href="http://zurb.com/university/lessons">ZURB University Lessons</a>, updates on the <a href="http://zurb.com/blog">ZURBlog</a>, and a glossary of product design terms with <a href="http://zurb.com/word">ZURB Word</a>.</p> </div> </div> </div> </div> <p class="bottom-link"><a href="http://foundation.zurb.com/develop/tools.html">See the full list of resources our community have put together. →</a></p> </div> </div> <hr> <div class="row"> <div class="small-12 columns"> <h2>Our Community</h2> <h2 class="subheader">Foundation has grown a lot over the years and whether you want to help others, contribute to Foundation, or even contact us to solve issues for your business, we know where you need to go.</h2> </div> </div> <div class="row circle-list"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/support-forum-gs.svg" > <h4>Foundation Community</h4> <p>Join the Foundation Community in our very own Forum, come support your peers! Get your questions answered or learn something new. This is your portal to the community.</p> <p><a href="http://foundation.zurb.com/forum">Foundation Forum →</a></p> </div> <hr class="dashed hide-for-medium-up"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/support-github.svg"> <h4>Foundation Github</h4> <p>Want to contribute to Foundation's open-source framework? Submit a fix and be counted as a contributor. See an issue, report it on GitHub. Want to see what's coming up? It's all happening on GitHub.</p> <p><a href="https://github.com/zurb/foundation/issues">Contribute on Github →</a></p> </div> <hr class="dashed hide-for-medium-up"> <div class="medium-4 columns"> <img src="{{assets}}/img/images/support-business-gs.svg"> <h4>Business Support</h4> <p>Foundation Business Support is here to keep you projects moving along smoothly. Whether it's a complex problem or a simple fix we have a solution for your business.</p> <p><a href="http://foundation.zurb.com/business/services.html">Foundation Business Support →</a></p> </div> </div> <hr> <h2>Trending Forum Topics</h2> {{> forum-topics}}