Views Responsive Grid in Drupal 10 Core to Enhance Olivero Theme
On the 04th of August 2020, Mike Herchel, the lead developer and maintainer of Olivero (the new default theme for Drupal Core), announced through his blog post that a new killer feature was committed to Drupal 10 core: Views Responsive Grids. Through this much sought-after feature, Drupal 10 websites could use fancy and modern CSS tricks to make their user interface ultra responsive.
Now, what does that mean to Drupalists? Read on to know more:
When the variance in screen sizes was too low, the grids in a web page were kind of static. As a significant divergence of screen sizes and screen resolutions emerged, the web developer had to adopt a design wherein the number of rows and columns should vary accordingly.
Drupal used to do it by specifying a different number of columns for each predefined screen width. It was not easy.
“Drupal core’s original ‘Grid’ format was written before responsive web design was a thing. It wrapped each row (or column) with a <div> element, to which you could add CSS classes to. This wrapping element prevented core developers from refactoring the CSS to make it responsive. We couldn’t just throw away user-inputted values,” explains Herchel.
During Olivero’s development, Mike Herchel was able to refactor the old Grid format to remove the row/column wrapping <div>’s. The issue with backward compatibility was nil as Olivero was for new sites, and people won’t be upgrading to it.
A significant factor that limited the adoption of genuinely responsive designs was the popularity of Internet Explorer, Microsoft’s legacy browser. Drupal was committed to supporting IE11, so it could not jump on the bandwagon. Because of this, the theme developers could not implement CSS custom properties or CSS Grid in Olivero.
Microsoft has since ended supporting IE, and the usage is steadily declining. They are actively promoting their Chromium-based browser, Edge, which debuted in January 2020. Like any other modern browser, Microsoft Edge is capable of supporting stylish CSS hacks, giving loyal Windows users a taste of the evolved web. As the pain point evaporated, Drupal is also embracing change.
With the introduction of the new feature, web developers are relieved from writing custom responsive CSS grids on each project.
Instead of specifying the number of columns and screen widths, the developer could set the maximum number of columns, minimum grid cell width, and the gutter spacing in the new implementation. It is more flexible than the former method!
The maximum permitted columns are shown inside the specified container on larger screens. The cell width of each grid is adjusted relative to the window size. If it falls below the minimum demanded grid cell width, the grid will reflow to have fewer columns and readjusts itself. This way, if the screen size is smaller, the number of columns will be less, and if the screen size increases, there will be more columns - the upper limit specified.
“The vertical alignment mode of the new responsive grid works just as well! Instead of using CSS Grid, we use CSS columns, an under-used feature IMHO,” says Herchel.
If you are interested in this feature, we recommend reading Mike Herchel’s article: “An Auto-Filling CSS Grid With Max Columns of a Minimum Size,” published in CSS-Tricks. You can also test the feature by dragging the left column to its maximum and minimum possible width within Codepen or use this tugboat preview.
Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please let us know in the comments below and we will try to address the issue as best we can.
Related People
Comments
You may also like
