mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
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/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/installation) to set up all of these features in your project.
|
|
|
|
{% endmarkdown %}
|
|
</div>
|