Skip to content

Basic mixing and matching docs #560

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 16, 2025
Merged

Basic mixing and matching docs #560

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ebf3bc
Basic mixing and matching docs
LeaVerou Jan 16, 2025
e312d08
Make warning more prominent
LeaVerou Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/_includes/import-stylesheet-code.md.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<wa-tab-group>
<wa-tab panel="html">In HTML</wa-tab>
<wa-tab panel="css">In CSS</wa-tab>
<wa-tab-panel name="html">

Simply add the following code to the `<head>` of your page:
```html
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
```
</wa-tab-panel>
<wa-tab-panel name="css">

Simply add the following code at the top of your CSS file:
```css
@import url('{% cdnUrl stylesheet %}');
```
</wa-tab-panel>
</wa-tab-group>
20 changes: 2 additions & 18 deletions docs/_layouts/palette.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,24 +112,8 @@ This also goes for a difference of `65`:
If you are using a Web Awesome theme that uses this palette, it will already be included.
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.

<wa-tab-group>
<wa-tab panel="html">In HTML</wa-tab>
<wa-tab panel="css">In CSS</wa-tab>
<wa-tab-panel name="html">

Simply add the following code to the `<head>` of your page:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}" />
```
</wa-tab-panel>
<wa-tab-panel name="css">

Simply add the following code at the top of your CSS file:
```css
@import url('{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}');
```
</wa-tab-panel>
</wa-tab-group>
{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
{% include 'import-stylesheet-code.md.njk' %}

{% endmarkdown %}
{% endblock %}
33 changes: 17 additions & 16 deletions docs/_layouts/theme.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,25 @@

You can import this theme from the Web Awesome CDN.

<wa-tab-group>
<wa-tab panel="html">In HTML</wa-tab>
<wa-tab panel="css">In CSS</wa-tab>
<wa-tab-panel name="html">
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
{% include 'import-stylesheet-code.md.njk' %}

Simply add the following code to the `<head>` of your page:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
```
</wa-tab-panel>
<wa-tab-panel name="css">
### Mixing & Matching

Simply add the following code at the top of your CSS file:
```css
@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
```
</wa-tab-panel>
</wa-tab-group>
If you want to combine the colors from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:

{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
{% include 'import-stylesheet-code.md.njk' %}

To use the typography from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:

{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
{% include 'import-stylesheet-code.md.njk' %}

<wa-callout variant="warning">
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
</wa-callout>

## Dark mode

Expand Down
Loading