mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Rename applied.css to docs and add some docs on usage
This commit is contained in:
Lea Verou
@@ -23,7 +23,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ document.addEventListener('click', event => {
|
||||
const html =
|
||||
`<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/applied.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
|
||||
@@ -8,13 +8,21 @@ 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 Native Styles, include the following stylesheet in your project:
|
||||
## Usage
|
||||
|
||||
To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/applied.css' %}" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Here’s what we have so far:
|
||||
Or, to _only_ include styles for built-in elements:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
|
||||
```
|
||||
|
||||
## Elements
|
||||
|
||||
<div id="component-grid" class="index-grid">
|
||||
<!-- <h2 class="index-category">Actions</h2> -->
|
||||
@@ -35,7 +43,7 @@ Instead of including Native Styles with a `<link>` element, you can include it l
|
||||
|
||||
```html
|
||||
<style>
|
||||
@import url('{% cdnUrl 'styles/applied.css' %}') layer(wa);
|
||||
@import url('{% cdnUrl 'styles/webawesome.css' %}') layer(wa);
|
||||
|
||||
@layer wa {
|
||||
.wa-off,
|
||||
|
||||
@@ -5,8 +5,24 @@ description: Web Awesome provides a few style utilities to customize styles in w
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
You can also include individual utilities following the instructions in their pages.
|
||||
|
||||
<div id="component-grid" class="index-grid">
|
||||
<h2 class="index-category">Layout</h2>
|
||||
<h2 class="index-category">Layout Utilities</h2>
|
||||
|
||||
{%- for page in collections.utilities | sort -%}
|
||||
{%- if page.fileSlug != 'native' and 'layout' in page.data.tags -%}
|
||||
@@ -16,7 +32,7 @@ layout: page-outline
|
||||
</div>
|
||||
|
||||
<div id="component-grid" class="index-grid">
|
||||
<h2 class="index-category">Other</h2>
|
||||
<h2 class="index-category">Other Utilities</h2>
|
||||
|
||||
{%- for page in collections.utilities | sort -%}
|
||||
{%- if page.fileSlug != 'native' and not ('layout' in page.data.tags) -%}
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
/* Native styles */
|
||||
@import url('native/content.css');
|
||||
@import url('native/code.css');
|
||||
@import url('native/forms.css');
|
||||
@import url('native/button.css');
|
||||
@import url('native/checkbox.css');
|
||||
@import url('native/color-picker.css');
|
||||
@import url('native/input.css');
|
||||
@import url('native/details.css');
|
||||
@import url('native/tables.css');
|
||||
@import url('native/blockquote.css');
|
||||
@import url('native/dialog.css');
|
||||
@import url('native/progress.css');
|
||||
@import url('native/radio.css');
|
||||
@import url('native/select.css');
|
||||
@import url('native/slider.css');
|
||||
|
||||
/* Web Awesome components */
|
||||
@import url('components/page.css');
|
||||
|
||||
/* CSS Utilities */
|
||||
@import url('utilities.css');
|
||||
|
||||
/**
|
||||
* Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on
|
||||
* Web Awesome's design tokens.
|
||||
*/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-size: var(--wa-font-size-m);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
text-size-adjust: none;
|
||||
color: var(--wa-color-text-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
@keyframes wa-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show custom elements only after they're registered */
|
||||
:where(:not(:defined, [did-ssr])) {
|
||||
/*
|
||||
* if an element gets defined earlier than 800ms, the animation stops applying so it just appears (no fade)
|
||||
* If it takes somewhere between 800 and 1000 ms, then you may get an interrupted fade
|
||||
* If an element takes longer than 1000ms to get defined, it fades in over 200ms
|
||||
*/
|
||||
animation: 200ms 800ms wa-fade-in both;
|
||||
}
|
||||
|
||||
/* Content flow */
|
||||
address,
|
||||
audio,
|
||||
blockquote,
|
||||
dd,
|
||||
details,
|
||||
dl,
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
iframe,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul,
|
||||
video,
|
||||
wa-callout,
|
||||
wa-code-demo,
|
||||
wa-viewport-demo {
|
||||
&:has(+ *) {
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
}
|
||||
}
|
||||
17
src/styles/native.css
Normal file
17
src/styles/native.css
Normal file
@@ -0,0 +1,17 @@
|
||||
/* Web Awesome Native styles */
|
||||
@import url('native/base.css');
|
||||
@import url('native/content.css');
|
||||
@import url('native/code.css');
|
||||
@import url('native/forms.css');
|
||||
@import url('native/button.css');
|
||||
@import url('native/checkbox.css');
|
||||
@import url('native/color-picker.css');
|
||||
@import url('native/input.css');
|
||||
@import url('native/details.css');
|
||||
@import url('native/tables.css');
|
||||
@import url('native/blockquote.css');
|
||||
@import url('native/dialog.css');
|
||||
@import url('native/progress.css');
|
||||
@import url('native/radio.css');
|
||||
@import url('native/select.css');
|
||||
@import url('native/slider.css');
|
||||
75
src/styles/native/base.css
Normal file
75
src/styles/native/base.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* Baseline styles for the root elements or multiple native elements at once */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-size: var(--wa-font-size-m);
|
||||
font-weight: var(--wa-font-weight-body);
|
||||
line-height: var(--wa-line-height-normal);
|
||||
text-size-adjust: none;
|
||||
color: var(--wa-color-text-normal);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-text-size-adjust: none;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
@keyframes wa-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show custom elements only after they're registered */
|
||||
:where(:not(:defined, [did-ssr])) {
|
||||
/*
|
||||
* if an element gets defined earlier than 800ms, the animation stops applying so it just appears (no fade)
|
||||
* If it takes somewhere between 800 and 1000 ms, then you may get an interrupted fade
|
||||
* If an element takes longer than 1000ms to get defined, it fades in over 200ms
|
||||
*/
|
||||
animation: 200ms 800ms wa-fade-in both;
|
||||
}
|
||||
|
||||
/* Content flow */
|
||||
address,
|
||||
audio,
|
||||
blockquote,
|
||||
dd,
|
||||
details,
|
||||
dl,
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
iframe,
|
||||
ol,
|
||||
p,
|
||||
pre,
|
||||
table,
|
||||
ul,
|
||||
video,
|
||||
wa-callout,
|
||||
wa-code-demo,
|
||||
wa-viewport-demo {
|
||||
&:has(+ *) {
|
||||
margin: 0 0 var(--wa-space-xl) 0;
|
||||
}
|
||||
}
|
||||
9
src/styles/webawesome.css
Normal file
9
src/styles/webawesome.css
Normal file
@@ -0,0 +1,9 @@
|
||||
/* Native styles */
|
||||
@import url('native/base.css'); /* for speed */
|
||||
@import url('native.css');
|
||||
|
||||
/* Web Awesome components */
|
||||
@import url('components/page.css');
|
||||
|
||||
/* CSS Utilities */
|
||||
@import url('utilities.css');
|
||||
Reference in New Issue
Block a user