zurb-foundation-5

<div class="sidebar"> <h5>Foundation Documentation</h5> <form>  <input tabindex="1" id="autocomplete" type="search" placeholder="Search Docs: e.g. forms"> </form> <a href="/develop/download.html" class="download button expand">Download Foundation</a> <nav> <ul class="side-nav"> <li class="heading">Setup</li> <li><a href="{{rel 'index.html'}}" data-search="">Getting Started</a></li> <li><a href="{{rel 'css.html'}}" data-search="Styles">CSS</a></li> <li><a href="{{rel 'sass.html'}}" data-search="Sass">Sass</a></li> <li><a href="{{rel 'sass-files.html'}}" data-search="Sass,Sass - What You Get, How to Use Sass">Sass Files</a></li> <li><a href="{{rel 'using-sass.html'}}" data-search="Sass,Sass - What You Get, How to Use Sass">Using Sass</a></li> <li><a href="{{rel 'applications.html'}}" data-search="Rails,Gem">Applications</a></li> <li><a href="{{rel 'javascript.html'}}" data-search="">JavaScript</a></li> <li><a href="{{rel 'components/global.html'}}" data-search="Global Styles,Global Mixins,Global Variables,Useful HTML Classes">Global Styles</a></li> <li><a href="{{rel 'components/kitchen_sink.html'}}" data-search="">Kitchen Sink</a></li> <li><a href="{{rel 'accessibility.html'}}" data-search="accessibility">Accessibility</a></li> <li><a href="{{rel 'upgrading.html'}}" data-search="Migration">Upgrading</a></li> <li class="divider"></li> <li class="heading">Structure</li> <li><a href="{{rel 'media-queries.html'}}" data-search="Breakpoints">Media Queries</a></li> <li><a href="{{rel 'components/visibility.html'}}" data-search="">Visibility</a></li> <li><a href="{{rel 'components/grid.html'}}" data-search="">Grid</a></li> <li><a href="{{rel 'components/block_grid.html'}}" data-search="">Block Grid</a></li> <li><a href="{{rel 'components/interchange.html'}}" data-search="Responsive Images">Interchange Responsive Content <span class="label">JS</span></a></li> <li><a href="{{rel 'utility-classes.html'}}" data-search="">Utility Classes</a></li> <li><a href="{{rel 'javascript-utilities.html'}}" data-search="">Javascript Utilities</a></li> <li><a href="{{rel 'components/rtl.html'}}" data-search="RTL">Right-to-Left Support</a></li> <li class="divider"></li> <li class="heading">Navigation</li> <li><a href="{{rel 'components/offcanvas.html'}}" data-search="Off Canvas">Off-canvas <span class="label">JS</span></a></li> <li><a href="{{rel 'components/topbar.html'}}" data-search="Nav Bar,Navigation,Sticky">Top Bar <span class="label">JS</span></a></li> <li><a href="{{rel 'components/icon-bar.html'}}" data-search="">Icon Bar</a></li> <li><a href="{{rel 'components/sidenav.html'}}" data-search="">Side Nav</a></li> <li><a href="{{rel 'components/magellan.html'}}" data-search="Scrollspy">Magellan Sticky Nav <span class="label">JS</span></a></li> <li><a href="{{rel 'components/subnav.html'}}" data-search="">Sub Nav</a></li> <li><a href="{{rel 'components/breadcrumbs.html'}}" data-search="Navigation Path,Cookie Crumb">Breadcrumbs</a></li> <li><a href="{{rel 'components/pagination.html'}}" data-search="">Pagination</a></li> <li class="divider"></li> <li class="heading">Media</li> <li><a href="{{rel 'components/orbit.html'}}" data-search="Carousel,Slider,Slideshow">Orbit Slider <span class="label">JS</span></a></li> <li><a href="{{rel 'components/thumbnails.html'}}" data-search="Images">Thumbnails</a></li> <li><a href="{{rel 'components/clearing.html'}}" data-search="Responsive Lightbox,Lightbox">Clearing Lightbox <span class="label">JS</span></a></li> <li><a href="{{rel 'components/flex_video.html'}}" data-search="Responsive Video">Flex Video</a></li> <li class="divider"></li> <li class="heading">Forms</li> <li><a href="{{rel 'components/forms.html'}}" data-search="">Forms</a></li> <li><a href="{{rel 'components/switch.html'}}" data-search="">Switches</a></li> <li><a href="{{rel 'components/range_slider.html'}}" data-search="Range Slider">Range Sliders <span class="label">JS</span></a></li> <li><a href="{{rel 'components/abide.html'}}" data-search="Form Validation,Field Validation">Abide Validation <span class="label">JS</span></a></li> <li class="divider"></li> <li class="heading">Buttons</li> <li><a href="{{rel 'components/buttons.html'}}" data-search="">Buttons</a></li> <li><a href="{{rel 'components/button_groups.html'}}" data-search="Button Bar">Button Groups</a></li> <li><a href="{{rel 'components/split_buttons.html'}}" data-search="">Split Buttons <span class="label">JS</span></a></li> <li><a href="{{rel 'components/dropdown_buttons.html'}}" data-search="">Dropdown Buttons <span class="label">JS</span></a></li> <li class="divider"></li> <li class="heading">Typography</li> <li><a href="{{rel 'components/typography.html'}}" data-search="Typography,Type-setting,Composition">Type</a></li> <li><a href="{{rel 'components/inline_lists.html'}}" data-search="Lists">Inline Lists</a></li> <li><a href="{{rel 'components/labels.html'}}" data-search="Tags">Labels</a></li> <li><a href="{{rel 'components/keystrokes.html'}}" data-search="">Keystrokes</a></li> <li class="divider"></li> <li class="heading">Callouts & Prompts</li> <li><a href="{{rel 'components/reveal.html'}}" data-search="Modal">Reveal Modal <span class="label">JS</span></a></li> <li><a href="{{rel 'components/alert_boxes.html'}}" data-search="Error,Success,Warning">Alerts <span class="label">JS</span></a></li> <li><a href="{{rel 'components/panels.html'}}" data-search="Wells">Panels</a></li> <li><a href="{{rel 'components/tooltips.html'}}" data-search="Popover">Tooltips <span class="label">JS</span></a></li> <li><a href="{{rel 'components/joyride.html'}}" data-search="Tooltip Tour,Guider,Tooltip Walk-through">Joyride <span class="label">JS</span></a></li> <li class="divider"></li> <li class="heading">Content</li> <li><a href="{{rel 'components/dropdown.html'}}" data-search="">Dropdowns <span class="label">JS</span></a></li> <li><a href="{{rel 'components/pricing_tables.html'}}" data-search="">Pricing Tables</a></li> <li><a href="{{rel 'components/progress_bars.html'}}" data-search="">Progress Bars</a></li> <li><a href="{{rel 'components/tables.html'}}" data-search="">Tables</a></li> <li><a href="{{rel 'components/accordion.html'}}" data-search="">Accordion <span class="label">JS</span></a></li> <li><a href="{{rel 'components/tabs.html'}}" data-search="">Tabs <span class="label">JS</span></a></li> <li><a href="{{rel 'components/equalizer.html'}}" data-search="">Equalizer <span class="label">JS</span></a></li> <li class="divider"></li> <li class="heading">Support</li> <li><a href="{{rel 'changelog.html'}}" data-search="">Changelog</a></li> <li><a href="{{rel 'compatibility.html'}}" data-search="">Compatibility</a></li> <li class="divider"></li> <li class="heading">Older Docs</li> <li><a href="/docs/v/4.3.2/" data-search="">Foundation 4</a></li> <li><a href="/docs/v/3.2.5/" data-search="">Foundation 3</a></li> <li><a href="/docs/v/2.2.1/" data-search="">Foundation 2</a></li> </ul> </nav> <section id="jobs"> <h5>Get a job, nerd!</h5> <script type="text/javascript" src="http://www.zurb.com/jobs/widgets/jobs.js?limit=3"></script> <p class="via">via <a href="http://www.zurb.com/jobs">Job Board from ZURB</a></p> </section> </div>