If you take any course from Zurb or any course about Foundation this is the only one you will ever need! Out of all the zurb courses I’ve taken this one by far was the best. Again, the direct access to the engineers is what you’re paying for.
The highlight of the training is when at the beginning they immediately announced that all attendees were receiving a copy of the final version of Foundation 5 a week before the general public. And, everything covered would be based on Foundation 5!
The only complaint I have is that Zurb doesn’t provide a screen recording of the Go To Meeting session for any of their courses, includes this one. It would really be nice to have a video reference.
The following are my notes from the training:
Mastering The Grid
- launched in 4.5
- foundation is built in ems, pixels only mentioned to help visualize breakpoints
- small breakpoint 0-767px
- large breakpoint 768px & higher
- small now 0-640px wide
- medium now 641-1023px wide
- large now 1024px & up
Foundation 5 Grid
- you won’t always use 3 separate classes
- large and medium inherit sizing from small
- large inherits sizing from medium
- build starting with small, then medium & then large
Centering Multiple Columns
- Centering great for emphasizing content
- Sometitmes it fixes uneven layouts
Nest 2 or more columns inside a centered column
- Remove margin and padding from rows and columns
- useful for pre & post fix labels
- Great for content that needs to be fush against each other
- nested rows and columns maintain their margin and padding * changed in 4.3*
- Use collapse class **
- Allows for overlapping elements
- no need for negative margins
- need push & pull classes
- left column automatically on top
- z-index can help
Equal Height Columns
- columns automatically size to the height of their content
- great unless a background color on an elemnt
- set a min-height on .panel ** breaks easily on mobile
Complex Data Tables WIth The Grid
- Tables organize data well, but don’t collapse well
- kayak organized well, but their tables aren’t responsive
- zurb playground has responsive tables
- foo plugins foo table
Use grid instead of table
- can the data-match-heigh to be set to the size of the viewport? for example set the height of a div to match the height of the window so we can put content that it will be below the the “fold”, example of this is the Apple homepage where to see additional content (basically vertical media query) ** yes
- Jared Cobb (to All): When doing push and pull, does it matter (in the HTML source) which comes first? (Push or Pull)? ** yes the order matters
- Samuel Fitz (to All): for vertical overlap – still recommend negative margin? ** depends on prefernce. out of domain of grid. works great because elements are still in the flow.
- Scott Hoaglund (to All): Is using Foundation 3 the best way to support IE 8, or have others used different approaches. ** yes. However, IE8 will default to mobile view as it doesnt support media queires.
- Lefteris Paraskevas (to All): Hi! Thanks for the training. If we want to vertically align content inside a div what is the way you suggest? * set div to display table block then use vertical align* js solutions ** no fool-proof method in foundation
- Josh Jenkins (to All): On a small device, I want a nav, then logo, then subnav. On a large device i want the logo (3 columns) to the left, then the nav and subnav stacked (9 columns) to the right directly beside it. Is there any way to do that? May be too specific of a question. Might have just answered with the negative vertical margins. * use show and hide classes** kinda sucks because of duplication
Foundation Best Practices
- use sass partials to create quickly identifiable stylesheets ** footer, header, navigation
- Use descriptive names for your files and folders ** won’t effect performance
- Separate the differnt partial types into their own folders * mixins* components ** navigation
- Partial naming * put underscore at beginning of filename* hyphentate names
- Import partials into sass file * Acts as table of contents* don’t include filename underscore or extension ** import mixins first
SASS and _settings.scss
- Keep variables in own component partials ** If you upgrade, foundation won’t overwrite your variables
- Variable name should be specific to component you’re working on
- By default latest version will be installed if using compass install
- Isolate a version to a specific folder using SASS
Use bundler to handle versions
- Create gemfile in new project folder
- need to use bundle exec compass watch
- Foundation versions: https://github.com/zurb/foundation/releases
New Media Sizes
- Media query ranges
- uses ems
- converted from pixel values
New media queries structured differently
- $large-up: Target large and up ranges
- $large-only: Target large screens only
- same patter used for all media sizes up to xx-large
You can also target specific screen orientations * $landscape media query variable
HiDPI Ready Assets
There’s a growing number of HiDPI devices
- Avoid blurry images by using SVG when possible
- Not supported in IE8 and older ** Foundation doesn’t support IE 8, who cares
Start with a vector image
List of browsers that support SVG: http://caniuse.com/#cats=SVG
- Save as SVG
- Optimize the SVG * Illustrator will add bloat increaseing file size* Use optimizer to strip out bloat ** Optimize SVG files: http://petercollingridge.appspot.com/svg-editor
- Insert SVG into markup or css
SVG as a CSS background image * may load faster
Use SVG code in your markup * advantages ** reduces http requests
Editable using css * add class name to path element * style based on class name* fun stuff like hover state can be modified
Filter effects * Define filter in svg * add filter to stylesheet using url(#filtername)
Lots of svg attributes to experiment with beyond fill and stroke
Sample of using SVG code in your markup: http://cdpn.io/ytqbx
Compression & Deployment
On mobile first peformance is paramount
Test your site with Google Page Speed browser extension
Use Compass with Foundation * compile production ready code with the command line ** compass compile -e production –force
- Jorgen Leijenaar (to All): notice that your css for svg is a bit different ** Properties/attributes for svg is much different
- Adam Clark (to All): This may be personal preference, but is it a better practice to nest media queries inside your individual partials or have one partial for all media queries? ** Both. Just make sure to comment media queries
- Do pixels have any place when using Foundation? I use emCalc everywhere, just curious ** Foundation 5 only uses ems, including media queries.
- Why not use rems instead of ems? * Rems browser support sucks. Good for type, not for for defining element sizes. Not a complete replacement for pixels.* ems can be a replacement for pixels.
- Mauricio Rocha (to All): Hi guys! We have been using vector based fonts using @font-face / icomoon.io. It works really well for us. How do you compare that with an svg only approach? * Both are vector based. Foundation has icon fonts.* SVG is easier than making custom icon font.
- What happens when you update the foundation gem? ** This will impact every foundation project on your local computer
- Samuel Fitz (to All): is there a max out on svg size where if might still just make sense to use a jpg or png * SVG and PNG gets heavy with complex artwork: lots of gradients, colors, effects* Use JPEG for anything with lots of color or photos
What is interchange
Easiest way to create responsive content * Content that is appropirate for a specific device
What about visibility classes? * images are loaded regardless
Interchange for images
- maps to visibility classes
- small >= 640px
- medium >=1024px
- custom media queries possible
Interchange for content
Load html file based on media query * relative path for html file
What is abide?
Client side form validation using JS
How to use
- data-abide attribute
- html5 validation tags ie reuqired, pattern
Alpha * only alpha characters
Custom Patterns * regex * Another good regex tester is http://rubular.com
How are errors displayed?
- Error class applied to immediate parent
- data-invalid attribute applied to element
What is the top bar?
How do I use the top bar?
- top bar section
- left side
- right side
- use class .has-form for buttons
data-options attribute * is_hover * back_text
Responsive content slider
How do i use
data-orbit attribute on ul of images
- captions ** div .orbit-caption
- default height is tallest slide
Link to specific slide
- make sure not contained in a row
- jdescribe s behind interchange * events page load or resize, if media query matches, js will fetch content in background and inject into page* no need default image set in src
- does interchange work on background images * no idea* maybe load html partial with css
- why does abide turns off form validation ** no idea
- Prevent some nav items from being part of hamburger * use visibilty classes* adjust break point
- Charles Collins (to All): How would you allow the user to navigate to Item 1, i.e. first click opens the menu, second goes to the Item 1 href. Also, when stacked in small view, any plans to allow navigation to the parent item (item 1) as well as open the sub item menu? ** send us sample code
- Samuel Fitz (to All): General thoughts on angularjs and making it play nicely with foundation? (better way to get foundation js up and running with an angular app OTHER than wrapping foundation plugins in an angular directive) ** forked github project
- David White (to All): Any advantage in using interchange for retina 2x images over svg? **
- Samuel Fitz (to All): top bar nav item with dropdown and that dropdown being multiple columns * navbar not designed for grid* zurb best practice to avoid complex navigation * prefer flows
Tips & Tricks
- Contain icons instead of letters and numbers
- Easily chnage, size, color and style with css
- Vector images, will appear crisp on retina displays
- Includes .scss file in scss/fonts
- $font-path variable
- Free icon fonts from ZURB: http://zurb.com/playground/foundation-icons
Add to markup
- i element used because it’s deprecated
- class name for each icon
Add icons in scss
- use character string in content attribute
Nav & Visibility Classes
- Create separate navs for different screen sizes
- Be careful of code bloat
- Use dropdown plugin to create complex dropdown menus
- More flexible than topbar ** topbar designed for specific need to tame desktop first navigation, not entirely mobile first in spirit
- Ability to use rows, columns, custom HTML content
Using the top bar
- Can use in the top bar
- no need for .has-dropdown
- Just put it in li in topbar
- Use foundation in conjunction with masonry.js
- Similar to pinterest
- Integrates well with foundation
Off Canvas Menus
Create menus that slide in from outside the viewport
- Part of Foundation 5
- Uses hardware acceleration for animations
- left and right menus
- Charles Collins (to All): Any SEO implications in addition to bloat?
- Depends on your project. Use interchange
- Theo Nicolaou (to All): Are there any options for the off-canvas transition or is it only the standard slide-in?
- not yet
- Alachua County (to All): any tips for creating your own icon font?
- Ben Gremillion (to All): How we developed our icon fonts: http://zurb.com/article/1247/the-new-and-improved-foundation-icon-font
- Ivan Torres (to All): Have you try to adding a lazy loader to Masonry on Foundation? And if you did, do you have any tips or recommendations?
- No experience
- To All: Mega-dropdown. Possible for dropdown to span the entire 1000px width when used in topbar or in a row with several dropdowns?
- Possible. Can get hairy because of nesting, if button used to fire it is in middle, it’ll appear in context to that* If wanted to span entire width of page, create hidden section that activates through ..js
- Charles Collins (to All): What is your favorite method of makign a justified nav?
- Tab bar, block grid, text-align center
- What did we do well in this training?
- Hearing from the multiple speakers in charge of Foundation was great. It seemed that everything was well researched, as it answered a tons of questions to things I didn’t even realize!
- The biggest surprise was that Foundation 5 was heavily factored into everything. I was expecting only F4 discussion. I feel like I have a major head start when it becomes widely available in order to convert a few existing sites.
- What could we have done better in this training?
- A recording would be nice.