diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk index 0525f8380..88d38b1f4 100644 --- a/packages/webawesome/docs/docs/color-palettes.njk +++ b/packages/webawesome/docs/docs/color-palettes.njk @@ -71,42 +71,63 @@ layout: page {% for palette in themer.palettes %}
- Projects + CDN npm - Self-Hosted + Self-Hosted - - -

- In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ palette.name | capitalize }} as your Color Palette. -

- -

- In your project's Settings, set your Color Palette to {{ palette.name | capitalize }}. -

-

Save your palette and watch it come to life anywhere you're using your project.

+ +{% markdown %} +{% if palette.isPro %} + + + This palette can only be used on teams with a Pro subscription. + +
+{% else %} +**For projects on Free teams:** +1. Head over to your project's **Settings**. +2. Find **Color Palette**. Select **{{ palette.name | capitalize }}**. +3. Save your theme to immediately update anywhere you're using your project. +{% endif %} + +**For projects on Pro teams:** +1. Head over to your project's **Settings**. +2. Press **Edit Your Theme** to open the Theme Builder. +3. Open **Colors** and select **{{ palette.name | capitalize }}**. +4. Save your theme to immediately update anywhere you're using your project. +{% endmarkdown %} -

- To use this theme, import the theme's stylesheet: -

- 
import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}';
-

- Then apply the following class to the <html> element: -

- 
<html class="wa-palette-{{ palette.name | lower }}">
+{% markdown %} +To use this theme, import the theme's stylesheet: + +```js +import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}'; +``` + +Then apply the following class to the `` element: + +```html + +``` +{% endmarkdown %} -

- To use this theme, import the theme's stylesheet: -

- 
<link rel="stylesheet" href="/dist/styles/themes/{{ palette.filename }}" />
-

- Then apply the following class to the <html> element: -

- 
<html class="wa-palette-{{ palette.name | lower }}">
+{% markdown %} +To use this theme, include the theme's stylesheet: + +```html + +``` + +Then apply the following class to the `` element: + +```html + +``` +{% endmarkdown %}
diff --git a/packages/webawesome/docs/docs/layout.njk b/packages/webawesome/docs/docs/layout.njk index d24e66be5..a5c9ff9a0 100644 --- a/packages/webawesome/docs/docs/layout.njk +++ b/packages/webawesome/docs/docs/layout.njk @@ -43,22 +43,56 @@ layout: docs -
{% markdown %} -## Installation +## Using Layout Utilities -Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/#cherry-picking). +Layout utility classes are bundled with Web Awesome's [style utilities](/docs/utilities). By including style utilities in your project, you'll have access to layout utilities like `.wa-grid` and `.wa-stack`. +{% endmarkdown %} -Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/utilities/native/)) by including the following stylesheet in your project: + + CDN + npm + Self-Hosted + + +{% markdown %} +1. Head over to your project's **Settings**. +2. Next to **Features**, select the **CSS utilities** checkbox. +3. **Save Changes** to immediately update anywhere you're using your project. +{% endmarkdown %} + + + +{% markdown %} +To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project: + +```js +import '@awesome.me/webawesome/dist/styles/webawesome.css'; +``` + +Or, if you only want CSS utility classes, import a theme and the utilities individually: + +```js +import '@awesome.me/webawesome/dist/styles/themes/default.css'; +import '@awesome.me/webawesome/dist/styles/utilities.css'; +``` +{% endmarkdown %} + + + +{% markdown %} +To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project: ```html ``` -Or, you can choose to import _only_ the utilities: +Or, if you only want CSS utility classes, include a theme and the utilities individually: ```html + ``` {% endmarkdown %} -
+ + diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk index 289e2104c..a23368385 100644 --- a/packages/webawesome/docs/docs/themes.njk +++ b/packages/webawesome/docs/docs/themes.njk @@ -91,42 +91,62 @@ to create a project with any one of these themes. {% for theme in themer.themes %}
- Projects + CDN npm - Self-Hosted + Self-Hosted - - -

- In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ theme.filename | stripExtension | capitalize }} as your Starting Theme. -

- -

- In your project's Settings, set your Theme to {{ theme.filename | stripExtension | capitalize }} and your Color Palette to {{ theme.palette.filename | stripExtension | capitalize }}. -

-

Save your theme and watch it come to life anywhere you're using your project.

+ +{% markdown %} +{% if theme.isPro %} + + + This theme can only be used on teams with a Pro subscription. + +
+{% else %} +**For projects on Free teams:** +1. Head over to your project's **Settings**. +2. For your **Theme**, select **{{ theme.filename | stripExtension | capitalize }}**. +3. For your **Color Palette**, select **{{ theme.palette.filename | stripExtension | capitalize }}**. +4. Press **Save Changes** to immediately update anywhere you're using your project. +{% endif %} + +**For projects on Pro teams:** +1. Head over to your project's **Settings**. +2. Press **Edit Your Theme** to open the Theme Builder. +3. Open **Theme** and select **{{ theme.filename | stripExtension | capitalize }}**. +4. Press **Save Theme** to immediately update anywhere you're using your project. +{% endmarkdown %} -

- To use this theme, import the theme's stylesheet: -

- 
import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';
-

- Then apply the following classes to the <html> element: -

- 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
+{% markdown %} +To use this theme, import the theme's stylesheet: +```js +import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}'; +``` + +Then apply the following classes to the `` element: + +```html + +``` +{% endmarkdown %} -

