Compare commits

...

2 Commits

Author SHA1 Message Date
Kelsey Jackson
ed10f36b28 renamed some files 2024-12-18 20:40:35 -06:00
Kelsey Jackson
a13be817db switching to change input label styling 2024-12-18 20:11:41 -06:00
18 changed files with 30 additions and 30 deletions

View File

@@ -50,16 +50,16 @@
</ul>
</wa-details>
<wa-details{{ ' open' if '/essentials/' in page.url }}>
<wa-details{{ ' open' if '/natives/' in page.url }}>
<h2 slot=summary>
<a href="/docs/essentials/" title="Overview">Essentials
<a href="/docs/natives/" title="Overview">Natives
<wa-icon name="grid-2"></wa-icon>
</a>
</h2>
<ul>
{% for page in collections.essentials | sort %}
{% for page in collections.natives | sort %}
<li>
<a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
<a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
</li>
{% endfor %}
</ul>

View File

@@ -23,11 +23,11 @@
<p class="summary">
{{ component.summary | inlineMarkdown | safe }}
</p>
{% if essentials %}
{% if natives %}
<wa-callout variant="success">
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
Just want the styles?
Check out <a href="/docs/essentials/{{ essentials }}/">{{ ('/docs/essentials/' + essentials + '/') | getTitleFromUrl }} essentials</a>!
Check out <a href="/docs/natives/{{ natives }}/">{{ ('/docs/natives/' + natives + '/') | getTitleFromUrl }} natives</a>!
</wa-callout>
{% endif %}
{% endblock %}

View File

@@ -48,7 +48,7 @@
{# Slots #}
{% if css_file %}
<h2>Using these styles</h2>
<p>If you want to use these styles without using the entirety of Web Awesome Essentials, you can include the following CSS files:</p>
<p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>
{% endif %}

View File

@@ -2,7 +2,7 @@
title: Button
description: Buttons represent actions that are available to the user.
tags: component
essentials: button
natives: button
---
```html {.example}

View File

@@ -2,7 +2,7 @@
title: Details
description: Details show a brief summary and expand to show additional content.
tags: component
essentials: details
natives: details
---
<!-- cspell:dictionaries lorem-ipsum -->

View File

@@ -2,7 +2,7 @@
title: Dialog
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
tags: component
essentials: dialog
natives: dialog
---
<!-- cspell:dictionaries lorem-ipsum -->

View File

@@ -2,7 +2,7 @@
title: Input
description: Inputs collect data from the user.
tags: component
essentials: input
natives: input
---
```html {.example}

View File

@@ -2,7 +2,7 @@
title: Select
description: Selects allow you to choose items from a menu of predefined options.
tags: component
essentials: input
natives: input
---
```html {.example}

View File

@@ -2,7 +2,7 @@
title: Textarea
description: Textareas collect data from the user and allow multiple lines of text.
tags: component
essentials: input
natives: input
---
```html {.example}

View File

@@ -1,6 +1,6 @@
---
title: Button
tags: essentials
tags: natives
layout: element
component: button
---

View File

@@ -1,6 +1,6 @@
---
title: Content
tags: essentials
tags: natives
layout: element
---

View File

@@ -1,6 +1,6 @@
---
title: Details
tags: essentials
tags: natives
layout: element
component: details
elements:

View File

@@ -1,7 +1,7 @@
---
title: Dialog
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
tags: essentials
tags: natives
layout: element
elements:
"<dialog>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

View File

@@ -1,5 +1,5 @@
---
title: Essentials
title: Natives
description: TODO
---
@@ -7,7 +7,7 @@ Web Awesome works _with_ the platform, rather than trying to reinvent it.
If all you need is styles, you dont 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:
To use all Web Awesome Natives, include the following stylesheet in your project:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/applied.css' %}" />
@@ -17,19 +17,19 @@ Heres what we have so far:
<!-- TODO make nice cards for these -->
<ul>
{%- for page in collections.essentials | sort -%}
{%- for page in collections.natives | sort -%}
<li>
<a href="/docs/essentials/{{ page.fileSlug }}">{{ page.data.title }}</a>
<a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
</li>
{%- endfor -%}
</ul>
## Opting out of Essentials on a case by case basis
## Opting out of Natives on a case by case basis
So you've decided to use Essentials and now you need to style an element or a part of a page completely differently, what to do?
So you've decided to use Natives and now you need to style an element or a part of a page completely differently, what to do?
You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
Instead of including Essentials with a `<link>` element, you can include it like this:
Instead of including Natives with a `<link>` element, you can include it like this:
```html
<style>
@@ -45,7 +45,7 @@ Instead of including Essentials with a `<link>` element, you can include it like
</style>
```
Then you can opt-out of Essentials styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
Then you can opt-out of Natives styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees:
```html
<p>
@@ -79,5 +79,5 @@ E.g. to opt-out of `<details>` styling:
}
```
If you find yourself opting out of entire element types too much, you could consider only including the parts of Essentials you need instead of the whole thing.
You can find instructions for how to do that on the individual Essentials pages.
If you find yourself opting out of entire element types too much, you could consider only including the parts of Natives you need instead of the whole thing.
You can find instructions for how to do that on the individual Natives pages.

View File

@@ -1,6 +1,6 @@
---
title: Form Inputs
tags: essentials
tags: natives
layout: element
component:
- input

View File

@@ -1,6 +1,6 @@
---
title: Lists
tags: essentials
tags: natives
layout: element
elements:
"<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

View File

@@ -1,6 +1,6 @@
---
title: Table
tags: essentials
tags: natives
layout: element
elements:
"<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table