mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
b96c3f318b
* move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to <wa-page> * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design>
29 lines
1.5 KiB
Plaintext
29 lines
1.5 KiB
Plaintext
---
|
|
title: Patterns
|
|
description: Patterns are reusable UI solutions to common design problems, ready to copy and paste into any project.
|
|
layout: overview
|
|
override:tags: []
|
|
isPro: false
|
|
---
|
|
|
|
<div class="max-line-length">
|
|
{% markdown %}
|
|
|
|
## What's a Pattern?
|
|
|
|
A pattern is a code snippet composed of components, style utilities, and native HTML that you can copy and paste into any project that uses Web Awesome.
|
|
It's a chunk of a user interface, rather than a single component, that allows you to implement UI solutions without designing something from scratch.
|
|
|
|
Patterns are designed according to proven usability practices so they're responsive, accessible, and cohesive out-of-the-box. Importantly, patterns don't handle business logic or functionality like form submissions, data processing, encryption, etc. It's up to you to implement the logic you need for your project.
|
|
|
|
Patterns are written as standard HTML, so you can use them just as you would any ol' HTML and customize them to fit your specific needs.
|
|
|
|
## Using Patterns
|
|
|
|
To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project.
|
|
|
|
Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/utilities/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/) to set up all of these features in your project.
|
|
|
|
{% endmarkdown %}
|
|
</div>
|