Navigating the Site
- Develop or Develop -> Add-ons
- Docs Getting Started link also goes here
- Download lets you download and customize for the parts you want
InstallationLooking through their docs, there are three different packages we can go into: CSS, SASS, and Building an App. For more advanced uses, Foundation comes with a CLI that you can download and install so that you get Foundation commands from the command line. We won't be messing with that stuff today, just the CSS. Downloading the Foundation CSS is all we have to do. We'll get a sample site in
index.htmlwhere we can test out CSS and JS features.
CSS SetupTo start up a Foundation site, we'll need two CSS files:
foundation.css. Those will be enough to get the classes we need and then we can add our own stylings in a custom stylesheet that we'll call
Now we have access to the classes that are necessary to build out all parts of Foundation. Let's say we needed buttons. The syntax isn't too far off of the Bootstrap way. You have
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/foundation.css"> <link rel="stylesheet" href="css/app.css"> <!-- your custom styles -->
.alert. We could create buttons by writing:
<a href="#" class="button tiny primary">Tiny Primary</a> <a href="#" class="button large success radius">Radius Success</a> <a href="#" class="button large alert round">Rounded Alert</a>
foundation.min.js, and we'll need to initialize Foundation like so:
By adding that
<script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script>
CSS FeaturesThe thing that is great about Foundation is that it strives to be fully responsive. In this spirit, pretty much everything is defined using ems or rems. Even the media queries and widths of the grid system use ems. This is a great practice since it ensures you are starting your sites with a responsive... umm foundation. The CSS classes that come with Foundation are easy enough to learn and understand. Just read through the docs and ZURB's great examples to see how to create buttons and whatnot. Here's a quick list of some CSS features.
- Media Queries
- Visibility Classes: Hiding and Showing things based on device size (Foundation is mobile first). There's even classes to detect landscape/portrait and touch/nontouch devices.
- Utility Classes: Floats, Rounded and Border Radius on Buttons, Text Aligning
- Side Nav, Sub Nav, Breadcrumbs, Pagination
- Flex Video: Let your browser automatically scale video objects!
- Buttons and Button Groups
- Typography, Lists, Labels, Blockquotes, and more
- Progress Bars
Pricing TablesI wish the syntax for this was a bit more semantic, but it's still cool nonetheless.
Off Canvas Menus
- Interchange Responsive Content: Switch out HTML content based on browser size
- Off Canvas
- Top Bar, Sticky Nav
- Clearing Lightbox: Good looking implementation of a lightbox with gallery
- Range Sliders
- Abide Validation
- Split Buttons, Dropdown Buttons
- Modals, Alerts, Tooltips
- Joyride: Awesome feature to create guided tours around your site
- Dropdowns, Accordion, Tabs
- Equalizer: Create equal height content!
Should You Use Foundation 5?Foundation is a solid framework that has been tested, has solid backing in ZURB, and continues to innovate (can't stress how much I like their Motion UI and new grid stuff). The syntax is easy to learn and get started with. There's no reason not to give it a try. Just spin up a CodePen and play around with the features. The addition of visibility classes and the work they've done with accessiblity are great additions as well. Take a look through their docs and see what you find. I think you walk away impressed. There's just so many features and components with ideas that make sense (Interchange is a big one).
Want More Foundation?Here are some more articles to get you going with Foundation:
Like this article? Follow @chrisoncode on Twitter