There's a revolution happening right now. The way we think about and design websites is going to change again. Old conventions and methods are being replaced by exciting new technologies that open up entirely new ways to design and build the web. And they're available today.
Out With the Old
Most early websites in the 90’s were little more than digital brochures, which makes sense since the web was born from the world of print. Our options as web designers for laying out content fell short of what was available to print designers for many years. Slowly but surely, our tools got better and we discovered new methods and techniques that allowed us to do some incredible things. The web came into its own, but the world of print still exerts its influence on the way many designers think. To this day we still call web files “documents,” arrange our content in “pages,” and try to fit the experience of users into sitemaps.
But pages are limiting. Pages are a convention of print- they don’t fit for the dynamic, interactive medium that is the web. Users don’t look at websites in some linear order, they journey through them, they explore through multiple pathways. We have a completely transformable, liquid canvas to paint this picture with, but we aren’t using it! The next decade will see more customization, personalization and predictive technologies that make the content and presentation fully dynamic. The factory line, widget production line mentality no longer applies- each user can have a unique experience.
In With the New
Over the last two decades, ZURB has pushed the web forward through our design work, and wth Foundation, the world’s most advanced front-end framework. Foundation was designed to help people take full advantage of the power of the web. It was the first framework to give designers a responsive grid to work with, the first to be mobile-first, the first to be semantic, and the first to be constructed with Sass, and the first to have accessibility built in to give designers and developers the tools they needed to make a user experience. Just last year, Flexbox was added to expand layout options even more. And we’re continuing to bring technology advancements to you. We're excited about a new technology that we think has the power to dramatically change the web, a technology that finally transform websites into the completely moldable, interactive, and customizable experiences we have always envisioned they would be. That technology is CSS Grid.
CSS Grid is a pure-CSS implementation of a grid layout. It enables truly 2 dimensional layouts of all sorts using dramatically less markup than previous tools. What’s more, because it pure CSS, it is all easily changeable with media queries. This means that designers can create layouts and components that are responsive to browser size in radically new ways - layout changes that previously required JavaScript and complex logic to manipulate structural elements can be done with simple CSS and relatively minimal markup.
We’ve been experimenting with the possibilities of CSS Grid for months, and we’re incredibly excited about what we’ve been able to achieve. Here are three Playground Pieces that demonstrate the possibilities of CSS Grid, each with huge ramifications for Foundation:
1. Foundation CSS Grid Examples
First, an exploration into the the possibilities of CSS Grid with Foundation. In this grid we explore three different possibilities enabled by CSS grid. First a responsive data component that uses tabular views where space permits, second a responsive navigation “mega menu”, and finally a complex layering of content that previously would have been complicated and fragile to implement. Each of these can be a new component within Foundation. These also highlight how with CSS-grid, we will be able to evolve even components that previously were dramatically different to morph into one another responsively.
2. Foundation CSS Grid + Container Queries
Next, we take one of these CSS-grid enabled components in Foundation and explore the possibilities that arise when combining it with another hot new technology: Container Queries. Container Queries take the concept of media queries and allow you to apply it to containers within a page - letting you truly create components responsive to the space available to them. In this exploration, we combine a responsive data view with an expandable navigation, using container queries to automatically adjust the data view based on the space available to it. While container queries do not yet have browser support, there is a first class polyfill and we are making them a first class citizen within Foundation.
Foundation CSS Grid + Container Queries
3. Foundation Grids within Grids
Finally, we take these concepts to the next level. Proponents of CSS Grid often talk about the page-level layout possibilities, but by combining CSS Grid with container queries we firmly believe that we should be thinking beyond the page, and into nestable, reusable, grid-based components. In this final exploration we explore the possibilities of nesting grid based components with Foundation, with the inner component able to move seamlessly between parts of the other grid, formatting itself intelligently based on the space available to it. Foundation’s grid has always been flexible, but with CSS Grid hitting browsers the potential to mix, match, and combine grids is quickly becoming a reality.
What CSS Grid means for Foundation and the Future of the Web
Foundation has always led the way for how the web is designed and built, and we’ve been preparing ways we can help you harness the power CSS Grid. We see a future filled with radically responsive components that morph and change depending on the circumstance or device. The development of CSS Grid will enable the very concept of grids to change from a massive structural choice to something more like components. Imagine having a set of grid components that allow you to get entire layouts and sublayouts right out of the box, and then nesting, combining, and recombining them.
Browser support for CSS Grid is exploding, with several adding support just this month:
- Chrome. Enabled by default since version 57.
- Firefox. Enabled by default since version 53.
- Internet Explorer. Enabled by default since IE10
- Opera. Enabled by default since version 44.
- Safari. Enabled by default since version 10.1.
The term “web page” is starting to feel very, very... inadequate. CSS Grid opens up layout in ways that were not possible before, and our minds are racing with the opportunity in front of us. We hope these experiments will get you as excited as we are, and demonstrate a little of what’s possible with this new tool.
ZURB works with companies every day to help them reimagine the possible with regards to their web applications, websites, and products. Do you have a project that deserves to push the limits? Feel free to get in touch, we’d love to work with you.
