Grid Lanes – The Future of Masonry Layout
This long-debated solution for masonry layout is now available and it’s time to figure out how to use it. Join us for a deep dive into the workings of Grid Lanes.
Winging It
post type
How to Implement an Image Gallery Using Baseline Features
From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to add additional libraries that further increase page size.
The web platform has added support for many of the underlying pieces of an image gallery. So, what does it look like to code an image gallery with Baseline features? This demo showcases a variety of techniques that you can use to do just that.
How to deal with large image sizes
Copy permalink to “How to deal with large image sizes”Images can be some of the largest assets you ask your users to download, and image galleries by their nature often have many images. This demo uses a couple of Baseline features to help reduce the performance impact on users.
Article contents
Copy permalink to “Article contents”- Lazy loading and AVIF
- Lightbox effect transitions with
@starting-style - Using
backdrop-filterfor better readability - Aspect ratio
- Take it further
The demo where we put it all together
Copy permalink to “The demo where we put it all together”See the Pen Baseline Zoo by @web-dot-dev on CodePen.
Posts about CSS
Winging It post typeSurprising Effects of CSS Shorthands
CSS properties come in two excellent flavors – longhand properties have a direct impact on the element, while shorthand properties take a much more convoluted path. There’s a lot going on when we use a shorthand property, with hidden surprises, and reasons we might use one or the other.
Link post typeColor Themes with Baseline CSS Features
So, you have a site that you want to build or redesign. Maybe you have a few core colors in mind, and you’re thinking about how to quickly implement a theme based on those colors. Baseline features can help!
