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

Updated docs.

Browse Source
This commit is contained in:
Jeremy Wagner
2017-07-31 10:23:23 -05:00
parent 1565a43c24
commit 9e2d1a5fb4
1 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@@ -31,7 +31,7 @@
<p>
Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any
preprocessing at all. The minified version is only
<span data-minifiedSize>29KB</span> and much smaller when gzipped.
<span data-minifiedSize>29.8KB</span> and much smaller when gzipped.
</p>
<p>
Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
@@ -112,6 +112,27 @@
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta4</span>/shoelace.css&quot;&gt;
</pre>
<p>
If you decide to use a CDN, consider speeding up performance by at least adding a <code>preconnect</code> resource hint to give the browser a head start on connecting to the CDN server. You can do this by adding a <code>&lt;link&gt;</code> HTML element in the head like so:
</p>
<pre>
&lt;link rel=&quot;preconnect&quot; href=&quot;https://cdn.shoelace.style&quot; crossorigin&gt;
</pre>
<p>
Though if you really want to supercharge loading of Shoelace from a CDN, consider using a <code>preload</code> <a href="https://www.w3.org/TR/resource-hints/" rel="noopener">resource hint</a> instead:
</p>
<pre>
&lt;link rel=&quot;preload&quot; as=&quot;style&quot; href=&quot;https://cdn.shoelace.style/<span data-version>1.0.0-beta4</span>/shoelace.css&quot; crossorigin&gt;
</pre>
<p>
These can also be expressed in HTTP headers, which may be slightly more performant since the hint will be discovered earlier in the HTTP response:
</p>
<pre>
Link: &lt;https://cdn.shoelace.style/<span data-version>1.0.0-beta4</span>/shoelace.css&gt;; rel=preload; as=style; crossorigin
</pre>
<p>
Whether it's <code>preconnect</code> or <code>preload</code>, just make sure you pick <em>one</em>, because you don't need both.
</p>
<p class="text-right">
<a href="https://www.keycdn.com/">
<img src="https://logos.keycdn.com/keycdn-logo.svg" alt="KeyCDN logo" class="width-20">