diff --git a/docs/docs.css b/docs/docs.css index d115fa6c..f41dccde 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -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; diff --git a/docs/index.html b/docs/index.html index ada8a688..3c096a31 100644 --- a/docs/index.html +++ b/docs/index.html @@ -33,7 +33,7 @@ 31KB and much smaller when gzipped.
- Just link to shoelace.css
and customize it in your own stylesheet.
+ Just link to shoelace.css
and add customizations to your stylesheet.
<link rel="stylesheet" href="shoelace.css"> @@ -63,7 +63,11 @@ * Documentation *********************************************************************************************--> -Documentation
++ # + Documentation +
+
Shoelace is incredibly easy to use. Just link to shoelace.css
in your project and
- you’re ready to start customizing things.
+ you’re ready to start customizing things. You can use the CDN
+ version or download the source manually.
+
+ The easiest way to use Shoelace is via CDN. +
++COMING SOON! ++
+ This service is generously provided by KeyCDN. +
+ +
+ Alternatively, you can download
+ the source and link to shoelace.css
from your own server.
<link rel="stylesheet" href="dist/shoelace.css"> @@ -106,7 +132,11 @@ npm install --save-dev shoelace-css * Customizing *********************************************************************************************--> --Customizing
++ # + 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 @@ -122,7 +152,7 @@ npm install --save-dev shoelace-css }
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 *********************************************************************************************--> -
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 *********************************************************************************************--> -
Create an alert by applying the alert alert-[modifier]
class to an element such
as a div
.
@@ -337,7 +375,11 @@ PRINT "SHOELACE IS AWESOME"
* Badges
*********************************************************************************************-->
-
Create a badge by applying the badge badge-[state]
class to an element such as a
<span>
.
@@ -377,7 +419,11 @@ PRINT "SHOELACE IS AWESOME"
* Buttons
*********************************************************************************************-->
-
To create a button, use the <button>
element or apply the
button
class to another element such as an <a>
. You can change
@@ -468,7 +514,11 @@ PRINT "SHOELACE IS AWESOME"
* Forms
*********************************************************************************************-->
-
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 *********************************************************************************************--> -
Create a pure CSS loader by applying the loader
class to an empty
<span>
element. You can use the loader-small
and
@@ -852,7 +906,11 @@ PRINT "SHOELACE IS AWESOME"
* Tabs
*********************************************************************************************-->
-
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 *********************************************************************************************--> -
By default, tables are plain and unstyled. To create a styled table, apply the
table
class to a table element.
@@ -1073,7 +1135,11 @@ PRINT "SHOELACE IS AWESOME"
* Utilities
*********************************************************************************************-->
-
Shoelace provides a number of helpful utility classes that make prototyping easier.
@@ -1230,7 +1296,11 @@ Example: class="p-left-medium m-bottom-none" * Grid System *********************************************************************************************--> -
Shoelace doesn’t ship with a grid system because
@@ -1246,7 +1316,11 @@ Example: class="p-left-medium m-bottom-none"
* Icons
*********************************************************************************************-->
-
Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such
as Font Awesome. They work superbly together.
@@ -1259,7 +1333,11 @@ Example: class="p-left-medium m-bottom-none"
* Browser Support
*********************************************************************************************-->
-
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"
Icons
+
+ #
+ Icons
+
+
Browser Support
+
+ #
+ Browser Support
+
+