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

add outlines to Getting Started and Theming docs

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-18 17:28:36 -04:00
parent ba893cadc9
commit ab91ab1a89
13 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/customizing.md
View File

@@ -1,7 +1,7 @@
---
title: Customizing
description: Learn how to customize Web Awesome through parts and custom properties.
layout: page
layout: page-outline
---
Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.

2
docs/docs/installation.md
View File

@@ -1,7 +1,7 @@
---
title: Installation
description: Choose the installation method that works best for you.
layout: page
layout: page-outline
---
Welcome to the Web Awesome alpha release for early backers! 👋

2
docs/docs/localization.md
View File

@@ -1,7 +1,7 @@
---
title: Localization
description: Discover how to localize Web Awesome with minimal effort.
layout: page
layout: page-outline
---
Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `<html>` element. Here's an example that renders Web Awesome components in Spanish.

2
docs/docs/themes.md
View File

@@ -1,7 +1,7 @@
---
title: Themes
description: Everything you need to know about theming Web Awesome.
layout: page
layout: page-outline
---
Web Awesome is designed to be highly customizable through pure CSS. Out of the box, the default theme includes both light and dark styles. Alternatively, you can design your own theme.

2
docs/docs/theming/borders.md
View File

@@ -1,7 +1,7 @@
---
title: Borders
description: Change the edges and corners of your components with Web Awesome's border properties.
layout: page
layout: page-outline
---
## Style

2
docs/docs/theming/color.md
View File

@@ -1,7 +1,7 @@
---
title: Color
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
layout: page
layout: page-outline
---
<style>

2
docs/docs/theming/component-groups.md
View File

@@ -1,7 +1,7 @@
---
title: Component Groups
description: Style groups of components that share similar qualities with these Web Awesome custom properties.
layout: page
layout: page-outline
---
For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.

2
docs/docs/theming/focus.md
View File

@@ -1,7 +1,7 @@
---
title: Focus
description: Configure recognizable focus states with Web Awesome's focus properties.
layout: page
layout: page-outline
---
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.

2
docs/docs/theming/shadows.md
View File

@@ -1,7 +1,7 @@
---
title: Shadows
description: Elevate your components with Web Awesome's shadow properties.
layout: page
layout: page-outline
---
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.

2
docs/docs/theming/space.md
View File

@@ -1,7 +1,7 @@
---
title: Space
description: Lock down consistent spacing Web Awesome's space properties.
layout: page
layout: page-outline
---
<style>

2
docs/docs/theming/transitions.md
View File

@@ -1,7 +1,7 @@
---
title: Transitions
description: Customize your theme's built-in transitions with Web Awesome's transition properties.
layout: page
layout: page-outline
---
<style>

2
docs/docs/theming/typography.md
View File

@@ -1,7 +1,7 @@
---
title: Typography
description: Get consistent font styles and vertical rhythm with Web Awesome's typography properties.
layout: page
layout: page-outline
---
## Font Family

2
docs/docs/usage.md
View File

@@ -1,7 +1,7 @@
---
title: Usage
description: Learn more about using custom elements.
layout: page
layout: page-outline
---
Web Awesome components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.