js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix links to variables.css

Browse Source
This commit is contained in:
Cory LaViska
2017-08-09 09:59:20 -04:00
parent b3828bd8ba
commit 4bcd4024aa
2 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/customizing.html
View File

@@ -47,7 +47,7 @@
<div id="content">
<h2 id="customizing">Customizing</h2>
<p>You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in <a href="source/css/variables.css"><code>variables.css</code></a> in your own stylesheet.</p>
<p>You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in <a href="../source/css/variables.css"><code>variables.css</code></a> in your own stylesheet.</p>
<p>For example, you can customize the default text color and background like this:</p>
<pre><code class="lang-css">:root {
--body-color: white;
@@ -60,11 +60,11 @@
color: var(--state-danger);
}
</code></pre>
<p>Refer to <a href="source/css/variables.css"><code>variables.css</code></a> for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed. There’s also an <a href="https://codepen.io/claviska/pen/NvGVYM?editors=1100">interactive demo</a> if you want to experiment.</p>
<p>Refer to <a href="../source/css/variables.css"><code>variables.css</code></a> for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">this article</a> will bring you up to speed. There’s also an <a href="https://codepen.io/claviska/pen/NvGVYM?editors=1100">interactive demo</a> if you want to experiment.</p>
<h3 id="custom-components">Custom Components</h3>
<p>You can create custom components to extend Shoelace’s functionality. Here are some best practices to keep things consistent and easy for others to understand.</p>
<p><strong>Familiarize yourself with Shoelace’s naming conventions.</strong> A custom accordion component, for example, would have a class name such as <code>accordion</code>, modifier classes such as <code>accordion-open</code>, and variable names that look like <code>--accordion-bg-color</code>. Try to follow similar patterns as much as possible.</p>
<p><strong>Define new variables when it makes sense to.</strong> Take a look at <a href="source/css/variables.css"><code>variables.css</code></a> to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.</p>
<p><strong>Define new variables when it makes sense to.</strong> Take a look at <a href="../source/css/variables.css"><code>variables.css</code></a> to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.</p>
<p><strong>Semantic markup is strongly encouraged.</strong> Custom components should use the most appropriate elements and the minimal amount of markup required.</p>
<p><strong>Keep everything together.</strong> During development, each component should be in its own folder along with its stylesheets, scripts, and documentation. Components shouldn’t depend on other components’ styles or scripts. This makes it easier to add or remove components from your app without affecting others. Of course, it’s perfectly fine to bundle components for optimization purposes in production.</p>

6
source/docs/customizing.md
View File

@@ -6,7 +6,7 @@ description: Learn how to customize Shoelace.css with CSS variables.
## Customizing
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in [`variables.css`](source/css/variables.css) in your own stylesheet.
You can customize Shoelace without editing core files or using a preprocessor. To add customizations, simply override one or more of the variables found in [`variables.css`](../source/css/variables.css) in your own stylesheet.
For example, you can customize the default text color and background like this:
@@ -27,7 +27,7 @@ You can use any of Shoelace’s variables in your stylesheet. This makes it easy
}
```
Refer to [`variables.css`](source/css/variables.css) for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment.
Refer to [`variables.css`](../source/css/variables.css) for a complete list of variables in Shoelace. If you’re not familiar with CSS variables, [this article](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) will bring you up to speed. There’s also an [interactive demo](https://codepen.io/claviska/pen/NvGVYM?editors=1100) if you want to experiment.
### Custom Components
@@ -35,7 +35,7 @@ You can create custom components to extend Shoelace’s functionality. Here are
**Familiarize yourself with Shoelace’s naming conventions.** A custom accordion component, for example, would have a class name such as `accordion`, modifier classes such as `accordion-open`, and variable names that look like `--accordion-bg-color`. Try to follow similar patterns as much as possible.
**Define new variables when it makes sense to.** Take a look at [`variables.css`](source/css/variables.css) to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.
**Define new variables when it makes sense to.** Take a look at [`variables.css`](../source/css/variables.css) to see how existing components are defined. Many use core variables instead of hardcoded properties as default values. This makes it easy for users to customize things quickly, but still provides enough flexibility to style individual components.
**Semantic markup is strongly encouraged.** Custom components should use the most appropriate elements and the minimal amount of markup required.