Dano Manion

Zurb Foundation Notes

Zurb Foundation 6

What is Foundation?

  • it is an easy to use advanced CSS framework that helps you create clean grid-based layouts, so you don’t have to. further it’s a …
  • mobile first and mobile responsive framework
    • def: comes with built-in plugins for built in repsonsie website
    • Responsive web design adopts a one-site-fits-all approach wherein your website is not limited to a certain device type or screen size. It means that your website will have the same URL and a single code base on all devices, thereby eliminating the need to create separate websites for the mobile and desktop versions.
      • It’s a “device-agnostic strategy”
  • “Navicon” AKA Hamburger Icon!

Foundation for Email

  • Zurb Foundation also has templates for email

What is what-input

  • what-input.js
    • This file is used to track the current input method, whether it be a mouse, keyboard, or touchscreen.

Layout Example

Grid Details

  • Grid Layout Example

  • 12 column grid layout (can be fixed if wanted)
  • Flexbox grid
    • Automatic sizing.
  • row: horizontal container
  • column: vertical container
  • small - shows on small displays
    • .small-7: shows 7 columns for small layouts
    • by default if you specifiy only a small class, larger displays inherit them
  • medium - shows on medium displays
    • .medium-7 shows 7 columns for medium layouts
  • large - shows on large displays
    • .large-7 shows 7 columns for large layouts
    • if only large is added to the container, all of the containers will become stacked on smaller screens by default


Block Grids

  • Example of block grids
  • enable you to layout content to a grid with number of elements, so you can have a large layout that shows 5 images per row (that resize) and a small layout that shows 1 image per row.

Show For (only, above, oreintation)

Show for and only

  • There is a way to hide elements with classes like
    • .show-for-small-only - will only show for small layouts
    • .show-for-medium-only - will only show for medium layouts
    • .show-for-large - this will display on anything large and above (large and extra-large screens)
    • .show-for-medium - this will display on anything large and above

Show for a specific screen Orientation

  • .show-for-landscape or .show-for-portrait landscape vs portrait orientation

Utility Classes

  • Example of utility classes

  • classes that impact the styling of elements in the marketup without needing to handcode
  • .float-right or .float-left
  • .clearfix - used to stacking elements

Text Classes

  • Example of text classes in use

  • .large-text-right, .large-text-center, and .large-text-justify
  • <html class="no-js" dir="rtl">: Supports right to left languages
  • <code>: is also styled a coder sort of way (nerds)
  • .show-for-sr: allows one to add elements only readible by screen-readers




Types of Menus (Menu Components)

  • Menu
  • Menu Align Right
  • Expanded Menu
  • Vertical Menu Nesting
  • Dropdown menu
  • Breadcrumbs
  • Top Bar

  • .menu - Makes any sort of list a menu.
  • Recommended carousel for media components

      <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css"/>
      <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css"/>
      <script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>


Responsive Video

CSS Components

Buttons and Button Types

  • Example of Buttons

  • Foundation has a ton of button styles

    • button groups
    • chained button types


Progress Bars

Callout Panels

Range Sliders

  • Example of Range Sliders
  • Range sliders are a handy utility that you can use to define a range from the user standpoint.



JavaScript Components

  • Note that all JS examples on Codepen.io don’t work for some reason. Must be a JS conflict of something. None-the-less, it looked like a good enough place to store example code.

  • Foundation comes with a number of Javascript componets that we can use in our themes.

    • tabs
    • accordions
    • dropdowns
    • data-interchanges
    • equalizers
    • modals
    • tooltips
    • data toggler



  • Example of Accordions
  • Ff you want the content of multiple panels to be displayed without closing the panels which displayed their content, then we need to use the data-multi-expand=“true” property with it.
  • Example of a Dropdown
  • Ff you want the dropdown list or content to be displayed on hovering over the element, you remove the data-auto-focus=“true” property in the <div> and replace it with the data-hover=“true”



  • Foundation’s Equalizer attribute helps maintain uniform height for different panels. Basically, it let’s columns on unequal height share the same height. Very handy for unpredicable layouts.
  • Example of Equalizer




Sources for notes