js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Essentials] Write index page

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 15:53:33 -05:00
parent 312809a766
commit 1d02644996
1 changed files with 53 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/docs/essentials/index.md
View File

@@ -3,13 +3,60 @@ title: Essentials
description: TODO
---
The styles shown below can be all yours by adding Web Awesome's applied stylesheet to your project.
---
Web Awesome works _with_ the platform, rather than trying to reinvent it.
If all you need is styles, you don’t need to use new `<wa-*>` elements!
We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
To use all Web Awesome Essentials, include the following stylesheet in your project:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/applied.css' %}" />
```
Here’s what we have so far:
<!-- TODO make nice cards for these -->
<ul>
{%- for page in collections.essentials | sort -%}
<li>
<a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
</li>
{%- endfor -%}
</ul>
## Opting out of Essentials
If you don’t want to use all essentials, you can cherry pick just the parts you need.
For instructions on how to do that, refer to the individual pages.
You can also opt-out of Essentials styling by using a `wa-off` class on individual elements:
```html {.example}
<p>
<button>I’m Awesome</button>
<button class="wa-off">I’m not</button>
</p>
<blockquote>
<p>Lorem Ipsum dolor sit amet</p>
<button>I’m also awesome</button>
</blockquote>
<blockquote class="wa-off">
<p>Lorem Ipsum dolor sit amet</p>
<button >I’m also not</button>
</blockquote>
```
You can also use `wa-off-deep` to opt-out of Essentials styling for an element **and all its descendants**:
```html {.example}
<blockquote class="wa-off-deep">
<p>Lorem Ipsum dolor sit amet</p>
<button>I’m also not</button>
</blockquote>
```
This means you could opt an entire page out of Essentials styling by adding a `wa-off-deep` class to the `<html>` element.