Review: Advanced Foundation Training

By makeaweli

- 11 minutes read - 2203 words

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

Medium 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

New breakpoints

  • 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

 

Collapsing Columns

  • Remove margin and padding from rows and columns

  • full-bleed

  • 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 **

 

Overlapping Columns

  • 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
  • javascript and data attribute _* data-match-height on row_* add js https://gist.github.com/mhayes/6066795

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

 

Questions

  • 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

File Structure

  • 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

Sass Versioning

  • 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

Media Queries

New Media Sizes

  • Media query ranges
  • uses ems
  • converted from pixel values
  • small-range
  • medium
  • large
  • xlarge
  • xxlarge-range

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

 

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
Combine and minify your javascript the simple way * bitballoon.com

 

Questions

  • 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

Javascript Components

Interchange

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

  • data-interchange

Media queries

  • default
  • 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

 

Abide

What is abide?

Client side form validation using JS

 

How to use

  • data-abide attribute
  • html5 validation tags ie reuqired, pattern

Validation patterns

Alpha * only alpha characters
Email
url
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

Top Bar

What is the top bar?

How do I use the top bar?

  • Nav
  • title
  • top bar section
  • left side
  • right side

Add components

  • use class .has-form for buttons

Customization

data-options attribute * is_hover * back_text

 

Orbit

Responsive content slider

 

How do i use

data-orbit attribute on ul of images

 

Customization

  • animation
  • captions ** div .orbit-caption

HTML content

  • default height is tallest slide

Deep linking

Link to specific slide

 

  • data-orbit-slide=”my-custom-link”
  • data-orbit-link=”my-custom-link”

Full screen

  • make sure not contained in a row

Callbacks

  • before-slide-change
  • after-slide-change

Questions

  • 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
  • Alachua County (to All): we use Sharepoint, which does not like data-attributes, which are heavily used for Sections. Is there a problem with adding those attributes with javascript when we know the pattern? **
  • 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

Icon Fonts

  • Contain icons instead of letters and numbers
  • Easily chnage, size, color and style with css
  • Vector images, will appear crisp on retina displays

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

Mega-dropdown

  • 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

div.f-dropdown .content

Using the top bar

  • Can use in the top bar
  • no need for .has-dropdown
  • Just put it in li in topbar

Masonry Grid

  • 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

Questions

  • 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?
  • 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

Survey Feedback

  • 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.