Foundation 6 Meets WordPress
By Susan Daniero
Foundation
JointsWP
Foundation (for Sites) 6 is officially here, which means JointsWP 4 is also here! As in previous versions of JointsWP, the theme is essentially “blank” but includes all of the awesome features of Foundation 6. Let’s take a look at what’s new in Foundation 6 and how it effects JointsWP 4.
more
What’s new in Foundation 6?
No More Bloat
CSS frameworks have always had an unjust reputation of being “bloated” – Foundation 6 is changing that. Most of the JavaScript components have been rewritten and the restructuring of Sass files to be “leaner, meaner and cleaner” means you can expect a 40-50% smaller output when using Foundation 6 compared to Foundation 5. The Sass restructuring also makes it extremely easy to select which Sass components you want to include – so you won’t have a ton of extra styles you never plan on utilizing. If you consider Foundation 6 “bloated”, you’re doing it wrong.Menus Receive a Makeover
Modifying the “top bar” in Foundation 5 was far from fun – if you wanted to do anything besides change a few colors, you were in for a lot of work. In Foundation 6, the “top bar” has now been split up into 3 separate menu types – a dropdown menu, an accordion menu and a drilldown menu. Using the responsive navigation patterns will allow you to implement different menus on specific screen sizes. For example, a dropdown menu may look great on a desktop device but be better suited as an accordion menu on smaller devices – with Foundation 6 and JointsWP 4, you only need to adjust a few classes to make this happen.Accessibility & What-Input
The ZURB team put a lot of work into making sure Foundation 6 is as accessible as possible. One really cool feature is the addition of What-Input, which allows developers to create separate styles based on whether the user is using a keyboard or a mouse. This means developers can keep important accessibility elements such as outlines visible to users using a keyboard, but set the outlines to be hidden if the site is being navigated with a mouse.That’s Not All, Folks
This just scratches the surface of the changes that came to Foundation 6. Other useful features include:- Flex Grid – developers can now use the flex grid using the same markup they used in the traditional/float grid, but with a lot more flexibility (pun completed intended)
- Motion-UI – this will be included by default in Foundation 6 and allows developers to quickly create their own motion effects or use existing effects created by the Foundation team.
- Off-Canvas Improvements – no longer strictly used for menus, the off-canvas component in Foundation 6 will act much more like a container that can hold all types of content.
- So, so, so much more.
What’s new in JointsWP 4?
The primary purpose of this was release was to integrate Foundation 6 into JointsWP, however, other small changes were made as well.- Improved File Structure – my weird obsession with file structure continues. Vendor files, such as Foundation and jQuery now live inside a /vendor/ directory. This makes it extremely easy to update these assets, even if you aren’t using Bower.
- Improved Loop Structure – the new loop structure makes it easier to include template parts and also allows for custom error messages to be created much more easily.
- Gulp & Bower Working Together – Run gulp bower to automatically update all vendor files. Bower will create a new bower_components directory and then automatically copy the updated files to your /vendor/ directory. Awesome stuff.
- Better Translation Support – All text/strings should now be fully translation ready.