Files
webawesome/docs/docs/layout/index.md
Lindsay M c2d240b393 Layout utilities (#169)
* initial progress

* testing progress

* play with naming, utility classes

* more tweaking and testing

* progress on 12 column grid

* add layout index, start documenting

* documentation progress

* cleanup and doc progress

* more doc progress

* more progress

* final progress hurdle and cleanup

* refining and editing

* remove sandbox

* refactor extra utility classes

* layout index improvements

* change gap modifiers to utility classes

* change align modifiers to utility classes

* move layout examples above fold

* reduce demo markup

* use standard aspect ratio property for wa-frame

* change border-radius modifier to utility class

* rename wa-grid's 'min-inline-size' to 'min-column-size'

* clean up comments

* rename wa-align-* to wa-align-items-*

* break out style utilities from layout

* clean up
2024-11-21 14:07:12 -05:00

2.3 KiB

title, description, layout
title description layout
Layout Browse Web Awesome's components and utilities for creating responsive web layouts. page-outline
<style> wa-page > main { max-width: 120ch; margin-inline: auto; } .index-grid wa-card::part(header) { background-color: var(--wa-color-neutral-fill-quiet); border-bottom: none; } wa-card .component-name { font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-action); } </style>

Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.