As much as I love building systems from the ground up, controlling every part of the design and development, sometimes it’s faster, better, and easier to let a framework handle control of the basics so that you can focus on the fun stuff.
CSS frameworks have been around for a while and they aim to provide a solid foundation that you can implement in your projects to take care of the basics (resets, grid layouts, media elements, typography, etc). While there are heaps of frameworks out there, the two big guns Bootstrap and Zurb Foundation have been battling it out for a while, improving, refining, and updating their frameworks with each release.
The 6th version of the Foundation framework is now out and today I’m going to run through the most important parts and see what has changed and what’s been introduced.
What’s In It For Me with Foundation 6?
Unlike previous versions that focused on an incremental upgrades, Foundation 6 brings with it a heavy rework of the framework. Zurb has pretty much gone back to the drawing board and used all of their skills, feedback from the community, and advances in browser tech to redevelop Foundation.
The framework has been given a big overhaul with multiple components being pared back to provide a base structure only. Most elements have been streamlined to make them faster, smaller, easier to use, and overall better than before. The core mantra of this version seems to be getting things back to basics.
Along with the changes to the existing components come cool new features such as the Flex Grid, Motion UI, Yeti Launch, and additional building blocks and templates.
[author_more]
Optimizing Foundation: A Full Overhaul
One of the main complaints I’ve heard from people when they talk about frameworks is their size. They are worried about download times and bloat weighing down their sites. Overall it’s a valid concern with several frameworks wasting up to 90% of their assets. With this latest version, Zurb have been able to significantly reduce the overall size of their system, dropping over 50% in comparison to Foundation 5.
If you wanted everything in Foundation 5, the CSS and JavaScript files would both be 160KB and 110KB, respectively. With Foundation 6, these have dropped to 68KB and 92KB. The reduction in size is due to several fundamental changes that Zurb have discussed in their build-up to its release, including:
- Redefining several larger components into smaller modular components (such as the navigation menu).
- Reducing specificity. Instead of having deeply nested selectors and styles, the framework will now lightly handle the styling (letting you more easily customize your site).
- Simplifying Sass variables and mixins to create fewer options (its purpose is to be a framework that you customize yourself). Most of the components have been changed in some form to make it more streamlined and less bloated.
- Redefining their JavaScript so that instead of each component using its own functionality, they all share universal utilities (to cut down on wastage and keep things modular).
In a nutshell, the improvements have been fairly drastic. The optimizations have saved thousands of lines of rendered styles and bring the various JavaScript utilities together.
Motion UI: Easy Animations and Transitions
A really great feature that’s finally made its way to production is the new Motion UI library. In essence this library is a series of transitions and animations that Foundation uses to power several of their own components (such as the Reveal, Toggler, and Orbit elements).
Motion UI actually came from Zurb’s Foundation for Apps branch, but has found its way into Foundation as an optional (but highly recommended) library. Zurb knows that having movement is important and that when used correctly can give your site that extra bit of interactivity and re-activity.
You can leverage its multiple options to control the speed of animations, easing effects, and a range of actions such as sliding, fading, scaling, etc. Using movement subtly can bring a feeling of depth to your site and enhance your user experience.
Motion UI is optional so you need to select that when downloading your custom package. If you have the Sass version it should be as simple as making sure it’s included in your app.scss file.
[code language="sass"]
@include motion-ui-transitions;
@include motion-ui-animations;
[/code]
Prebuilt transitions
One of the easiest ways to use the library is just to leverage the pre-built classes. It’s as simple as adding your desired transition (for example, scale-in-up). Motion UI will do the rest.
Continue reading %What’s New in Foundation 6?%
by Simon Codrington via SitePoint
No comments:
Post a Comment