UNPKG

@ulu/frontend

Version:

A framework-agnostic frontend toolkit providing a modular, tree-shakable library of accessible components and utilities. Designed for seamless integration, it features a highly configurable SCSS system for any environment and vanilla JavaScript modules op

github.com/Jscherbe/frontend

Jscherbe/frontend

23 lines (21 loc) • 1.87 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- @ulu-demo title: Basic Tile Grid (Reflowable) description: A grid of tiles that automatically reflows to fit as many items as possible based on a preferred minimum width. --> <div class="tile-grid"> <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 1</div> <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 2</div> <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 3</div> <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 4</div> <div class="tile-grid__item" style="background: #eee; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center;">Tile 5</div> </div> <!-- @ulu-demo title: Static Column Grid description: Using the `tile-grid--static` modifier to enforce a specific number of columns that adapt per breakpoint (e.g., 2 on small, 3 on medium). --> <div class="tile-grid tile-grid--static"> <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 1</div> <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 2</div> <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 3</div> <div class="tile-grid__item" style="background: #ddd; border: 1px solid #bbb; display: flex; align-items: center; justify-content: center;">Static 4</div> </div>