Reuters Internet Fashion

The new grid for graphics

Snap classes and new dimensions

New well dimensions

Graphic elements (and the well!) have new dimensions...

.graphic.narrower
.graphic.narrow
.graphic
.graphic.wide
.graphic.wider

... which correspond to the artboards in our new AI templates.

xs
sm
md
lg
xl

Snap to size

Out-of-the-box widths for graphics are fluid between breakpoints, but you can now add a class to make them snap to each new size.

Resize this window!

.graphic.snap.narrower
.graphic.snap.narrow
.graphic.snap
.graphic.snap.wide
.graphic.snap.wider

Skip breakpoints you don't use

You can also add a class to skip sizes you don't want to create artboards for.

.graphic.snap.skip-narrow
.graphic.snap.wide.skip-regular
.graphic.snap.wider.skip-wide
.graphic.snap.wider.skip-wide.skip-narrow