#Week 3 - Foundation
Last week we covered over bootstrap and some mobile design patterns, this week will cover Foundation framework and how we can use that.
- Foundation Overview
- What components Foundation has to help us create responsive websites
- Download and get your own copy of Foundation
- Investigate with foundation and build a responsive site using foundation as your framework
- Advanced topic: How to use SASS and media queries.
We will be using Foundation 6 which is the latest instalment of Foundation
URL: http://foundation.zurb.com/
Description:
A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, including these handy HTML templates to help get you started!
It has many of the same components as bootstrap if not, I would say it’s a bit more complex and is made for a variety of different use cases. But one of those use cases is a framework in which is allows you to build apps, websites and emails look amazing on any device.
What components Foundation has to help us create responsive websites
From last weeks less you dived into grids and grid systems within bootstrap. Foundation has its own grid that allows us to section out a website. They have two forms of grids
- Grid
Create powerful multi-device layouts quickly and easily with the default 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
The use the following format on building up your grid pattens
small-# medium-# large-#
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
Notes on how it works
Small Grids
Small grids expand to large screens easier than large grids cram into small screens.
Medium Grids
Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.
The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
Read through http://foundation.zurb.com/sites/docs/flex-grid.html to see what is possible, we will nto be able to run this on the universities computer. But flex box and flex box grids can enable very good responsive websites.
To read up more on flexbox
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
Link: http://foundation.zurb.com/sites/docs/visibility.html
Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.
These classes allow you to determine how you want to control the experience on a specific screen size.
Link: http://foundation.zurb.com/sites/docs/responsive-navigation.html
Our three Menu patterns form like Voltron into one responsive Menu plugin, which allows you to switch between patterns at different screen sizes.
Like all website you will need to provide navigation for both desktop and mobile and make sure the navigation of your website is thought of in all scenarios.
Link: http://foundation.zurb.com/sites/docs/responsive-accordion-tabs.html
Use the Markup of the Accordion or Tabs components to create Responsive Accordion Tabs.
Being able to display content that changes it's behaviour depending on the screen size.
Play with responsive embed to able you to have responsive embeddable content
http://foundation.zurb.com/sites/docs/responsive-embed.html
Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.
Download foundation 6
Notes: This should be a bit more easier than bootstrap is to install because the give you everything you need and link up to the css and javascript files directly for you. So download and just open the index.html file in your browser of choice.
Download link: http://foundation.zurb.com/sites/download.html/
Download the everything (Complete Version) which will include everything foundation has to allow you to have a play.
-
Build a responsive website (that resizes from desktop to mobile)
-
Build a web page using the grid
Unfortunately sue to the amount of programs we would need to install onto the machine, I will not be able to fully demonstrate using SASS within Foundation.
The following link shows you how to get started with Foundation 6
Link: http://foundation.zurb.com/learn/install-foundation-6-sass-on-windows.html