kopia lustrzana https://github.com/shoelace-style/shoelace
Add bookmark helpers and CDN info
rodzic
5e6182aa21
commit
c007f317d9
|
@ -43,6 +43,18 @@ h2[id] {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a.bookmark {
|
||||||
|
width: 1em;
|
||||||
|
text-align: right;
|
||||||
|
color: var(--color-silver);
|
||||||
|
margin-left: -1em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.bookmark:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Column helpers */
|
/* Column helpers */
|
||||||
.two-column {
|
.two-column {
|
||||||
column-count: 2;
|
column-count: 2;
|
||||||
|
|
117
docs/index.html
117
docs/index.html
|
@ -33,7 +33,7 @@
|
||||||
<span data-placeholder="minifiedSize">31KB</span> and much smaller when gzipped.
|
<span data-placeholder="minifiedSize">31KB</span> and much smaller when gzipped.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
Just link to <code>shoelace.css</code> and customize it in your own stylesheet.
|
Just link to <code>shoelace.css</code> and add customizations to your stylesheet.
|
||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<link rel="stylesheet" href="shoelace.css">
|
<link rel="stylesheet" href="shoelace.css">
|
||||||
|
@ -63,7 +63,11 @@
|
||||||
* Documentation
|
* Documentation
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="documentation">Documentation</h2>
|
<h2 id="documentation">
|
||||||
|
<a class="bookmark" href="#documentation">#</a>
|
||||||
|
Documentation
|
||||||
|
</h2>
|
||||||
|
|
||||||
<ul class="two-column">
|
<ul class="two-column">
|
||||||
<li><a href="#installing">Installing</a></li>
|
<li><a href="#installing">Installing</a></li>
|
||||||
<li><a href="#customizing">Customizing</a></li>
|
<li><a href="#customizing">Customizing</a></li>
|
||||||
|
@ -85,10 +89,32 @@
|
||||||
* Installing
|
* Installing
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="installing">Installing</h2>
|
<h2 id="installing">
|
||||||
|
<a class="bookmark" href="#installing">#</a>
|
||||||
|
Installing
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace is incredibly easy to use. Just link to <code>shoelace.css</code> in your project and
|
Shoelace is incredibly easy to use. Just link to <code>shoelace.css</code> in your project and
|
||||||
you’re ready to <a href="#customizing">start customizing things</a>.
|
you’re ready to <a href="#customizing">start customizing things</a>. You can use the CDN
|
||||||
|
version or download the source manually.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 id="cdn">CDN</h3>
|
||||||
|
<p>
|
||||||
|
The easiest way to use Shoelace is via CDN.
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
COMING SOON!
|
||||||
|
</pre>
|
||||||
|
<p>
|
||||||
|
This service is generously provided by <a href="https://www.keycdn.com/">KeyCDN</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3 id="download">Download</h3>
|
||||||
|
<p>
|
||||||
|
Alternatively, you can <a href="https://github.com/claviska/shoelace-css/releases">download
|
||||||
|
the source</a> and link to <code>shoelace.css</code> from your own server.
|
||||||
</p>
|
</p>
|
||||||
<pre>
|
<pre>
|
||||||
<link rel="stylesheet" href="dist/shoelace.css">
|
<link rel="stylesheet" href="dist/shoelace.css">
|
||||||
|
@ -106,7 +132,11 @@ npm install --save-dev shoelace-css
|
||||||
* Customizing
|
* Customizing
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="customizing">Customizing</h2>
|
<h2 id="customizing">
|
||||||
|
<a class="bookmark" href="#customizing">#</a>
|
||||||
|
Customizing
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
You can customize Shoelace without editing core files or using a preprocessor. To add
|
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
|
customizations, simply override one or more of the variables found in
|
||||||
|
@ -122,7 +152,7 @@ npm install --save-dev shoelace-css
|
||||||
}
|
}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<h4 id="using-variables">Using Variables</h4>
|
<h3 id="using-variables">Using Variables</h3>
|
||||||
<p>
|
<p>
|
||||||
You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse
|
You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse
|
||||||
values without hardcoding them and provides the foundation to extend Shoelace with your own
|
values without hardcoding them and provides the foundation to extend Shoelace with your own
|
||||||
|
@ -147,7 +177,11 @@ npm install --save-dev shoelace-css
|
||||||
* Content
|
* Content
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="content">Content</h2>
|
<h2 id="content">
|
||||||
|
<a class="bookmark" href="#content">#</a>
|
||||||
|
Content
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need
|
Shoelace gives you an easy way to customize most HTML elements with variables. You don’t need
|
||||||
to apply any classes to achieve these styles — just use the appropriate tags.
|
to apply any classes to achieve these styles — just use the appropriate tags.
|
||||||
|
@ -313,7 +347,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Alerts
|
* Alerts
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="alerts">Alerts</h2>
|
<h2 id="alerts">
|
||||||
|
<a class="bookmark" href="#alerts">#</a>
|
||||||
|
Alerts
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Create an alert by applying the <code>alert alert-[modifier]</code> class to an element such
|
Create an alert by applying the <code>alert alert-[modifier]</code> class to an element such
|
||||||
as a <code>div</code>.
|
as a <code>div</code>.
|
||||||
|
@ -337,7 +375,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Badges
|
* Badges
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="badges">Badges</h2>
|
<h2 id="badges">
|
||||||
|
<a class="bookmark" href="#badges">#</a>
|
||||||
|
Badges
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Create a badge by applying the <code>badge badge-[state]</code> class to an element such as a
|
Create a badge by applying the <code>badge badge-[state]</code> class to an element such as a
|
||||||
<code><span></code>.
|
<code><span></code>.
|
||||||
|
@ -377,7 +419,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Buttons
|
* Buttons
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="buttons">Buttons</h2>
|
<h2 id="buttons">
|
||||||
|
<a class="bookmark" href="#buttons">#</a>
|
||||||
|
Buttons
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
To create a button, use the <code><button></code> element or apply the
|
To create a button, use the <code><button></code> element or apply the
|
||||||
<code>button</code> class to another element such as an <code><a></code>. You can change
|
<code>button</code> class to another element such as an <code><a></code>. You can change
|
||||||
|
@ -468,7 +514,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Forms
|
* Forms
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="forms">Forms</h2>
|
<h2 id="forms">
|
||||||
|
<a class="bookmark" href="#forms">#</a>
|
||||||
|
Forms
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special
|
Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special
|
||||||
class for styling.
|
class for styling.
|
||||||
|
@ -814,7 +864,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Loaders
|
* Loaders
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="loaders">Loaders</h2>
|
<h2 id="loaders">
|
||||||
|
<a class="bookmark" href="#loaders">#</a>
|
||||||
|
Loaders
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Create a pure CSS loader by applying the <code>loader</code> class to an empty
|
Create a pure CSS loader by applying the <code>loader</code> class to an empty
|
||||||
<code><span></code> element. You can use the <code>loader-small</code> and
|
<code><span></code> element. You can use the <code>loader-small</code> and
|
||||||
|
@ -852,7 +906,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Tabs
|
* Tabs
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="tabs">Tabs</h2>
|
<h2 id="tabs">
|
||||||
|
<a class="bookmark" href="#tabs">#</a>
|
||||||
|
Tabs
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills
|
Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills
|
||||||
because they look better than traditional tabs when rendered on smaller screens.
|
because they look better than traditional tabs when rendered on smaller screens.
|
||||||
|
@ -997,7 +1055,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Tables
|
* Tables
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="tables">Tables</h2>
|
<h2 id="tables">
|
||||||
|
<a class="bookmark" href="#tables">#</a>
|
||||||
|
Tables
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
By default, tables are plain and unstyled. To create a styled table, apply the
|
By default, tables are plain and unstyled. To create a styled table, apply the
|
||||||
<code>table</code> class to a table element.
|
<code>table</code> class to a table element.
|
||||||
|
@ -1073,7 +1135,11 @@ PRINT "SHOELACE IS AWESOME"
|
||||||
* Utilities
|
* Utilities
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="utilities">Utilities</h2>
|
<h2 id="utilities">
|
||||||
|
<a class="bookmark" href="#utilities">#</a>
|
||||||
|
Utilities
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace provides a number of helpful utility classes that make prototyping easier.
|
Shoelace provides a number of helpful utility classes that make prototyping easier.
|
||||||
</p>
|
</p>
|
||||||
|
@ -1230,7 +1296,11 @@ Example: class="p-left-medium m-bottom-none"
|
||||||
* Grid System
|
* Grid System
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="grid-system">Grid System</h2>
|
<h2 id="grid-system">
|
||||||
|
<a class="bookmark" href="#grid-system">#</a>
|
||||||
|
Grid System
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace doesn’t ship with a grid system because
|
Shoelace doesn’t ship with a grid system because
|
||||||
<a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">
|
<a href="https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/">
|
||||||
|
@ -1246,7 +1316,11 @@ Example: class="p-left-medium m-bottom-none"
|
||||||
* Icons
|
* Icons
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="icons">Icons</h2>
|
<h2 id="icons">
|
||||||
|
<a class="bookmark" href="#icons">#</a>
|
||||||
|
Icons
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such
|
Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such
|
||||||
as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.
|
as <a href="http://fontawesome.io/">Font Awesome</a>. They work superbly together.
|
||||||
|
@ -1259,7 +1333,11 @@ Example: class="p-left-medium m-bottom-none"
|
||||||
* Browser Support
|
* Browser Support
|
||||||
*********************************************************************************************-->
|
*********************************************************************************************-->
|
||||||
|
|
||||||
<h2 id="browser-support">Browser Support</h2>
|
<h2 id="browser-support">
|
||||||
|
<a class="bookmark" href="#browser-support">#</a>
|
||||||
|
Browser Support
|
||||||
|
</h2>
|
||||||
|
|
||||||
<p class="text-bold">
|
<p class="text-bold">
|
||||||
TL;DR — you can use Shoelace as-is if you don’t care about Internet Explorer and older
|
TL;DR — you can use Shoelace as-is if you don’t care about Internet Explorer and older
|
||||||
browsers (Edge is fine). If you need to support older browsers, just make sure to use a
|
browsers (Edge is fine). If you need to support older browsers, just make sure to use a
|
||||||
|
@ -1296,6 +1374,9 @@ Example: class="p-left-medium m-bottom-none"
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
<p class="text-small text-muted">
|
||||||
|
<a href="https://www.keycdn.com/">Accelerated by KeyCDN</a>
|
||||||
|
</p>
|
||||||
<p class="text-small text-muted">
|
<p class="text-small text-muted">
|
||||||
Shoelace <span data-placeholder="version">1.0.0-beta2</span> ·
|
Shoelace <span data-placeholder="version">1.0.0-beta2</span> ·
|
||||||
© A Beautiful Site, LLC
|
© A Beautiful Site, LLC
|
||||||
|
|
Ładowanie…
Reference in New Issue