IE to Chrome: IBM's CSS Grid Ups Web Design Ante

CSS Gridish builds resources out of your design specs by providing a sketch file with artboards and layout settings, default CSS/SCSS Grid codes using CSS Flexbox, and a Google Chrome extension to let people check their webpage alignment. The purpose of CSS Gridish is to introduce web developers to more intricate layouts like the grids you find on Bootstrap, Material Design, or Carbon Design System.

Why is IBM's CSS Grid spec better for web design? Because designers can now deal with multiple blockers at once. CSS Grid is browser-friendly, in the sense that it can load pages from Internet Explorer. CSS Gridish stores the file, yourGrid.css along with, yourGrid-legacy.css, which serves Grid code on exclusive browsers via backward compatibility. Web design tools such as React Sketchapp, CSS Gridish allows developers to review web pages in the same config file as a Sketch artboard.

IBM added the Chrome extension to create shortcuts, letting developers view their coded results in the same layout as a Sketch file. It enables them to track the grid design even when they input HTML layers. So how does it all work? CSS Gridish responds to the file css-gridish.json. This json file will adjust to your grid design specs and options when saving output files. The current settings assign both outside/inside gutters and your main columns to meet certain conditions.

Afterward, CSS Gridish sends a command through npx css-gridish. It contains a folder with every grid file you need. For newbie users, they can learn about the different classes by following the .myElement rules stating the sizes of grid columns and rows. The flexbox fallback code resembles other grid frameworks using familiar class names. These lines of code are changed with modifier classes in order to create scalable shapes.

However, there is a catch to using CSS Gridish code. And that is the inability to use its gap property for scaling gutters. What it does, is apply padding classes that are half the size of a gutter which causes gaps in background colors or full-sized media images. As for future updates, IBM will implement 2-D component libraries which creates more flexibility towards the design system.