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
Baseline Layered UI Patterns: <dialog> and popover
Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered UI patterns are used frequently by developers.
Most of these user interface elements are added to web applications using either custom JavaScript or common libraries. With that route there’s a lot to make sure that you or the library you choose gets right.
The <dialog> element
and the popover attribute
are two Baseline layered UI patterns
that developers can reach
for instead of custom implementations.
To show the advantages
of using layered UI patterns built
into today’s web browsers –
and to give an example
of when you might reach for <dialog>
or use the popover attribute –
this article walks through
an example of a modal
that appears when the user attempts
to save an image
to a favorites list without being logged in.
Article contents
Copy permalink to “Article contents”- A modal
<dialog> - How to close the dialog
popover, rising to the top- Autofocus
- Style the
::backdrop - Make an entrance (and exit) with
@starting-style
The demo where we put it all together
Copy permalink to “The demo where we put it all together”See the Pen Baseline dialog demo 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!
