mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Add bookmark helpers and CDN info

pull/4/head
Cory LaViska 2017-07-26 17:17:18 -04:00
rodzic 5e6182aa21
commit c007f317d9
2 zmienionych plików z 111 dodań i 18 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

12
docs/docs.css
Wyświetl plik

@ -43,6 +43,18 @@ h2[id] {
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 */
.two-column {
column-count: 2;

117
docs/index.html
Wyświetl plik

@ -33,7 +33,7 @@
<span data-placeholder="minifiedSize">31KB</span> and much smaller when gzipped.
</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>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;shoelace.css&quot;&gt;
@ -63,7 +63,11 @@
* Documentation
*********************************************************************************************-->
<h2 id="documentation">Documentation</h2>
<h2 id="documentation">
<a class="bookmark" href="#documentation">#</a>
Documentation
</h2>
<ul class="two-column">
<li><a href="#installing">Installing</a></li>
<li><a href="#customizing">Customizing</a></li>
@ -85,10 +89,32 @@
* Installing
*********************************************************************************************-->
<h2 id="installing">Installing</h2>
<h2 id="installing">
<a class="bookmark" href="#installing">#</a>
Installing
</h2>
<p>
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>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;dist/shoelace.css&quot;&gt;
@ -106,7 +132,11 @@ npm install --save-dev shoelace-css
* Customizing
*********************************************************************************************-->
<h2 id="customizing">Customizing</h2>
<h2 id="customizing">
<a class="bookmark" href="#customizing">#</a>
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
@ -122,7 +152,7 @@ npm install --save-dev shoelace-css
}
</pre>
<h4 id="using-variables">Using Variables</h4>
<h3 id="using-variables">Using Variables</h3>
<p>
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
@ -147,7 +177,11 @@ npm install --save-dev shoelace-css
* Content
*********************************************************************************************-->
<h2 id="content">Content</h2>
<h2 id="content">
<a class="bookmark" href="#content">#</a>
Content
</h2>
<p>
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.
@ -313,7 +347,11 @@ PRINT "SHOELACE IS AWESOME"
* Alerts
*********************************************************************************************-->
<h2 id="alerts">Alerts</h2>
<h2 id="alerts">
<a class="bookmark" href="#alerts">#</a>
Alerts
</h2>
<p>
Create an alert by applying the <code>alert alert-[modifier]</code> class to an element such
as a <code>div</code>.
@ -337,7 +375,11 @@ PRINT "SHOELACE IS AWESOME"
* Badges
*********************************************************************************************-->
<h2 id="badges">Badges</h2>
<h2 id="badges">
<a class="bookmark" href="#badges">#</a>
Badges
</h2>
<p>
Create a badge by applying the <code>badge badge-[state]</code> class to an element such as a
<code>&lt;span&gt;</code>.
@ -377,7 +419,11 @@ PRINT "SHOELACE IS AWESOME"
* Buttons
*********************************************************************************************-->
<h2 id="buttons">Buttons</h2>
<h2 id="buttons">
<a class="bookmark" href="#buttons">#</a>
Buttons
</h2>
<p>
To create a button, use the <code>&lt;button&gt;</code> element or apply the
<code>button</code> class to another element such as an <code>&lt;a&gt;</code>. You can change
@ -468,7 +514,11 @@ PRINT "SHOELACE IS AWESOME"
* Forms
*********************************************************************************************-->
<h2 id="forms">Forms</h2>
<h2 id="forms">
<a class="bookmark" href="#forms">#</a>
Forms
</h2>
<p>
Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special
class for styling.
@ -814,7 +864,11 @@ PRINT "SHOELACE IS AWESOME"
* Loaders
*********************************************************************************************-->
<h2 id="loaders">Loaders</h2>
<h2 id="loaders">
<a class="bookmark" href="#loaders">#</a>
Loaders
</h2>
<p>
Create a pure CSS loader by applying the <code>loader</code> class to an empty
<code>&lt;span&gt;</code> element. You can use the <code>loader-small</code> and
@ -852,7 +906,11 @@ PRINT "SHOELACE IS AWESOME"
* Tabs
*********************************************************************************************-->
<h2 id="tabs">Tabs</h2>
<h2 id="tabs">
<a class="bookmark" href="#tabs">#</a>
Tabs
</h2>
<p>
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.
@ -997,7 +1055,11 @@ PRINT "SHOELACE IS AWESOME"
* Tables
*********************************************************************************************-->
<h2 id="tables">Tables</h2>
<h2 id="tables">
<a class="bookmark" href="#tables">#</a>
Tables
</h2>
<p>
By default, tables are plain and unstyled. To create a styled table, apply the
<code>table</code> class to a table element.
@ -1073,7 +1135,11 @@ PRINT "SHOELACE IS AWESOME"
* Utilities
*********************************************************************************************-->
<h2 id="utilities">Utilities</h2>
<h2 id="utilities">
<a class="bookmark" href="#utilities">#</a>
Utilities
</h2>
<p>
Shoelace provides a number of helpful utility classes that make prototyping easier.
</p>
@ -1230,7 +1296,11 @@ Example: class="p-left-medium m-bottom-none"
* Grid System
*********************************************************************************************-->
<h2 id="grid-system">Grid System</h2>
<h2 id="grid-system">
<a class="bookmark" href="#grid-system">#</a>
Grid System
</h2>
<p>
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/">
@ -1246,7 +1316,11 @@ Example: class="p-left-medium m-bottom-none"
* Icons
*********************************************************************************************-->
<h2 id="icons">Icons</h2>
<h2 id="icons">
<a class="bookmark" href="#icons">#</a>
Icons
</h2>
<p>
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.
@ -1259,7 +1333,11 @@ Example: class="p-left-medium m-bottom-none"
* 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">
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
@ -1296,6 +1374,9 @@ Example: class="p-left-medium m-bottom-none"
</p>
<footer>
<p class="text-small text-muted">
<a href="https://www.keycdn.com/">Accelerated by KeyCDN</a>
</p>
<p class="text-small text-muted">
Shoelace <span data-placeholder="version">1.0.0-beta2</span> &middot;
&copy; A Beautiful Site, LLC