Feo CSS v2.4.0
  • Introduction
  • What is Feo CSS?
  • Getting started
  • Design tokens
  • Themes
  • Credits
  • Layout
  • Center
  • Cluster
  • Dialog
  • Holy grail
  • Masonry
  • Pancake
  • Sidebar
  • Stack
  • Switcher
  • Tiles
  • Utilities
  • Token-based
  • Flexbox, grid and gap
  • Others
  • Position
  • Typography
  • Made with ♥️ by Crinkles

Layout > Tiles

The .tiles class allows for a responsive tile system. Based on the settings, the layout determines itself how many tiles fit horizontally, and scales the tiles in the available space.

Utility classes

The available utility classes to alter the settings for .tiles are listed below.

  • .tiles-w-<name>: set the min-width of an individual item in the tile system, based on $feo-breakpoints.
  • .gap-<name>: set the gap property, which defines the gap both vertically and horizontally between items in the tile system. Based on $feo-sizes.

If the utility classes are not flexible enough and you want to adjust the way the layout pattern behaves, adjust the --tiles-width custom properties on the element you are applying this pattern to.

Outline: Utility classes
Category:
Layout
Source:
https://github.com
Last modified:
4/30/2022, 12:45:00 PM