mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
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
This commit is contained in:
Lindsay M
@@ -33,6 +33,8 @@
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
|
||||
@@ -215,6 +215,42 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{# Layout #}
|
||||
<h2>Layout</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/layout">Layout Overview</a></li>
|
||||
<li><a href="/docs/components/page">Page</a></li>
|
||||
<li><a href="/docs/layout/cluster">Cluster</a></li>
|
||||
<li><a href="/docs/layout/flank">Flank</a></li>
|
||||
<li><a href="/docs/layout/frame">Frame</a></li>
|
||||
<li><a href="/docs/layout/grid">Grid</a></li>
|
||||
<li><a href="/docs/layout/split">Split</a></li>
|
||||
<li><a href="/docs/layout/stack">Stack</a></li>
|
||||
</ul>
|
||||
|
||||
{# Patterns #}
|
||||
<h2>Patterns</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/patterns/">Pattern Overview</a>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/app">Web App</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce">E-commerce</a>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/blog">Blog</a></li>
|
||||
<li><a href="/docs/patterns/news">News</a></li>
|
||||
</ul>
|
||||
|
||||
{# Theming #}
|
||||
<h2>Theming</h2>
|
||||
<ul>
|
||||
@@ -247,25 +283,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Patterns</h2>
|
||||
|
||||
{# Style Utilities #}
|
||||
<h2>Style Utilities</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/patterns/">Pattern Overview</a>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/app">Web App</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce">E-commerce</a>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-summmary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/blog">Blog</a></li>
|
||||
<li><a href="/docs/patterns/news">News</a></li>
|
||||
</ul>
|
||||
<li><a href="/docs/style-utilities/align-items">Align Items</a></li>
|
||||
<li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
|
||||
<li><a href="/docs/style-utilities/gap">Gap</a></li>
|
||||
<li><a href="/docs/style-utilities/text">Text</a></li>
|
||||
</ul>
|
||||
11
docs/_includes/svgs/layout/cluster.njk
Normal file
11
docs/_includes/svgs/layout/cluster.njk
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 30C0 26.6863 2.68629 24 6 24H10C13.3137 24 16 26.6863 16 30V34C16 37.3137 13.3137 40 10 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 54C0 50.6863 2.68629 48 6 48H26C29.3137 48 32 50.6863 32 54V58C32 61.3137 29.3137 64 26 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M32 6C32 2.68629 34.6863 0 38 0H42C45.3137 0 48 2.68629 48 6V10C48 13.3137 45.3137 16 42 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M24 30C24 26.6863 26.6863 24 30 24H42C45.3137 24 48 26.6863 48 30V34C48 37.3137 45.3137 40 42 40H30C26.6863 40 24 37.3137 24 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M40 54C40 50.6863 42.6863 48 46 48H58C61.3137 48 64 50.6863 64 54V58C64 61.3137 61.3137 64 58 64H46C42.6863 64 40 61.3137 40 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M56 6C56 2.68629 58.6863 0 62 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H62C58.6863 16 56 13.3137 56 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M56 30C56 26.6863 58.6863 24 62 24H66C69.3137 24 72 26.6863 72 30V34C72 37.3137 69.3137 40 66 40H62C58.6863 40 56 37.3137 56 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M72 54C72 50.6863 74.6863 48 78 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H78C74.6863 64 72 61.3137 72 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
4
docs/_includes/svgs/layout/flank.njk
Normal file
4
docs/_includes/svgs/layout/flank.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M32 6C32 2.68629 34.6863 0 38 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H38C34.6863 24 32 21.3137 32 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 518 B |
6
docs/_includes/svgs/layout/frame.njk
Normal file
6
docs/_includes/svgs/layout/frame.njk
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="82" height="66" viewBox="0 0 82 66" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 15C17 11.6863 19.6863 9 23 9H59C62.3137 9 65 11.6863 65 15V51C65 54.3137 62.3137 57 59 57H23C19.6863 57 17 54.3137 17 51V15Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M1 7C1 3.68629 3.68629 1 7 1H75C78.3137 1 81 3.68629 81 7V59C81 62.3137 78.3137 65 75 65H7C3.68629 65 1 62.3137 1 59V7Z" stroke="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 6"/>
|
||||
<path d="M25 40.6444L30.3333 35.3111L35.6667 40.6444L46.3333 28.8444L57 40.6444" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M32.8889 29.5556C32.8889 30.9669 31.7447 32.1111 30.3333 32.1111C28.9219 32.1111 27.7778 30.9669 27.7778 29.5556C27.7778 28.1442 28.9219 27 30.3333 27C31.7447 27 32.8889 28.1442 32.8889 29.5556Z" stroke="var(--wa-color-neutral-fill-quiet)" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
11
docs/_includes/svgs/layout/grid.njk
Normal file
11
docs/_includes/svgs/layout/grid.njk
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V10C24 13.3137 21.3137 16 18 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 30C0 26.6863 2.68629 24 6 24H18C21.3137 24 24 26.6863 24 30V34C24 37.3137 21.3137 40 18 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 54C0 50.6863 2.68629 48 6 48H18C21.3137 48 24 50.6863 24 54V58C24 61.3137 21.3137 64 18 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M32 6C32 2.68629 34.6863 0 38 0H50C53.3137 0 56 2.68629 56 6V10C56 13.3137 53.3137 16 50 16H38C34.6863 16 32 13.3137 32 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M32 30C32 26.6863 34.6863 24 38 24H50C53.3137 24 56 26.6863 56 30V34C56 37.3137 53.3137 40 50 40H38C34.6863 40 32 37.3137 32 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M32 54C32 50.6863 34.6863 48 38 48H50C53.3137 48 56 50.6863 56 54V58C56 61.3137 53.3137 64 50 64H38C34.6863 64 32 61.3137 32 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M64 6C64 2.68629 66.6863 0 70 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H70C66.6863 16 64 13.3137 64 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M64 30C64 26.6863 66.6863 24 70 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H70C66.6863 40 64 37.3137 64 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M64 54C64 50.6863 66.6863 48 70 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H70C66.6863 64 64 61.3137 64 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
4
docs/_includes/svgs/layout/split.njk
Normal file
4
docs/_includes/svgs/layout/split.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="128" height="24" viewBox="0 0 128 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H18C21.3137 0 24 2.68629 24 6V18C24 21.3137 21.3137 24 18 24H6C2.68629 24 0 21.3137 0 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M104 6C104 2.68629 106.686 0 110 0H122C125.314 0 128 2.68629 128 6V18C128 21.3137 125.314 24 122 24H110C106.686 24 104 21.3137 104 18V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 524 B |
5
docs/_includes/svgs/layout/stack.njk
Normal file
5
docs/_includes/svgs/layout/stack.njk
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="88" height="64" viewBox="0 0 88 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 6C0 2.68629 2.68629 0 6 0H82C85.3137 0 88 2.68629 88 6V10C88 13.3137 85.3137 16 82 16H6C2.68629 16 0 13.3137 0 10V6Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 30C0 26.6863 2.68629 24 6 24H82C85.3137 24 88 26.6863 88 30V34C88 37.3137 85.3137 40 82 40H6C2.68629 40 0 37.3137 0 34V30Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
<path d="M0 54C0 50.6863 2.68629 48 6 48H82C85.3137 48 88 50.6863 88 54V58C88 61.3137 85.3137 64 82 64H6C2.68629 64 0 61.3137 0 58V54Z" fill="var(--thumbnail-base-color, var(--wa-color-neutral-on-quiet))"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 718 B |
@@ -280,6 +280,64 @@ wa-page > main:has(> .index-grid) {
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Index Pages */
|
||||
wa-page > main:has(> .index-grid) {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.index-summary {
|
||||
max-inline-size: 80ch;
|
||||
}
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-category {
|
||||
grid-column: 1 / -1;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
background-color: transparent;
|
||||
@@ -293,6 +351,27 @@ wa-page > main:has(> .index-grid) {
|
||||
padding-inline: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
.layout-example-boundary {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.layout-example-block {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
|
||||
.layout-example-mixed-sizing .layout-example-block:nth-child(3n) {
|
||||
min-inline-size: 6rem;
|
||||
}
|
||||
.layout-example-mixed-sizing .layout-example-block:nth-child(3n + 2) {
|
||||
min-inline-size: 8rem;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.two-columns {
|
||||
columns: 2;
|
||||
|
||||
147
docs/docs/layout/cluster.md
Normal file
147
docs/docs/layout/cluster.md
Normal file
@@ -0,0 +1,147 @@
|
||||
---
|
||||
title: Cluster
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-cluster']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-cluster'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-cluster">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<!-- We'll vary the div sizes to show the flow of cluster elements -->
|
||||
<style>
|
||||
.wa-cluster div:empty:nth-child(3n) {
|
||||
min-inline-size: 6rem;
|
||||
}
|
||||
.wa-cluster div:empty:nth-child(3n + 2) {
|
||||
min-inline-size: 8rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Clusters are great for inline lists and aligning items of varying sizes.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="web-awesome"></wa-icon>
|
||||
<a href="#">Components</a>
|
||||
<a href="#">Layout</a>
|
||||
<a href="#">Patterns</a>
|
||||
<a href="#">Theming</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-xl">Withywindle Pub and Eatery</h3>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-rating value="4.6" read-only></wa-rating>
|
||||
<strong>4.6</strong>
|
||||
<span>(419 reviews)</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
</div>
|
||||
<span class="wa-caption-m">•</span>
|
||||
<wa-tag size="small">Comfort Food</wa-tag>
|
||||
<wa-tag size="small">Gastropub</wa-tag>
|
||||
<wa-tag size="small">Cocktail Bar</wa-tag>
|
||||
<wa-tag size="small">Vegetarian</wa-tag>
|
||||
<wa-tag size="small">Gluten Free</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align Items
|
||||
|
||||
By default, items are centered in the block direction of the `wa-cluster` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-cluster` to specify how items are aligned in the block direction:
|
||||
- `wa-align-items-start`
|
||||
- `wa-align-items-end`
|
||||
- `wa-align-items-center`
|
||||
- `wa-align-items-stretch`
|
||||
- `wa-align-items-baseline`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-align-items-start" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-cluster wa-align-items-end" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-cluster wa-align-items-center" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-cluster wa-align-items-stretch" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
By default, the gap between cluster items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-cluster` to specify the gap between items:
|
||||
- `wa-gap-0`
|
||||
- `wa-gap-3xs`
|
||||
- `wa-gap-2xs`
|
||||
- `wa-gap-xs`
|
||||
- `wa-gap-s`
|
||||
- `wa-gap-m`
|
||||
- `wa-gap-l`
|
||||
- `wa-gap-xl`
|
||||
- `wa-gap-2xl`
|
||||
- `wa-gap-3xl`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-2xl">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
174
docs/docs/layout/flank.md
Normal file
174
docs/docs/layout/flank.md
Normal file
@@ -0,0 +1,174 @@
|
||||
---
|
||||
title: Flank
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-flank']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-flank'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space. When space is limited, the items wrap.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Flanks work especially well for asides, inputs with adjacent buttons, and rich description lists.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-input>
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button>Search</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1553284966-19b8815c7817?q=20" label="Gandalf's avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<strong>Gandalf</strong>
|
||||
<p class="wa-body-s">All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1542403764-c26462c4697e?q=20" label="Boromir's avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<strong>Boromir</strong>
|
||||
<p class="wa-body-s">One does not simply walk into Mordor. Its Black Gates are guarded by more than just Orcs. There is evil there that does not sleep, and the Great Eye is ever watchful.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-start">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1518495973542-4542c06a5843?q=20" label="Galadriel's avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<strong>Galadriel</strong>
|
||||
<p class="wa-body-s">The world is changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost, for none now live who remember it.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Position
|
||||
|
||||
By default, the first item in the `wa-flank` container will flank the other content. You can specify whether the first or last item will flank the remaining content by appending `:start` or `:end` to the `wa-flank` class.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank:start">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank:end">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Sizing
|
||||
|
||||
The flank's inline size is determined by the size of its content, but you can set a target size using the `--flank-size` property. When the flank wraps, it stretches to fill the inline size of the container.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank" style="--flank-size: 200px;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank" style="--flank-size: 6rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
The main content fills the remaining inline space of the container. By default, the items wrap when the main content is less than 50% of the container. You can change the minimum size of the main content with the `--content-percentage` property.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank" style="--content-percentage: 70%;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank" style="--content-percentage: 85%;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align Items
|
||||
|
||||
By default, items are centered in the block direction of the `wa-flank` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-flank` to specify how items are aligned in the block direction:
|
||||
- `wa-align-items-start`
|
||||
- `wa-align-items-end`
|
||||
- `wa-align-items-center`
|
||||
- `wa-align-items-stretch`
|
||||
- `wa-align-items-baseline`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank wa-align-items-start" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-end" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-center" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-stretch" style="min-height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
By default, the gap between flank items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-flank` to specify the gap between items:
|
||||
- `wa-gap-0`
|
||||
- `wa-gap-3xs`
|
||||
- `wa-gap-2xs`
|
||||
- `wa-gap-xs`
|
||||
- `wa-gap-s`
|
||||
- `wa-gap-m`
|
||||
- `wa-gap-l`
|
||||
- `wa-gap-xl`
|
||||
- `wa-gap-2xl`
|
||||
- `wa-gap-3xl`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank wa-gap-2xs">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-flank wa-gap-2xl">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
156
docs/docs/layout/frame.md
Normal file
156
docs/docs/layout/frame.md
Normal file
@@ -0,0 +1,156 @@
|
||||
---
|
||||
title: Frame
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
[class*='wa-frame']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-frame'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-frame" style="max-inline-size: 20rem;">
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Frames are well-suited for images and image placeholders.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank" style="--flank-size: 8rem;">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1523593288094-3ccfb6b2c192?q=20" alt=""/>
|
||||
</div>
|
||||
<div class="wa-flank:end" style="--content-percentage: 70%">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3>The Lord of the Rings: The Fellowship of the Ring</h3>
|
||||
<span>J.R.R. Tolkien</span>
|
||||
</div>
|
||||
<wa-icon-button id="options-menu" name="ellipsis"></wa-icon-button>
|
||||
<wa-tooltip for="options-menu">Options</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 25ch;">
|
||||
<wa-card with-image>
|
||||
<div class="wa-frame:landscape" slot="image">
|
||||
<img src="https://images.unsplash.com/photo-1533743983669-94fa5c4338ec?q=20" alt="Grey and white tabby kitten" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-s">White-socks</h3>
|
||||
<span class="wa-body-s">Kitten • Male</span>
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
|
||||
<wa-icon-button id="fav-whitesocks" name="heart" variant="regular"></wa-icon-button>
|
||||
<wa-tooltip for="fav-whitesocks">Favorite</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-header>
|
||||
<div class="wa-frame:landscape" slot="header">
|
||||
<div class="wa-stack wa-align-items-center wa-gap-xs wa-caption-m">
|
||||
<wa-icon name="paw"></wa-icon>
|
||||
<span>Photo coming soon</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-s">Bumpkin</h3>
|
||||
<span class="wa-body-s">Adult • Male</span>
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
|
||||
<wa-icon-button id="fav-bumpkin" name="heart" variant="regular"></wa-icon-button>
|
||||
<wa-tooltip for="fav-bumpkin">Favorite</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image>
|
||||
<div class="wa-frame:landscape" slot="image">
|
||||
<img src="https://images.unsplash.com/photo-1445499348736-29b6cdfc03b9?q=20" alt="Diluted calico kitten" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-s">Swish-tail</h3>
|
||||
<span class="wa-body-s">Kitten • Female</span>
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
|
||||
<wa-icon-button id="fav-swishtail" name="heart" variant="regular"></wa-icon-button>
|
||||
<wa-tooltip for="fav-swishtail">Favorite</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-image>
|
||||
<div class="wa-frame:landscape" slot="image">
|
||||
<img src="https://images.unsplash.com/photo-1517451330947-7809dead78d5?q=20" alt="Short-haired tabby cat" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-s">Sharp-ears</h3>
|
||||
<span class="wa-body-s">Adult • Female</span>
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
|
||||
<wa-icon-button id="fav-sharpears" name="heart" variant="regular"></wa-icon-button>
|
||||
<wa-tooltip for="fav-sharpears">Favorite</wa-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Aspect Ratio
|
||||
|
||||
Frames have a square aspect ratio by default. You can append `:square` (1 / 1), `:landscape` (16 / 9), or `:portrait` (9 / 16) to the `wa-frame` class in your markup to specify an aspect ratio for the frame. Alternatively, you can define the `aspect-ratio` property to set a custom proportion.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-frame:landscape">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-frame:portrait">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-frame" style="aspect-ratio: 4 / 3;">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Border Radius
|
||||
|
||||
Frames have a square border radius by default. You can add any of the following [`wa-border-radius-*`](/docs/style-utilities/border-radius) classes to an element with `wa-frame` to specify the border radius:
|
||||
- `wa-border-radius-xs`
|
||||
- `wa-border-radius-s`
|
||||
- `wa-border-radius-m`
|
||||
- `wa-border-radius-l`
|
||||
- `wa-border-radius-pill`
|
||||
- `wa-border-radius-circle`
|
||||
- `wa-border-radius-square`
|
||||
|
||||
Alternatively, you can define the `border-radius` property to set custom rounding.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-frame wa-border-radius-circle">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: 50% 0%;">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
218
docs/docs/layout/grid.md
Normal file
218
docs/docs/layout/grid.md
Normal file
@@ -0,0 +1,218 @@
|
||||
---
|
||||
title: Grid
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-grid']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-grid'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Grids work especially well for card lists and content designed for browsing.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1520763185298-1b434c919102?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Tulip</h3>
|
||||
<em>Tulipa gesneriana</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1591767134492-338e62f7b5a2?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Peony</h3>
|
||||
<em>Paeonia officinalis</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1590872000386-4348c6393115?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Poppy</h3>
|
||||
<em>Papaver rhoeas</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1516723338795-324c7c33f700?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Sunflower</h3>
|
||||
<em>Helianthus annuus</em>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1563601841845-74a0a8ab7c8a?q=20" alt="" />
|
||||
</div>
|
||||
<h3 class="wa-heading-s">Daisy</h3>
|
||||
<em>Bellis perennis</em>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-icon slot="icon" name="globe"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-caption-s">Population (Zion)</span>
|
||||
<span class="wa-cluster wa-gap-xs">
|
||||
<span class="wa-heading-xl">251,999</span>
|
||||
<wa-badge variant="danger">-3% <wa-icon name="arrow-trend-down"></wa-icon></wa-badge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-icon slot="icon" name="brain-circuit"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-caption-s">Minds Freed</span>
|
||||
<span class="wa-cluster wa-gap-xs">
|
||||
<span class="wa-heading-xl">0.36%</span>
|
||||
<wa-badge variant="success">+0.03% <wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-icon slot="icon" name="robot"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-caption-s">Agents Discovered</span>
|
||||
<span class="wa-cluster wa-gap-xs">
|
||||
<span class="wa-heading-xl">3</span>
|
||||
<wa-badge variant="neutral">±0% <wa-icon name="wave-triangle"></wa-icon></wa-badge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded">
|
||||
<wa-icon slot="icon" name="spaghetti-monster-flying"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<span class="wa-caption-s">Sentinels Controlled</span>
|
||||
<span class="wa-cluster wa-gap-xs">
|
||||
<span class="wa-heading-xl">208</span>
|
||||
<wa-badge variant="success">+1% <wa-icon name="arrow-trend-up"></wa-icon></wa-badge>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
wa-badge > wa-icon {
|
||||
color: color-mix(in oklab, currentColor, transparent 40%);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Sizing
|
||||
|
||||
By default, grid items will wrap when the grid's column size is less than `20ch`, but you can set a custom minimum column size using the `--min-column-size` property.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-grid" style="--min-column-size: 200px;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-grid" style="--min-column-size: 6rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
By default, the gap between grid items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-grid` to specify the gap between items:
|
||||
- `wa-gap-0`
|
||||
- `wa-gap-3xs`
|
||||
- `wa-gap-2xs`
|
||||
- `wa-gap-xs`
|
||||
- `wa-gap-s`
|
||||
- `wa-gap-m`
|
||||
- `wa-gap-l`
|
||||
- `wa-gap-xl`
|
||||
- `wa-gap-2xl`
|
||||
- `wa-gap-3xl`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-grid wa-gap-2xl">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Span Grid
|
||||
|
||||
You can add `wa-span-grid` to any grid item to allow it to span all grid columns. With this, the grid item occupies its own grid row.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="wa-span-grid"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
83
docs/docs/layout/index.md
Normal file
83
docs/docs/layout/index.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Browse Web Awesome's components and utilities for creating responsive web layouts.
|
||||
layout: 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>
|
||||
|
||||
<p style="max-width: 80ch">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.</p>
|
||||
|
||||
<div class="index-grid wa-grid wa-gap-2xl">
|
||||
<h2 class="index-category wa-span-grid">Components</h2>
|
||||
<a href="/docs/components/page">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/thumbnail-placeholder.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Page</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<h2 class="index-category wa-span-grid">Utilities</h2>
|
||||
<a href="/docs/layout/cluster">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/cluster.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Cluster</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/flank">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/flank.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Flank</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/frame">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/frame.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Frame</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/grid.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Grid</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/split">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/split.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Split</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/layout/stack">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/layout/stack.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Stack</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
159
docs/docs/layout/split.md
Normal file
159
docs/docs/layout/split.md
Normal file
@@ -0,0 +1,159 @@
|
||||
---
|
||||
title: Split
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-split']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-split'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-split">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Splits are especially helpful for navigation, header, and footer layouts.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank">
|
||||
<div class="wa-split:column">
|
||||
<div class="wa-stack">
|
||||
<wa-icon-button name="house" label="Home"></wa-icon-button>
|
||||
<wa-icon-button name="calendar" label="Calendar"></wa-icon-button>
|
||||
<wa-icon-button name="envelope" label="Mail"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<wa-divider></wa-divider>
|
||||
<wa-icon-button name="right-from-bracket" label="Sign Out"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.placeholder {
|
||||
min-block-size: 300px;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<wa-icon name="web-awesome" label="Web Awesome" style="font-size: var(--wa-font-size-xl);"></wa-icon>
|
||||
<div class="wa-cluster">
|
||||
<wa-button>Sign Up</wa-button>
|
||||
<wa-button appearance="outlined">Log In</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="placeholder">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.placeholder {
|
||||
min-block-size: 300px;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Direction
|
||||
|
||||
Items can be split across a row or a column by appending `:row` or `:column` to the `wa-split` class.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-flank wa-align-items-start" style="block-size: 16rem;">
|
||||
<div class="wa-split:column">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-split:row">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align Items
|
||||
|
||||
By default, items are centered on the cross axis of the `wa-split` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-split` to specify how items are aligned:
|
||||
- `wa-align-items-start`
|
||||
- `wa-align-items-end`
|
||||
- `wa-align-items-center`
|
||||
- `wa-align-items-stretch`
|
||||
- `wa-align-items-baseline`
|
||||
|
||||
These modifiers specify how items are aligned in the block direction for `wa-split:row` and in the inline direction for `wa-split:column`.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split wa-align-items-start" style="height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-split wa-align-items-end" style="height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-split wa-align-items-center" style="height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-split wa-align-items-stretch" style="height: 8rem;">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
A split's gap determines how close items can be before they wrap. By default, the gap between split items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-split` to specify the gap between items:
|
||||
- `wa-gap-0`
|
||||
- `wa-gap-3xs`
|
||||
- `wa-gap-2xs`
|
||||
- `wa-gap-xs`
|
||||
- `wa-gap-s`
|
||||
- `wa-gap-m`
|
||||
- `wa-gap-l`
|
||||
- `wa-gap-xl`
|
||||
- `wa-gap-2xl`
|
||||
- `wa-gap-3xl`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split wa-gap-3xs">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-split wa-gap-3xl">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
113
docs/docs/layout/stack.md
Normal file
113
docs/docs/layout/stack.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Stack
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
:is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-stack']:has(div:empty) {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
[class*='wa-stack'] div:empty {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Use `wa-stack` to arrange elements in the block direction with even spacing.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
Stacks are well suited for forms, text, and ensuring consistent spacing between elements in the document flow.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-input label="Email">
|
||||
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input label="Password" type="password">
|
||||
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-checkbox>Remember me on this device</wa-checkbox>
|
||||
<wa-button>Log In</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack wa-gap-2xl">
|
||||
<h3>Aragorn's Squash</h3>
|
||||
<p>Altogether unleash weasel mainly well-protected hiding Farthing excuse. Falling pits oil em Hasufel levels weight rides vagabonds? Gamgee hard-won thunder merrier forests treasury. Past birthday lasts lowly there'd woe Woodland pa sun's slaying most handling.</p>
|
||||
<p>Even the smallest person can change the course of the future. They tempted completely other caves cloven wisest draught scrumptious cook Undómiel friends. Dory crunchy huge sleepless. Unmade took nerves liquor defeated Arathorn.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Align Items
|
||||
|
||||
By default, items stretch to fill the inline size of the `wa-stack` container. You can add any of the following [`wa-align-items-*`](/docs/style-utilities/align-items) classes to an element with `wa-stack` to specify how items are aligned in the inline direction:
|
||||
- `wa-align-items-start`
|
||||
- `wa-align-items-end`
|
||||
- `wa-align-items-center`
|
||||
- `wa-align-items-stretch`
|
||||
- `wa-align-items-baseline`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-align-items-start">
|
||||
<div style="min-inline-size: 4rem;"></div>
|
||||
<div style="min-inline-size: 8rem;"></div>
|
||||
<div style="min-inline-size: 6rem;"></div>
|
||||
</div>
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<div style="min-inline-size: 4rem;"></div>
|
||||
<div style="min-inline-size: 8rem;"></div>
|
||||
<div style="min-inline-size: 6rem;"></div>
|
||||
</div>
|
||||
<div class="wa-stack wa-align-items-end">
|
||||
<div style="min-inline-size: 4rem;"></div>
|
||||
<div style="min-inline-size: 8rem;"></div>
|
||||
<div style="min-inline-size: 6rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Gap
|
||||
|
||||
By default, the gap between stack items uses `--wa-space-m` from your theme. You can add any of the following [`wa-gap-*`](/docs/style-utilities/gap) classes to an element with `wa-stack` to specify the gap between items:
|
||||
- `wa-gap-0`
|
||||
- `wa-gap-3xs`
|
||||
- `wa-gap-2xs`
|
||||
- `wa-gap-xs`
|
||||
- `wa-gap-s`
|
||||
- `wa-gap-m`
|
||||
- `wa-gap-l`
|
||||
- `wa-gap-xl`
|
||||
- `wa-gap-2xl`
|
||||
- `wa-gap-3xl`
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xl">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
34
docs/docs/style-utilities/align-items.md
Normal file
34
docs/docs/style-utilities/align-items.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Align Items
|
||||
description: Align items utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
.preview-wrapper {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 3em;
|
||||
padding: var(--wa-space-2xs);
|
||||
}
|
||||
.preview-block {
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
min-block-size: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to align children in container on the container's cross axis.
|
||||
|
||||
| Class Name | `align-items` Value | Preview |
|
||||
| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `wa-align-items-baseline` | `baseline` | <div class="wa-cluster wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-center` | `center` | <div class="wa-cluster wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-end` | `flex-end` | <div class="wa-cluster wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-start` | `flex-start` | <div class="wa-cluster wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-align-items-stretch` | `stretch` | <div class="wa-cluster wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
|
||||
## What's a Cross Axis?
|
||||
|
||||
The cross axis runs perpendicular to a flex container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.
|
||||
27
docs/docs/style-utilities/border-radius.md
Normal file
27
docs/docs/style-utilities/border-radius.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Border Radius
|
||||
description: Border radius utility classes set an element's border radius property.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
.preview-block {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
min-block-size: 2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
|
||||
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
|
||||
|
||||
| Class Name | `border-radius` Value | Preview |
|
||||
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
|
||||
| `wa-border-radius-xs` | `--wa-border-radius-xs` | <div class="preview-block" style="border-radius: var(--wa-border-radius-xs)"></div> |
|
||||
| `wa-border-radius-s` | `--wa-border-radius-s` | <div class="preview-block" style="border-radius: var(--wa-border-radius-s)"></div> |
|
||||
| `wa-border-radius-m` | `--wa-border-radius-m` | <div class="preview-block" style="border-radius: var(--wa-border-radius-m)"></div> |
|
||||
| `wa-border-radius-l` | `--wa-border-radius-l` | <div class="preview-block" style="border-radius: var(--wa-border-radius-l)"></div> |
|
||||
| `wa-border-radius-pill` | `--wa-border-radius-pill` | <div class="preview-block" style="border-radius: var(--wa-border-radius-pill)"></div> |
|
||||
| `wa-border-radius-circle` | `--wa-border-radius-circle` | <div class="preview-block" style="border-radius: var(--wa-border-radius-circle)"></div> |
|
||||
| `wa-border-radius-square` | `--wa-border-radius-square` | <div class="preview-block" style="border-radius: var(--wa-border-radius-square)"></div> |
|
||||
|
||||
32
docs/docs/style-utilities/gap.md
Normal file
32
docs/docs/style-utilities/gap.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Gap
|
||||
description: Gap utility classes set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
.preview-block {
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
min-block-size: 1.5em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
|
||||
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
|
||||
|
||||
| Class Name | `gap` Value | Preview |
|
||||
| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| `wa-gap-0` | `0` | <div class="wa-cluster wa-gap-0"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-3xs` | `--wa-space-3xs` | <div class="wa-cluster wa-gap-3xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-2xs` | `--wa-space-2xs` | <div class="wa-cluster wa-gap-2xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-xs` | `--wa-space-xs` | <div class="wa-cluster wa-gap-xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-s` | `--wa-space-s` | <div class="wa-cluster wa-gap-s"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-m` | `--wa-space-m` | <div class="wa-cluster wa-gap-m"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-l` | `--wa-space-l` | <div class="wa-cluster wa-gap-l"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-xl` | `--wa-space-xl` | <div class="wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-2xl` | `--wa-space-2xl` | <div class="wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
| `wa-gap-3xl` | `--wa-space-3xl` | <div class="wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
|
||||
|
||||
62
docs/docs/style-utilities/text.md
Normal file
62
docs/docs/style-utilities/text.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Text
|
||||
description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
|
||||
|
||||
## Body
|
||||
|
||||
Use body classes to style the main content of your pages. Each `wa-body-*` class specifies the following properties:
|
||||
- `font-family: var(--wa-font-family-body);`
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-normal);`
|
||||
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
|
||||
| `wa-body-xs` | `--wa-font-size-xs` | <div class="wa-body-xs">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `wa-body-s` | `--wa-font-size-s` | <div class="wa-body-s">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `wa-body-m` | `--wa-font-size-m` | <div class="wa-body-m">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `wa-body-l` | `--wa-font-size-l` | <div class="wa-body-l">Sphinx of black quartz, judge my vow.</div> |
|
||||
| `wa-body-xl` | `--wa-font-size-xl` | <div class="wa-body-xl">Sphinx of black quartz, judge my vow.</div> |
|
||||
|
||||
## Headings
|
||||
|
||||
Use heading classes to style section titles and headings in your content. Each `wa-heading-*` class specifies the following properties:
|
||||
- `font-family: var(--wa-font-family-heading);`
|
||||
- `font-weight: var(--wa-font-weight-heading);`
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
- `text-wrap: balance;`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ----------------------------------------------------- |
|
||||
| `wa-heading-xs` | `--wa-font-size-s` | <div class="wa-heading-xs">Five Boxing Wizards</div> |
|
||||
| `wa-heading-s` | `--wa-font-size-m` | <div class="wa-heading-s">Five Boxing Wizards</div> |
|
||||
| `wa-heading-m` | `--wa-font-size-l` | <div class="wa-heading-m">Five Boxing Wizards</div> |
|
||||
| `wa-heading-l` | `--wa-font-size-xl` | <div class="wa-heading-l">Five Boxing Wizards</div> |
|
||||
| `wa-heading-xl` | `--wa-font-size-2xl` | <div class="wa-heading-xl">Five Boxing Wizards</div> |
|
||||
| `wa-heading-2xl` | `--wa-font-size-3xl` | <div class="wa-heading-2xl">Five Boxing Wizards</div> |
|
||||
| `wa-heading-3xl` | `--wa-font-size-4xl` | <div class="wa-heading-3xl">Five Boxing Wizards</div> |
|
||||
|
||||
## Captions
|
||||
|
||||
Use caption classes to style descriptions or auxiliary text in your content. Each `wa-caption-*` class specifies the following properties:
|
||||
- `color: var(--wa-color-text-quiet);`
|
||||
- `font-family: var(--wa-font-family-body);`
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
|
||||
| `wa-caption-xs` | `--wa-font-size-2xs` | <div class="wa-caption-xs">The quick brown fox jumps over the lazy dog.</div> |
|
||||
| `wa-caption-s` | `--wa-font-size-xs` | <div class="wa-caption-s">The quick brown fox jumps over the lazy dog.</div> |
|
||||
| `wa-caption-m` | `--wa-font-size-s` | <div class="wa-caption-m">The quick brown fox jumps over the lazy dog.</div> |
|
||||
| `wa-caption-l` | `--wa-font-size-m` | <div class="wa-caption-l">The quick brown fox jumps over the lazy dog.</div> |
|
||||
| `wa-caption-xl` | `--wa-font-size-l` | <div class="wa-caption-xl">The quick brown fox jumps over the lazy dog.</div> |
|
||||
@@ -8,6 +8,7 @@ export default css`
|
||||
--padding: var(--wa-space-2xs) var(--wa-space-xs);
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
|
||||
/** These styles are added so we dont interfere in the DOM. */
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ body {
|
||||
}
|
||||
|
||||
/* Content flow */
|
||||
address,
|
||||
/* address,
|
||||
audio,
|
||||
blockquote,
|
||||
dd,
|
||||
@@ -69,7 +69,7 @@ table,
|
||||
ul,
|
||||
video {
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Headings & text */
|
||||
h1,
|
||||
|
||||
132
src/themes/layout.css
Normal file
132
src/themes/layout.css
Normal file
@@ -0,0 +1,132 @@
|
||||
:is(
|
||||
[class*='wa-cluster'],
|
||||
[class*='wa-flank'],
|
||||
[class*='wa-frame'],
|
||||
[class*='wa-grid'],
|
||||
[class*='wa-stack'],
|
||||
[class*='wa-split']
|
||||
)
|
||||
> * {
|
||||
margin-block: 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
/* #region Cluster */
|
||||
[class*='wa-cluster'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Flank */
|
||||
[class*='wa-flank'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
|
||||
--content-percentage: initial;
|
||||
--flank-size: initial;
|
||||
}
|
||||
|
||||
[class*='wa-flank']:not([class*='\:end']) > :first-child,
|
||||
[class*='wa-flank'][class*='\:start'] > :first-child {
|
||||
flex-basis: var(--flank-size, auto);
|
||||
flex-grow: 1;
|
||||
}
|
||||
[class*='wa-flank']:not([class*='\:end']) > :last-child,
|
||||
[class*='wa-flank'][class*='\:start'] > :last-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-inline-size: var(--content-percentage, 50%);
|
||||
}
|
||||
|
||||
[class*='wa-flank'][class*='\:end'] > :last-child {
|
||||
flex-basis: var(--flank-size, auto);
|
||||
flex-grow: 1;
|
||||
}
|
||||
[class*='wa-flank'][class*='\:end'] > :first-child {
|
||||
flex-basis: 0;
|
||||
flex-grow: 999;
|
||||
min-inline-size: var(--content-percentage, 50%);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Frame */
|
||||
[class*='wa-frame'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
aspect-ratio: 1 / 1;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
[class*='wa-frame'] > img,
|
||||
[class*='wa-frame'] > video {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
[class*='wa-frame'][class*='\:square'] {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
[class*='wa-frame'][class*='\:landscape'] {
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
[class*='wa-frame'][class*='\:portrait'] {
|
||||
aspect-ratio: 9 / 16;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Grid */
|
||||
[class*='wa-grid'] {
|
||||
display: grid;
|
||||
gap: var(--wa-space-m);
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
|
||||
|
||||
--min-column-size: initial;
|
||||
}
|
||||
|
||||
.wa-span-grid {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Split */
|
||||
[class*='wa-split'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[class*='wa-split'],
|
||||
[class*='wa-split'][class*='\:row'] {
|
||||
flex-direction: row;
|
||||
block-size: auto;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
[class*='wa-split'][class*='\:column'] {
|
||||
flex-direction: column;
|
||||
block-size: auto;
|
||||
inline-size: auto;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
/* #region Stack */
|
||||
[class*='wa-stack'] {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
gap: var(--wa-space-m);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
/* #endregion */
|
||||
179
src/themes/utilities.css
Normal file
179
src/themes/utilities.css
Normal file
@@ -0,0 +1,179 @@
|
||||
/* #region Align Items */
|
||||
.wa-align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.wa-align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.wa-align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.wa-align-items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
.wa-align-items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Border Radius */
|
||||
.wa-border-radius-xs {
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
.wa-border-radius-s {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
.wa-border-radius-m {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
.wa-border-radius-l {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
.wa-border-radius-pill {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
.wa-border-radius-circle {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
.wa-border-radius-square {
|
||||
border-radius: var(--wa-border-radius-square);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Gap */
|
||||
.wa-gap-0 {
|
||||
gap: 0px;
|
||||
}
|
||||
.wa-gap-3xs {
|
||||
gap: var(--wa-space-3xs);
|
||||
}
|
||||
.wa-gap-2xs {
|
||||
gap: var(--wa-space-2xs);
|
||||
}
|
||||
.wa-gap-xs {
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
.wa-gap-s {
|
||||
gap: var(--wa-space-s);
|
||||
}
|
||||
.wa-gap-m {
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
.wa-gap-l {
|
||||
gap: var(--wa-space-l);
|
||||
}
|
||||
.wa-gap-xl {
|
||||
gap: var(--wa-space-xl);
|
||||
}
|
||||
.wa-gap-2xl {
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
.wa-gap-3xl {
|
||||
gap: var(--wa-space-3xl);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Text */
|
||||
.wa-heading-xs,
|
||||
.wa-heading-s,
|
||||
.wa-heading-m,
|
||||
.wa-heading-l,
|
||||
.wa-heading-xl,
|
||||
.wa-heading-2xl,
|
||||
.wa-heading-3xl {
|
||||
font-family: var(--wa-font-family-heading);
|
||||
font-weight: var(--wa-font-weight-heading);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.wa-heading-xs {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-heading-s {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-heading-m {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-heading-l {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-heading-xl {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.wa-heading-2xl {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.wa-heading-3xl {
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.wa-body-xs,
|
||||
.wa-body-s,
|
||||
.wa-body-m,
|
||||
.wa-body-l,
|
||||
.wa-body-xl {
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-body-xs {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-body-s {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-body-m {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-body-l {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.wa-body-xl {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.wa-caption-xs,
|
||||
.wa-caption-s,
|
||||
.wa-caption-m,
|
||||
.wa-caption-l,
|
||||
.wa-caption-xl {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
}
|
||||
|
||||
.wa-caption-xs {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
}
|
||||
|
||||
.wa-caption-s {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.wa-caption-m {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.wa-caption-l {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.wa-caption-xl {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
Reference in New Issue
Block a user