Zurb Foundation 6
- Download Zurb Foundation
- Docs for Foundation
- Official Templates - check your email
- Foundation Building Blocks - Hottest Exmaple UI snippets and All the Building blocks
- Foundation Plugins / Extensions
- Want to Animate things with Foundation check out Motion UI
- Build Apps with Foundation, Motion UI and AngularJS
- Zurb for Email and here
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
- This file is used to track the current input method, whether it be a mouse, keyboard, or touchscreen.
- 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-7shows 7 columns for medium layouts
- large - shows on large displays
.large-7shows 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
- Example of Offset
- Offsets can be used to push columns over more spacing
- 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-portraitlandscape vs portrait orientation
- classes that impact the styling of elements in the marketup without needing to handcode
.clearfix- used to stacking elements
<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
- There are badges because everything is we-appy and it’s the best way to express notifcaitons
- Example of badges at work
- Labels can be used to show important and relevant information
- Example of Labels in use
Types of Menus (Menu Components)
- Menu Align Right
- Expanded Menu
- Vertical Menu Nesting
- Dropdown menu
.menu- Makes any sort of list a menu.
Recommended carousel for media components
- Add a
- Example of a thumbnail
- It can also handle responsive videos
- Example of a REsponsive video
Buttons and Button Types
Foundation has a ton of button styles
- button groups
- chained button types
- Example of Tables in use
- Tables are used to present data or info (tablular data) on a website.
- Example of a Progress bar
.progressdefine progress bar
.progress-meterpercentage for the meter
- Example of Callout Panels
- Callout panels help you organize your content within the defined boundaries.
- Example of Range Sliders
- Range sliders are a handy utility that you can use to define a range from the user standpoint.
- Example of Switches at work
- Make some toggle inputs
- used for radio or checkbox interfaces
- Example of Forms
- Example of a Fieldset
- Useful resource for users to input data.
- Foundation supports many types of inputs
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.
- 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”
- Comes in handy when you want to use heavier vs lighter images depending on screen size
- Example of Data-Interchange
- 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
- Better way to make annoying pop-ups!
- Example of a Modal
- Tooltips are labels that are displayed on hovering over an element.
- Example of a tooltip
- The Data-Toggler attribute helps you toggle CSS or animate an element just by a click.
- Example of Data Toggler