- To use this theme, import the theme's stylesheet: -

- 
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" />
-

- Then apply the following classes to the <html> element: -

- 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
+{% markdown %} +To use this theme, include the theme's stylesheet: +```html + +``` + +Then apply the following classes to the `` element: + +```html + +``` +{% endmarkdown %}
diff --git a/packages/webawesome/docs/docs/utilities/index.njk b/packages/webawesome/docs/docs/utilities/index.njk index abbc7aa26..95a9c778c 100644 --- a/packages/webawesome/docs/docs/utilities/index.njk +++ b/packages/webawesome/docs/docs/utilities/index.njk @@ -45,22 +45,54 @@ layout: docs -
{% markdown %} -## Installation +## Using {{ title }} +{% endmarkdown %} -To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project: + + CDN + npm + Self-Hosted + + +{% markdown %} +1. Head over to your project's **Settings**. +2. Next to **Features**, select the **CSS utilities** checkbox. +3. **Save Changes** to immediately update anywhere you're using your project. +{% endmarkdown %} + + + +{% markdown %} +To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project: + +```js +import '@awesome.me/webawesome/dist/styles/webawesome.css'; +``` + +Or, if you only want CSS utility classes, import a theme and the utilities individually: + +```js +import '@awesome.me/webawesome/dist/styles/themes/default.css'; +import '@awesome.me/webawesome/dist/styles/utilities.css'; +``` +{% endmarkdown %} + + + +{% markdown %} +To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project: ```html ``` -Or, to _only_ include utilities: +Or, if you only want CSS utility classes, include a theme and the utilities individually: ```html + ``` - {% endmarkdown %} - -
+ + diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md index 4f80edcac..7252ea9ff 100644 --- a/packages/webawesome/docs/docs/utilities/native.md +++ b/packages/webawesome/docs/docs/utilities/native.md @@ -9,18 +9,53 @@ Native styles use design tokens to spruce up native HTML elements so that they m ## Using native styles + + CDN + npm + Self-Hosted + + +{% markdown %} +1. Head over to your project's **Settings**. +2. Next to **Features**, select the **Native styles** checkbox. +3. **Save Changes** to immediately update anywhere you're using your project. +{% endmarkdown %} + + + +{% markdown %} +To use all Web Awesome styles (including [utilities](/docs/utilities/)), import the following stylesheet in your project: + +```js +import '@awesome.me/webawesome/dist/styles/webawesome.css'; +``` + +Or, if you only want styles for native elements, import a theme and native styles individually: + +```js +import '@awesome.me/webawesome/dist/styles/themes/default.css'; +import '@awesome.me/webawesome/dist/styles/native.css'; +``` +{% endmarkdown %} + + + +{% markdown %} To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: ```html ``` -Or, if you only want styles for native elements, include the default theme and native styles individually: +Or, if you only want styles for native elements, include a theme and native styles individually: ```html ``` +{% endmarkdown %} + + You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements.