Deprecated Content

Our News & Blog has been around since 2009. Some older articles may be formatted for styles and layouts that have since become deprecated. I've left them up, rather than removing all the old articles. Please excuse the broken links and feel free to comment or email if you're unable to view any of our old articles.

May 15, 2018

Masonry & Image Loading

New Filter Tool and Speed Optimizations

Finally, the Masonry grid landed in the UIkit 3 as part of the Grid component. Grid items can now be arranged in a gap-free multi-column layout, no matter if the grid cells have a different height. It removes the gaps, and tiles dynamically on-the-fly. No magic, no position absolute! Just enable Masonry to any grid.

Filter Component

The second highlight is the new Filter component. It's the perfect match for the Masonry grid. Filter and sort items in multi-column layouts by category, date or other meta data. In UIkit 3, the Filter component works on its own and is no longer tied to the grid. Any layout can be filtered or sorted no matter how the items are positioned. It even works with both the masonry and the parallax effects applied to the grid. Items fade and move with smooth transitions between the different filtering and sorting states.

You can have multiple filter controls on different positions in your layout. For example, there can be a navigation at the top for the primary filter and a sidebar navigation with secondary filters. Filter controls can also be grouped, which allows filtering items using multiple criteria at the same time.

Image Loading

With the most recent upgrades to the UIKit, a deep look into page speed optimizations was taken, and this new Image component is what resulted. It speeds up page loading times dramatically, and decreases traffic by only loading images as they enter the viewport. The Image component even allows you to use srcset for the CSS background-image property. This means we can set multiple versions of the same image--or video--meant for specific screen sizes or devices. We don't need to waste browser resources loading an image that the user never scrolls into view, and we wouldn't want to render a 4MP hi-definition image for a user viewing your content at a 600px screen size. Here is how it works:

Only images which are initially in the viewport are loaded
Other images are lazy loaded as they enter the viewport when scrolling.
An empty placeholder image is generated instantly to prevent content from jumping while images are loaded or not yet in the viewport.
Optionally, the placeholder image can have any kind of background or preload animation.

Filter Demonstration

The below demo uses the new and improved UIKit masonry and filter components. Over the next couple of weeks, when the new tools are added to our website, it will begin to function. To see a live demonstration today on the new UIKit3 Release Candidate framework, view the Filter Component in the UIKit documentation section.

  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Item
  • Views: 1428

Related Articles

Tweets @themicrotechs

On Instagram @themicrotechs

"this is how I always envisioned our website. fantastic job!"

Dave Shapiro, CEO, Cartelligent
Oakland Athletics Logo
Read about the custom system we developed for The Oakland Athletics

CMS Web Design

Custom Joomla & Wordpress
Since 2008
The Microtechs, LLC P.O. Box 13 Antioch, CA 94509
SF Bay Area Web Designer & Developer Since 2008
© 2008-2019 The Microtechs, LLC