mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
Split website up
This commit is contained in:
Cory LaViska
73
build.js
73
build.js
@@ -9,11 +9,16 @@ const Chalk = require('chalk');
|
||||
const CSSnano = require('cssnano');
|
||||
const Del = require('del');
|
||||
const FS = require('fs');
|
||||
const Layouts = require('metalsmith-layouts');
|
||||
const Markdown = require('metalsmith-markdown');
|
||||
const Metalsmith = require('metalsmith');
|
||||
const Path = require('path');
|
||||
const PostCSS = require('postcss');
|
||||
const Program = require('commander');
|
||||
const UglifyJS = require('uglify-js');
|
||||
|
||||
let stats;
|
||||
|
||||
// Initialize CLI
|
||||
Program
|
||||
.version(__version)
|
||||
@@ -69,12 +74,12 @@ if(Program.build) {
|
||||
let shoelaceCSS = Path.join(__dirname, 'dist/shoelace.css');
|
||||
|
||||
// Remember stats
|
||||
let stats = {
|
||||
stats = {
|
||||
originalSize: (output.stats.originalSize / 1024).toFixed(1) + 'KB',
|
||||
minifiedSize: (output.stats.minifiedSize / 1024).toFixed(1) + 'KB'
|
||||
};
|
||||
|
||||
// Update placeholders in CSS
|
||||
// Update {placeholders} in CSS
|
||||
output.styles = output.styles
|
||||
.replace(/\{version\}/g, __version)
|
||||
.replace(/\{originalSize\}/, stats.originalSize)
|
||||
@@ -88,29 +93,6 @@ if(Program.build) {
|
||||
}
|
||||
console.log(Chalk.green('CSS Minified: %s! 💪'), Path.relative(__dirname, shoelaceCSS));
|
||||
|
||||
resolve(stats);
|
||||
});
|
||||
}))
|
||||
|
||||
// Update docs
|
||||
.then((stats) => new Promise((resolve, reject) => {
|
||||
let docs = Path.join(__dirname, 'index.html');
|
||||
let content = FS.readFileSync(docs, 'utf8');
|
||||
|
||||
// Update placeholders
|
||||
content = content
|
||||
.replace(/<span data-version>(.*?)<\/span>/g, '<span data-version>' + __version + '</span>')
|
||||
.replace(/<span data-originalSize>(.*?)<\/span>/g, '<span data-originalSize>' + stats.originalSize + '</span>')
|
||||
.replace(/<span data-minifiedSize>(.*?)<\/span>/g, '<span data-minifiedSize>' + stats.minifiedSize + '</span>');
|
||||
|
||||
// Write docs file
|
||||
FS.writeFile(docs, content, 'utf8', (err) => {
|
||||
if(err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
console.log(Chalk.green('Docs have been updated! 📚'));
|
||||
|
||||
resolve();
|
||||
});
|
||||
}))
|
||||
@@ -139,7 +121,7 @@ if(Program.build) {
|
||||
.then((output) => new Promise((resolve, reject) => {
|
||||
let shoelaceJS = Path.join(__dirname, 'dist/shoelace.js');
|
||||
|
||||
// Update placeholders in JS
|
||||
// Update {placeholders} in JS
|
||||
output.code = output.code.replace(/\{version\}/g, __version);
|
||||
|
||||
// Write output file
|
||||
@@ -154,6 +136,45 @@ if(Program.build) {
|
||||
});
|
||||
}))
|
||||
|
||||
// Generate the docs
|
||||
.then(() => new Promise((resolve, reject) => {
|
||||
Metalsmith(__dirname)
|
||||
.source('./source/docs')
|
||||
.destination('./docs')
|
||||
.clean(true)
|
||||
.use(Markdown())
|
||||
.use(Layouts({
|
||||
engine: 'handlebars',
|
||||
directory: './source/layouts',
|
||||
rename: false
|
||||
}))
|
||||
// Update {placeholders} in content
|
||||
.use((files, metalsmith, done) => {
|
||||
Object.keys(files).forEach((key) => {
|
||||
let file = files[key];
|
||||
|
||||
file.contents = new Buffer(
|
||||
file.contents
|
||||
.toString()
|
||||
.replace(/\{version\}/g, __version)
|
||||
.replace(/\{minifiedSize\}/g, stats.minifiedSize)
|
||||
.replace(/\{originalSize\}/g, stats.originalSize)
|
||||
);
|
||||
});
|
||||
|
||||
done();
|
||||
})
|
||||
.build((err) => {
|
||||
if(err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
console.log(Chalk.green('Docs have been generated! 📚'));
|
||||
|
||||
resolve();
|
||||
});
|
||||
}))
|
||||
|
||||
// Exit with success
|
||||
.then(() => process.exit(1))
|
||||
|
||||
|
||||
4
dist/shoelace.css
vendored
4
dist/shoelace.css
vendored
File diff suppressed because one or more lines are too long
4
dist/shoelace.js
vendored
4
dist/shoelace.js
vendored
@@ -1,12 +1,12 @@
|
||||
/*!
|
||||
Shoelace.css dropdowns 1.0.0-beta9
|
||||
Shoelace.css dropdowns 1.0.0-beta10
|
||||
(c) A Beautiful Site, LLC
|
||||
|
||||
Released under the MIT license
|
||||
Source: https://github.com/claviska/shoelace-css
|
||||
*/
|
||||
!function(){"use strict";if("undefined"==typeof jQuery&&"undefined"==typeof Zepto)throw new Error("Shoelace dropdowns require either jQuery or Zepto.");("function"==typeof jQuery?jQuery:Zepto)(function(e){e(document).on("click",function(t){var i,o,r;if(e(t.target).is(".dropdown-trigger")){if(i=e(t.target).closest(".dropdown"),r=t.target,e(".dropdown.active").not(i).removeClass("active").trigger("hide"),e(r).is(".disabled, :disabled"))return;e(i).toggleClass("active").trigger(e(i).is(".active")?"show":"hide")}else e(t.target).closest(".dropdown-menu").length&&(i=e(t.target).closest(".dropdown"),(o=e(t.target).closest("a").get(0))&&!e(o).is(".disabled")&&e(i).trigger("select",o),t.preventDefault()),e(".dropdown.active").removeClass("active").trigger("hide")}).on("keydown",function(t){27===t.keyCode&&e(".dropdown.active").removeClass("active").trigger("hide")})})}(),/*!
|
||||
Shoelace.css tabs 1.0.0-beta9
|
||||
Shoelace.css tabs 1.0.0-beta10
|
||||
(c) A Beautiful Site, LLC
|
||||
|
||||
Released under the MIT license
|
||||
|
||||
105
docs/alerts.html
Normal file
105
docs/alerts.html
Normal file
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Call attention in your app with alerts.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Alerts</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="alerts">Alerts</h2>
|
||||
<p>Create an alert by applying the <code>alert</code> class to an element such as a <code><div></code>. You can change an alert’s appearance using the <code>alert-*</code> modifier.</p>
|
||||
<pre><code class="lang-html"><div class="alert">Default</div>
|
||||
<div class="alert alert-success">Success</div>
|
||||
<div class="alert alert-info">Info</span>
|
||||
<div class="alert alert-warning">Warning</div>
|
||||
<div class="alert alert-danger">Danger</div>
|
||||
<div class="alert alert-inverse">Inverse</div>
|
||||
</code></pre>
|
||||
<div class="alert">This is a default alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-success">This is a success alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-info">This is an info alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-warning">This is a warning alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-danger">This is a danger alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-inverse">This is an inverse alert <a href="#">with link</a></div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
100
docs/attribution.html
Normal file
100
docs/attribution.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Meet the people and organizations that make Shoelace.css possible.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Attribution</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="attribution">Attribution</h2>
|
||||
<p>Special thanks to the following individuals and organizations for their contributions to Shoelace.css.</p>
|
||||
<ul>
|
||||
<li><a href="https://twitter.com/claviska">Cory LaViska</a> – for creating this project</li>
|
||||
<li><a href="https://twitter.com/adamkolson">Adam K Olson</a> – for designing the logo with a single shoelaces</li>
|
||||
<li><a href="https://getbootstrap.com/">Bootstrap</a> – for inspiration</li>
|
||||
<li><a href="https://cdnjs.com/">cdnjs.com</a> – for providing an awesome CDN service</li>
|
||||
<li><a href="https://github.com/">GitHub</a> – for hosting this and many other open source projects</li>
|
||||
<li><a href="https://www.surrealcms.com/">Surreal CMS</a> – for sponsoring development</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
118
docs/badges.html
Normal file
118
docs/badges.html
Normal file
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Add badges to your app with minimal effort.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Badges</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="badges">Badges</h2>
|
||||
<p>Create a badge by applying the <code>badge</code> class to an element such as a <code><span></code>. You can change a badge’s appearance using the <code>badge-*</code> modifier.</p>
|
||||
<pre><code class="lang-html"><span class="badge">Default</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-inverse">Inverse</span>
|
||||
</code></pre>
|
||||
<p>
|
||||
<span class="badge">Default</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-inverse">Inverse</span>
|
||||
</p>
|
||||
|
||||
<p>By default, badges are sized relative to their parent element.</p>
|
||||
<pre><code class="lang-html"><h1>Heading 1 <span class="badge">Badge</span></h1>
|
||||
<h2>Heading 2 <span class="badge">Badge</span></h2>
|
||||
<h3>Heading 3 <span class="badge">Badge</span></h3>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
</code></pre>
|
||||
<p><h1>Heading 1 <span class="badge">Badge</span></h1></p>
|
||||
<p><h2>Heading 2 <span class="badge">Badge</span></h2></p>
|
||||
<p><h3>Heading 3 <span class="badge">Badge</span></h3></p>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
99
docs/browser-support.html
Normal file
99
docs/browser-support.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Learn about browser support and polyfills for older browsers.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Browser Support</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="browser-support">Browser Support</h2>
|
||||
<blockquote>
|
||||
<p>TL;DR — you can use Shoelace <em>today</em> 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 <a href="#grid-system">grid system</a> and <a href="http://www.myth.io/">Myth</a> as a polyfill.</p>
|
||||
</blockquote>
|
||||
<p>Browser support for CSS variables is <a href="http://caniuse.com/#feat=css-variables">pretty good</a>, but if you need to support Internet Explorer, consider using <a href="http://www.myth.io/">Myth</a> as a polyfill. Myth lets you write standards-compliant CSS and “fixes” it for unsupportive browsers.</p>
|
||||
<p>Browser support for the CSS Grid is <a href="http://caniuse.com/#feat=css-grid">very good</a>, but if you need to support older browsers you can use a <a href="#grid-system">grid system</a> instead.</p>
|
||||
<p>Browser support for <code>calc</code> is <a href="http://caniuse.com/#feat=calc">excellent</a>. Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.</p>
|
||||
<p>Browser support for color modifiers is non-existent. <a href="https://drafts.csswg.org/css-color/#modifying-colors">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
|
||||
<p>Browser support for custom media queries is non-existent. <a href="https://drafts.csswg.org/mediaqueries-5/#custom-mq">There is a draft</a>, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
161
docs/buttons.html
Normal file
161
docs/buttons.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Add styled buttons to your app with minimal effort.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Buttons</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="buttons">Buttons</h2>
|
||||
<p>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 a button’s appearance using the <code>button-*</code> modifier.</p>
|
||||
<pre><code class="lang-html"><button type="button">Default</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
<button type="button" class="button-inverse">Inverse</button>
|
||||
<button type="button" class="button button-link">Link</button>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<button type="button">Default</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
<button type="button" class="button-inverse">Inverse</button>
|
||||
<button type="button" class="button-link">Link</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-small</code> and <code>button-big</code> modifiers to change the size of a button.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>button-block</code> modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
<p>Disabled buttons look like this. Set the <code>disabled</code> property on <code><button></code> elements to achieve this effect. For all other elements, apply <code>class="disabled"</code> instead.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Default</button>
|
||||
<button type="button" class="button-success" disabled>Success</button>
|
||||
<button type="button" class="button-info disabled">Info</button>
|
||||
<button type="button" class="button-warning" disabled>Warning</button>
|
||||
<button type="button" class="button-danger" disabled>Danger</button>
|
||||
<button type="button" class="button-inverse" disabled>Inverse</button>
|
||||
</div>
|
||||
|
||||
<p>You can force buttons to have an active state by applying the <code>active</code> class.</p>
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Default</button>
|
||||
<button type="button" class="button-success active">Success</button>
|
||||
<button type="button" class="button-info active">Info</button>
|
||||
<button type="button" class="button-warning active">Warning</button>
|
||||
<button type="button" class="button-danger active">Danger</button>
|
||||
<button type="button" class="button-inverse active">Inverse</button>
|
||||
</div>
|
||||
|
||||
<h3 id="file-buttons">File Buttons</h3>
|
||||
<p>File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an <a href="https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file">exercise for the user</a>.</p>
|
||||
<p>File buttons are simply <code><label></code> elements with the <code>button</code> class and a nested file input.</p>
|
||||
<pre><code class="lang-html"><label class="button">
|
||||
Select File
|
||||
<input type="file">
|
||||
</label>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<label class="button">Select File <input type="file"></label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
226
docs/content.html
Normal file
226
docs/content.html
Normal file
@@ -0,0 +1,226 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Default content styles.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Content</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="content">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.</p>
|
||||
<p>For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in <code>rem</code> units.</p>
|
||||
<h3 id="headings-h1-h6-">Headings <code><h1> – <h6></code></h3>
|
||||
<p><h1>Heading 1</h1></p>
|
||||
<p><h2>Heading 2</h2></p>
|
||||
<p><h3>Heading 3</h3></p>
|
||||
<p><h4>Heading 4</h4></p>
|
||||
<p><h5>Heading 5</h5></p>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
<h3 id="paragraphs-p-">Paragraphs <code><p></code></h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat excepturi repellendus nostrum dolorum dignissimos quis non, minus debitis laborum vero cupiditate sequi neque, magnam dolore nemo possimus, soluta ducimus eaque.</p>
|
||||
<p>Blanditiis ea qui, veritatis animi recusandae praesentium magnam. Commodi placeat, laboriosam accusamus laudantium quasi eveniet soluta illo ducimus quis doloremque mollitia, officia pariatur deleniti reprehenderit, maxime, dicta libero vero cum.</p>
|
||||
<h3 id="ordered-lists-ol-">Ordered Lists <code><ol></code></h3>
|
||||
<ol>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2<ol>
|
||||
<li>Nested item 1</li>
|
||||
<li>Nested item 2</li>
|
||||
<li>Nested item 3</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>List item 3</li>
|
||||
</ol>
|
||||
<h3 id="unordered-lists-ul-">Unordered Lists <code><ul></code></h3>
|
||||
<ul>
|
||||
<li>List item 1</li>
|
||||
<li>List item 2<ul>
|
||||
<li>Nested item 1</li>
|
||||
<li>Nested item 2</li>
|
||||
<li>Nested item 3</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>List item 3</li>
|
||||
</ul>
|
||||
<h3 id="definition-lists-dl-">Definition Lists <code><dl></code></h3>
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem perferendis
|
||||
exercitationem asperiores fuga incidunt, nam dicta amet. Dolor eligendi nisi praesentium
|
||||
placeat officiis esse corporis molestiae. Doloremque accusamus, vel!
|
||||
</dd>
|
||||
<dt>Term 2</dt>
|
||||
<dd>
|
||||
Veritatis repellendus porro ipsam beatae temporibus natus id adipisci nobis accusantium
|
||||
quidem eum fugit cupiditate deleniti nisi nesciunt dicta officia, enim, atque corporis neque
|
||||
error. Unde saepe molestiae hic voluptatibus?
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<h3 id="blockquotes-blockquote-">Blockquotes <code><blockquote></code></h3>
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ipsam enim reprehenderit placeat ab voluptate totam suscipit voluptas, culpa pariatur eos quas, sequi unde perferendis officiis! Officiis eligendi eaque facilis.
|
||||
</blockquote>
|
||||
|
||||
<h3 id="preformatted-text-pre-">Preformatted Text <code><pre></code></h3>
|
||||
<pre><code>CLS
|
||||
SCREEN 13
|
||||
PRINT "SHOELACE IS AWESOME"
|
||||
</code></pre><h3 id="text-formats">Text Formats</h3>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><strong></code></td>
|
||||
<td><strong>This is strong text</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><em></code></td>
|
||||
<td><em>This is emphasized text</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><u></code></td>
|
||||
<td><u>This is underlined text</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><s></code></td>
|
||||
<td><s>This is strikethrough text</s></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><a></code></td>
|
||||
<td><a href="#">This is link text</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><small></code></td>
|
||||
<td><small>This is small text</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><sup></code></td>
|
||||
<td><sup>This is superscript text</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><sub></code></td>
|
||||
<td><sub>This is subscript text</sub></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><code></code></td>
|
||||
<td><code>This is code text</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><samp></code></td>
|
||||
<td><samp>This is sample text</samp></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><var></code></td>
|
||||
<td><var>This is variable text</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><kbd></code></td>
|
||||
<td><kbd>This is keyboard text</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><abbr></code></td>
|
||||
<td><abbr title="Abbreviation">This is abbreviation text</abbr></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><del></code></td>
|
||||
<td><del>This is deleted text</del></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><ins></code></td>
|
||||
<td><ins>This is inserted text</ins></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><mark></code></td>
|
||||
<td><mark>This is marked text</mark></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
111
docs/customizing.html
Normal file
111
docs/customizing.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Learn how to customize Shoelace.css with CSS variables.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Customizing</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<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 <code>[variables.css](source/css/variables.css)</code> 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;
|
||||
--body-bg-color: black;
|
||||
}
|
||||
</code></pre>
|
||||
<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. It also provides a foundation for extending Shoelace with your own <a href="#custom-components">custom components</a>.</p>
|
||||
<p>.your-selector {
|
||||
color: var(--state-danger);
|
||||
}
|
||||
```</p>
|
||||
<p>Refer to <code>[variables.css](source/css/variables.css)</code> 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 try it out.</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 <code>[variables.css](source/css/variables.css)</code> 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>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
199
docs/dropdowns.html
Normal file
199
docs/dropdowns.html
Normal file
@@ -0,0 +1,199 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Add beautiful menus to your app with dropdowns.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Dropdowns</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="dropdowns">Dropdowns</h2>
|
||||
<p>Dropdowns can be created using the markup below. You can use a <code><button></code> or an <code><a></code> as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply <code><a></code> elements. Dividers are simply <code><hr></code> elements.</p>
|
||||
<p>Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the <code>disabled</code> class. Menu items can also be given a checked state using the <code>checked</code> class.</p>
|
||||
<p>To disable a dropdown entirely, add the <code>disabled</code> property to the dropdown trigger if it’s a button. If it’s a link, add the <code>disabled</code> class instead.</p>
|
||||
<pre><code class="lang-html"><div class="dropdown">
|
||||
<button type="button" class="dropdown-trigger">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
<a href="#" class="checked">Checked</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
<hr>
|
||||
<a href="#">More...</a>
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="dropdown-trigger">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
<a href="#" class="checked">Checked</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
<hr>
|
||||
<a href="#">More...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>dropdown-top</code> and <code>dropdown-left</code> modifiers to change the positioning of the menu. You can combine these modifiers as needed.</p>
|
||||
<pre><code class="lang-html"><div class="dropdown dropdown-left">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top dropdown-left">
|
||||
...
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Left</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top">
|
||||
<button type="button" class="dropdown-trigger">Top</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Top Left</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Dropdowns with button triggers can be used inside input groups.</p>
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="checked">USD</a>
|
||||
<a href="#">AUD</a>
|
||||
<a href="#">CAD</a>
|
||||
<a href="#">GBP</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
<p>Dropdowns require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
|
||||
<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:</p>
|
||||
<ul>
|
||||
<li><code>show</code> – Fires when a dropdown is shown.</li>
|
||||
<li><code>hide</code> – Fires when a dropdown is hidden.</li>
|
||||
<li><code>select</code> – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.</li>
|
||||
</ul>
|
||||
<p>This example will log all three events for a dropdown with an id of <code>my-dropdown</code>.</p>
|
||||
<pre><code class="lang-javascript">$('#my-dropdown')
|
||||
.on('show', function(event) {
|
||||
console.log('show', event.target);
|
||||
})
|
||||
.on('hide', function(event) {
|
||||
console.log('hide', event.target);
|
||||
})
|
||||
.on('select', function(event, item) {
|
||||
console.log('select', event.target, item);
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
398
docs/forms.html
Normal file
398
docs/forms.html
Normal file
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Default form control styles.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Forms</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="forms">Forms</h2>
|
||||
<p>Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.</p>
|
||||
<h3 id="form-controls">Form Controls</h3>
|
||||
<p>Form controls are styled at 100% of the width of their parent element.</p>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Input Type</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><input type="checkbox"></code></td>
|
||||
<td>
|
||||
<label><input type="checkbox" checked> Checkbox 1</label><br>
|
||||
<label><input type="checkbox"> Checkbox 2</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="color"></code></td>
|
||||
<td><input type="color" value="#0099dd"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="date"></code></td>
|
||||
<td><input type="date"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="email"></code></td>
|
||||
<td><input type="email"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><input type="file"></code>
|
||||
<br>
|
||||
<span class="text-small text-muted">
|
||||
File inputs aren’t supported. Use a <a href="#file-buttons">file button</a> instead.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<label class="button button-block">Select File <input type="file"></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="number"></code></td>
|
||||
<td><input type="number"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="password"></code></td>
|
||||
<td><input type="password"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="radio"></code></td>
|
||||
<td>
|
||||
<label><input type="Radio" name="radio" checked> Radio 1</label><br>
|
||||
<label><input type="Radio" name="radio"> Radio 2</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="range"></code></td>
|
||||
<td><input type="range"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="search"></code></td>
|
||||
<td><input type="search"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="text"></code></td>
|
||||
<td><input type="text"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="time"></code></td>
|
||||
<td><input type="time"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><progress></progress></code></td>
|
||||
<td><progress max="100" value="50"></progress></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><select></code></td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Item 1</option>
|
||||
<option>Item 2</option>
|
||||
<option>Item 3</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><textarea></code></td>
|
||||
<td><textarea rows="4"></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>You can change the size of most form controls with the <code>input-small</code> and <code>input-big</code> modifiers.</p>
|
||||
<pre><code class="lang-html"><input type="text" class="input-small" placeholder="Small">
|
||||
<input type="text" placeholder="Default">
|
||||
<input type="text" class="input-big" placeholder="Big">
|
||||
|
||||
<select class="input-small"><option>Item</option></select>
|
||||
<select><option>Item</option></select>
|
||||
<select class="input-big"><option>Item</option></select>
|
||||
</code></pre>
|
||||
<div class="two-column">
|
||||
<p><input type="text" class="input-small" placeholder="Small"></p>
|
||||
<p><input type="text" placeholder="Default"></p>
|
||||
<p><input type="text" class="input-big" placeholder="Big"></p>
|
||||
<p><select class="input-small"><option>Item</option></select></p>
|
||||
<p><select><option>Item</option></select></p>
|
||||
<p><select class="input-big"><option>Item</option></select></p>
|
||||
</div>
|
||||
|
||||
<p>Disabled form controls look like this:</p>
|
||||
<div class="input-single">
|
||||
<input type="text" placeholder="Input" disabled>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox" disabled> Checkbox</label>
|
||||
<label><input type="radio" disabled> Radio</label>
|
||||
</div>
|
||||
|
||||
<p>Read-only form controls look like this:</p>
|
||||
<div class="input-single">
|
||||
<input type="text" readonly value="This is read-only">
|
||||
</div>
|
||||
|
||||
<h3 id="form-control-spacing">Form Control Spacing</h3>
|
||||
<p>For proper spacing of individual form controls, wrap them in <code>input-single</code> containers.</p>
|
||||
<pre><code class="lang-html"><div class="input-single">
|
||||
<label>Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox"> Remember me</label>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<label>Username</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox"> Remember me</label>
|
||||
</div>
|
||||
|
||||
<h3 id="input-groups">Input Groups</h3>
|
||||
<p>Form controls and buttons can be grouped by wrapping them in <code>input-group</code> containers.</p>
|
||||
<pre><code class="lang-html"><div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button" class="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button type="button" class="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button" class="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button type="button" class="button">Option 1</button>
|
||||
<button type="button" class="button">Option 2</button>
|
||||
<button type="button" class="button">Option 3</button>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="input-addons">Input Addons</h3>
|
||||
<p>To create an input addon, use <code><span class="input-addon"></code>. Addons can appear anywhere inside an input group. Use the <code>input-addon-small</code> and <code>input-addon-big</code> modifiers to change the size to match adjacent form controls.</p>
|
||||
<pre><code class="lang-html"><div class="input-group">
|
||||
<span class="input-addon input-addon-small">$</span>
|
||||
<input type="text" class="input-small">
|
||||
<span class="input-addon input-addon-small">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-big">$</span>
|
||||
<input type="text" class="input-big">
|
||||
<span class="input-addon input-addon-big">.00</span>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-small">$</span>
|
||||
<input type="text" class="input-small">
|
||||
<span class="input-addon input-addon-small">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-big">$</span>
|
||||
<input type="text" class="input-big">
|
||||
<span class="input-addon input-addon-big">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="form-groups">Form Groups</h3>
|
||||
<p>Related form controls can be grouped in a <code><fieldset></code>. An optional <code><legend></code> can be used to display a name for the group.</p>
|
||||
<pre><code class="lang-html"><fieldset>
|
||||
<legend>User</legend>
|
||||
...
|
||||
</fieldset>
|
||||
</code></pre>
|
||||
<fieldset>
|
||||
<legend>Login</legend>
|
||||
<div class="input-single">
|
||||
<label>Username</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<button type="button">Login</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h3 id="validation">Validation</h3>
|
||||
<p>Form controls can be made valid or invalid using the <code>input-valid</code> and <code>input-invalid</code> modifiers. It’s better to apply modifiers to the surrounding <code>input-single</code> so labels will be styled as well, but modifiers can be applied directly to form controls as needed.</p>
|
||||
<pre><code class="lang-html"><div class="input-single input-valid">
|
||||
<label>Valid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single input-invalid">
|
||||
<label>Invalid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="two-column">
|
||||
<div class="input-single input-valid">
|
||||
<label>Valid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single input-invalid">
|
||||
<label>Invalid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
93
docs/grid-system.html
Normal file
93
docs/grid-system.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Shoelace doesn’t ship with a grid system because you don’t need one!">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Grid System</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="grid-system">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/">you don’t need one</a>. You should use the <a href="https://gridbyexample.com/">CSS Grid Layout</a> instead.</p>
|
||||
<p>If you have an obligation to support older browsers, consider using the Bootstrap grid <a href="https://github.com/zirafa/bootstrap-grid-only">without any extras</a> in combination with Shoelace.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
93
docs/icons.html
Normal file
93
docs/icons.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Shoelace doesn’t ship with icons, but you can easily add your own!">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Icons</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="icons">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.</p>
|
||||
<p>This keeps Shoelace light and makes it more customizable.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
111
docs/installing.html
Normal file
111
docs/installing.html
Normal file
@@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="How to install Shoelace.css.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Installing</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="installing">Installing</h2>
|
||||
<p>Shoelace is incredibly easy to use. To get started, simply link to <code>shoelace.css</code> in your project. You can use the CDN version or download the source manually.</p>
|
||||
<p>To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load <a href="https://cdnjs.com/libraries/jquery/">jQuery</a> or <a href="https://cdnjs.com/libraries/zepto/">Zepto</a> along with <code>shoelace.js</code>.</p>
|
||||
<h3 id="cdn">CDN</h3>
|
||||
<p>The easiest way to use Shoelace is via CDN. Just add this to the <code><head></code>:</p>
|
||||
<pre><code class="lang-html"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta10/shoelace.css">
|
||||
</code></pre>
|
||||
<p>And this before <code></body></code> but after jQuery/Zepto:</p>
|
||||
<pre><code class="lang-html"><script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/1.0.0-beta10/shoelace.js"></script>
|
||||
</code></pre>
|
||||
<p>This service is provided free, courtesy of <a href="https://cdnjs.com/">CDNJS</a>. New releases can take up to 12 hours to appear on the CDN.</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. Just add this stylesheet to your <code><head></code>:</p>
|
||||
<pre><code class="lang-html"><link rel="stylesheet" href="dist/shoelace.css">
|
||||
</code></pre>
|
||||
<p>And this before <code></body></code> but after jQuery/Zepto:</p>
|
||||
<pre><code class="lang-html"><script src="dist/shoelace.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="npm">NPM</h3>
|
||||
<p>If you’re using NPM, you can install Shoelace by running:</p>
|
||||
<pre><code>npm install --save-dev shoelace-css
|
||||
</code></pre>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
112
docs/loaders.html
Normal file
112
docs/loaders.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="These pure CSS loaders are easy to use and look great.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Loaders</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="loaders">Loaders</h2>
|
||||
<p>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>loader-big</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><span class="loader loader-small"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
<p>You can simulate a background loader using <code>loader-bg</code>. This is achieved using <code>position: relative</code> on the container and the <code>::after</code> pseudo-element. You can use the <code>loader-bg-small</code> and <code>loader-bg-big</code> modifiers to change the size.</p>
|
||||
<pre><code class="lang-html"><div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</code></pre>
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
146
docs/switches.html
Normal file
146
docs/switches.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="These pure CSS switches can be used as a checkbox replacement.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Switches</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="switches">Switches</h2>
|
||||
<p>Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.</p>
|
||||
<p>Because this is a pure CSS solution, there are a couple important things to remember:</p>
|
||||
<ul>
|
||||
<li>Each switch must have a unique <code>id</code></li>
|
||||
<li>The <code><label></code> must have a <code>for</code> attribute that references the switch <code>id</code></li>
|
||||
<li>The <code><label></code> must come <strong>after</strong> the checkbox, otherwise the control won’t render</li>
|
||||
</ul>
|
||||
<p>The markup for a switch looks like this:</p>
|
||||
<pre><code class="lang-html"><span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-1">
|
||||
<label for="switch-1">Option 1</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||||
<label for="switch-2">Option 2</label>
|
||||
</span>
|
||||
</code></pre>
|
||||
<div class="input-single">
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-1">
|
||||
<label for="switch-1">Option 1</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||||
<label for="switch-2">Option 2</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p>Use the <code>switch-small</code> and <code>switch-big</code> modifiers to change the size of a switch.</p>
|
||||
<div class="input-single">
|
||||
<span class="switch switch-small">
|
||||
<input type="checkbox" class="switch" id="switch-3">
|
||||
<label for="switch-3">Small</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-4">
|
||||
<label for="switch-4">Normal</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-big">
|
||||
<input type="checkbox" class="switch" id="switch-5">
|
||||
<label for="switch-5">Big</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p>Disabled switches are dimmed out. To disable a switch, add the <code>disabled</code> attribute to the checkbox (not the wrapper).</p>
|
||||
<div class="input-single">
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" disabled id="switch-6">
|
||||
<label for="switch-6">Disabled</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
169
docs/tables.html
Normal file
169
docs/tables.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Shoelace ships with elegant table styles and a handful of modifiers.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Tables</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="tables">Tables</h2>
|
||||
<p>Tables are styled for you automatically — no special classes required.</p>
|
||||
<pre><code class="lang-html"><table>
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="striped-tables">Striped Tables</h3>
|
||||
<p>Use the <code>table-striped</code> modifier to add stripes to alternating rows.</p>
|
||||
<pre><code class="lang-html"><table class="table-striped">
|
||||
...
|
||||
</table>
|
||||
</code></pre>
|
||||
<table class="table-striped">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="bordered-tables">Bordered Tables</h3>
|
||||
<p>Use the <code>table-bordered</code> modifier to add a border to the table.</p>
|
||||
<pre><code class="lang-html"><table class="table-bordered">
|
||||
...
|
||||
</table>
|
||||
</code></pre>
|
||||
<table class="table-bordered">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="hoverable-rows">Hoverable Rows</h3>
|
||||
<p>Use the <code>table-hoverable</code> modifier to enable the hover state on table rows.</p>
|
||||
<pre><code class="lang-html"><table class="table-hoverable">
|
||||
...
|
||||
</table>
|
||||
</code></pre>
|
||||
<table class="table-hoverable">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
219
docs/tabs.html
Normal file
219
docs/tabs.html
Normal file
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Add tabs to your app with the tabs component.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Tabs</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="tabs">Tabs</h2>
|
||||
<p>Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.</p>
|
||||
<p>Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s <code>id</code>.</p>
|
||||
<p>To disable a tab, add <code>disabled</code> to the appropriate tab nav.</p>
|
||||
<pre><code class="lang-html"><div class="tabs">
|
||||
<nav class="tabs-nav">
|
||||
<a href="#tab-1" class="active">Tab 1</a>
|
||||
<a href="#tab-2">Tab 2</a>
|
||||
<a href="#tab-3">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
<div class="tabs">
|
||||
<nav class="tabs-nav">
|
||||
<a href="#tab-1-example-1" class="active">Tab 1</a>
|
||||
<a href="#tab-2-example-1">Tab 2</a>
|
||||
<a href="#tab-3-example-1">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1-example-1">
|
||||
<h3>Tab 1</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
|
||||
assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
|
||||
officiis, laudantium debitis! Excepturi, quis!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2-example-1">
|
||||
<h3>Tab 2</h3>
|
||||
<p>
|
||||
Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
|
||||
aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
|
||||
pariatur labore iste vel, velit odit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3-example-1">
|
||||
<h3>Tab 3</h3>
|
||||
<p>
|
||||
Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
|
||||
laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
|
||||
quae necessitatibus, aut dignissimos totam non! Quod.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="vertical-tabs">Vertical Tabs</h3>
|
||||
<p>Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.</p>
|
||||
<p>Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.</p>
|
||||
<pre><code class="lang-css">.tabs-vertical-example {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav a {
|
||||
display: block;
|
||||
}
|
||||
</code></pre>
|
||||
<div class="tabs tabs-vertical-example">
|
||||
<nav class="tabs-nav tabs-nav-block">
|
||||
<a href="#tab-1-example-2" class="active">Tab 1</a>
|
||||
<a href="#tab-2-example-2">Tab 2</a>
|
||||
<a href="#tab-3-example-2">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1-example-2">
|
||||
<h3>Tab 1</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
|
||||
assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
|
||||
officiis, laudantium debitis! Excepturi, quis!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2-example-2">
|
||||
<h3>Tab 2</h3>
|
||||
<p>
|
||||
Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
|
||||
aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
|
||||
pariatur labore iste vel, velit odit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3-example-2">
|
||||
<h3>Tab 3</h3>
|
||||
<p>
|
||||
Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
|
||||
laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
|
||||
quae necessitatibus, aut dignissimos totam non! Quod.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 id="events">Events</h3>
|
||||
<p>Tabs require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
|
||||
<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:</p>
|
||||
<ul>
|
||||
<li><code>show</code> – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.</li>
|
||||
<li><code>hide</code> – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.</li>
|
||||
</ul>
|
||||
<p>This example will log both events for the tab set with an id of <code>my-tabs</code>.</p>
|
||||
<pre><code class="lang-javascript">$('#my-tabs')
|
||||
.on('show', function(event, tabPane) {
|
||||
console.log('show', event.target, tabPane);
|
||||
})
|
||||
.on('hide', function(event, tabPane) {
|
||||
console.log('hide', event.target, tabPane);
|
||||
});
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
214
docs/utilities.html
Normal file
214
docs/utilities.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="Use these utilities for quick prototyping.">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>Utilities</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
<h2 id="utilities">Utilities</h2>
|
||||
<p>Shoelace provides a number of helpful utility classes that make prototyping easier.</p>
|
||||
<h3 id="text-utilities">Text Utilities</h3>
|
||||
<p>Text utilities are classes that can be applied to just about any element. The text inside will be
|
||||
formatted appropriately.</p>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>text-success</code></td>
|
||||
<td class="text-success">This is success text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-info</code></td>
|
||||
<td class="text-info">This is info text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-warning</code></td>
|
||||
<td class="text-warning">This is warning text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-danger</code></td>
|
||||
<td class="text-danger">This is danger text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-muted</code></td>
|
||||
<td class="text-muted">This is muted text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-small</code></td>
|
||||
<td class="text-small">This is small text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-bold</code></td>
|
||||
<td class="text-bold">This is bold text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-italic</code></td>
|
||||
<td class="text-italic">This is italic text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-left</code></td>
|
||||
<td class="text-left">This is left-aligned text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-center</code></td>
|
||||
<td class="text-center">This is centered text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-right</code></td>
|
||||
<td class="text-right">This is right-aligned text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-justify</code></td>
|
||||
<td class="text-justify">This is justified text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-nowrap</code></td>
|
||||
<td class="text-nowrap">This is text that won’t wrap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-lowercase</code></td>
|
||||
<td class="text-lowercase">This is lowercase text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-uppercase</code></td>
|
||||
<td class="text-uppercase">This is uppercase text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-capitalize</code></td>
|
||||
<td class="text-capitalize">This is capitalized text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 id="float-utilities">Float Utilities</h3>
|
||||
<p>Float utilities are provided to easily float elements to the left or right. Just apply the <code>float-left</code> or <code>float-right</code> class to an element to float it left or right.</p>
|
||||
<p>A clearfix utility is also available to clear floated elements. Just apply the <code>clearfix</code> class to the appropriate element.</p>
|
||||
<h3 id="sizing-utilities">Sizing Utilities</h3>
|
||||
<p>Sizing utilities can be used to set a relative width or height on any element. Just apply a <code>width-*</code> or <code>height-*</code> class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.</p>
|
||||
<pre><code class="lang-html"><div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
<div class="width-75">75%</div>
|
||||
<div class="width-100">100%</div>
|
||||
|
||||
<div class="height-25">25%</div>
|
||||
<div class="height-50">50%</div>
|
||||
<div class="height-75">75%</div>
|
||||
<div class="height-100">100%</div>
|
||||
</code></pre>
|
||||
<div class="width-sizing-example">
|
||||
<div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
<div class="width-75">75%</div>
|
||||
<div class="width-100">100%</div>
|
||||
</div>
|
||||
|
||||
<div class="height-sizing-example">
|
||||
<div class="height-25">25%</div>
|
||||
<div class="height-50">50%</div>
|
||||
<div class="height-75">75%</div>
|
||||
<div class="height-100">100%</div>
|
||||
</div>
|
||||
|
||||
<h3 id="spacing-utilities">Spacing Utilities</h3>
|
||||
<p>Spacing utilities can be used to add or remove paddings and margins to any element. Just apply the desired class and the appropriate element will receive the respective padding/margin.</p>
|
||||
<p>Class names are prefixed with <code>padding-</code> or <code>margin-</code> for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes:</p>
|
||||
<pre><code>padding-[none|small|medium|big]
|
||||
margin-[none|small|medium|big]
|
||||
</code></pre><p>Example:</p>
|
||||
<pre><code class="lang-html"><div class="padding-none margin-big">
|
||||
</code></pre>
|
||||
<p>To apply spacing to a specific side of an element, use one or more of the following classes:</p>
|
||||
<pre><code>padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
</code></pre><p>Example:</p>
|
||||
<pre><code class="lang-html"><div class="padding-left-medium margin-bottom-none">
|
||||
</code></pre>
|
||||
<p>You can also use <code>margin-[x|y|xy]-auto</code> to set automatic margins horizontally and/or vertically.</p>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css 1.0.0-beta10 ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1785
index.html
1785
index.html
File diff suppressed because it is too large
Load Diff
2994
package-lock.json
generated
2994
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "shoelace-css",
|
||||
"description": "A back to the basics CSS starter kit.",
|
||||
"version": "1.0.0-beta9",
|
||||
"version": "1.0.0-beta10",
|
||||
"author": "Cory LaViska",
|
||||
"homepage": "https://shoelace.style/",
|
||||
"license": "MIT",
|
||||
@@ -16,6 +16,11 @@
|
||||
"cssnano": "^3.10.0",
|
||||
"del": "^3.0.0",
|
||||
"fs": "0.0.1-security",
|
||||
"handlebars": "^4.0.10",
|
||||
"metalsmith": "^2.3.0",
|
||||
"metalsmith-in-place": "^3.0.1",
|
||||
"metalsmith-layouts": "^1.8.1",
|
||||
"metalsmith-markdown": "^0.2.1",
|
||||
"postcss": "^6.0.8",
|
||||
"postcss-import": "^10.0.0",
|
||||
"uglify-js": "^3.0.27"
|
||||
|
||||
@@ -2,10 +2,78 @@ body {
|
||||
border-top: solid .3rem var(--color-aqua);
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 45rem;
|
||||
padding: 1rem;
|
||||
#head {
|
||||
margin: var(--component-spacing-big) 0;
|
||||
}
|
||||
|
||||
#head img {
|
||||
width: 24rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
max-width: 60rem;
|
||||
padding: 0 2rem;
|
||||
margin: 2rem auto;
|
||||
display: grid;
|
||||
grid-template-columns: 12rem calc(100% - 12rem);
|
||||
}
|
||||
|
||||
#nav {
|
||||
text-align: right;
|
||||
border-right: solid var(--component-border-width) var(--component-border-color);
|
||||
padding-right: 1rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
border-radius: var(--component-border-radius);
|
||||
margin: .5rem 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav a.current {
|
||||
color: var(--text-muted);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#nav a.current:hover {
|
||||
|
||||
}
|
||||
|
||||
#foot {
|
||||
text-align: center;
|
||||
margin: var(--component-spacing-big) 0;
|
||||
}
|
||||
|
||||
#foot img {
|
||||
width: 14rem;
|
||||
display: inline-block;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
#homepage #wrap {
|
||||
max-width: 48rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 60rem) {
|
||||
#wrap {
|
||||
padding: 0 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav {
|
||||
font-size: .9rem;
|
||||
border: none;
|
||||
text-align: center;
|
||||
margin: 0 0 2rem 0;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
margin: .3rem;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
h1[id]:not(:first-child),
|
||||
@@ -20,45 +88,14 @@ h4[id] {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
h1 img {
|
||||
width: 24rem;
|
||||
vertical-align: middle;
|
||||
pre {
|
||||
margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: solid var(--component-border-width) var(--component-border-color);
|
||||
padding-bottom: var(--component-spacing);
|
||||
margin-bottom: var(--component-spacing-big);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: solid var(--component-border-width) var(--component-border-color);
|
||||
text-align: center;
|
||||
padding-top: var(--component-spacing-big);
|
||||
margin-top: var(--component-spacing-big);
|
||||
}
|
||||
|
||||
footer img {
|
||||
width: 16rem;
|
||||
}
|
||||
|
||||
/* Main headings and bookmark links */
|
||||
h2[id] {
|
||||
border-bottom: solid var(--component-border-width) var(--component-border-color);
|
||||
padding-bottom: .25rem;
|
||||
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;
|
||||
pre code {
|
||||
white-space: pre;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 45rem) {
|
||||
35
source/css/_homepage.css
Normal file
35
source/css/_homepage.css
Normal file
@@ -0,0 +1,35 @@
|
||||
body {
|
||||
border-top: solid .3rem var(--color-aqua);
|
||||
}
|
||||
|
||||
#head {
|
||||
margin: var(--component-spacing-big) 0;
|
||||
}
|
||||
|
||||
#head img {
|
||||
width: 24rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
max-width: 48rem;
|
||||
padding: 0 2rem;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 1rem !important; /* Prism overrides our bottom margin */
|
||||
}
|
||||
|
||||
pre code {
|
||||
white-space: pre;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 60rem) {
|
||||
#wrap {
|
||||
padding: 0 1rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
25
source/docs/alerts.md
Normal file
25
source/docs/alerts.md
Normal file
@@ -0,0 +1,25 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Alerts
|
||||
description: Call attention in your app with alerts.
|
||||
---
|
||||
|
||||
## Alerts
|
||||
|
||||
Create an alert by applying the `alert` class to an element such as a `<div>`. You can change an alert’s appearance using the `alert-*` modifier.
|
||||
|
||||
```html
|
||||
<div class="alert">Default</div>
|
||||
<div class="alert alert-success">Success</div>
|
||||
<div class="alert alert-info">Info</span>
|
||||
<div class="alert alert-warning">Warning</div>
|
||||
<div class="alert alert-danger">Danger</div>
|
||||
<div class="alert alert-inverse">Inverse</div>
|
||||
```
|
||||
|
||||
<div class="alert">This is a default alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-success">This is a success alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-info">This is an info alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-warning">This is a warning alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-danger">This is a danger alert <a href="#">with link</a></div>
|
||||
<div class="alert alert-inverse">This is an inverse alert <a href="#">with link</a></div>
|
||||
16
source/docs/attribution.md
Normal file
16
source/docs/attribution.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Attribution
|
||||
description: Meet the people and organizations that make Shoelace.css possible.
|
||||
---
|
||||
|
||||
## Attribution
|
||||
|
||||
Special thanks to the following individuals and organizations for their contributions to Shoelace.css.
|
||||
|
||||
- [Cory LaViska](https://twitter.com/claviska) – for creating this project
|
||||
- [Adam K Olson](https://twitter.com/adamkolson) – for designing the logo with a single shoelaces
|
||||
- [Bootstrap](https://getbootstrap.com/) – for inspiration
|
||||
- [cdnjs.com](https://cdnjs.com/) – for providing an awesome CDN service
|
||||
- [GitHub](https://github.com/) – for hosting this and many other open source projects
|
||||
- [Surreal CMS](https://www.surrealcms.com/) – for sponsoring development
|
||||
41
source/docs/badges.md
Normal file
41
source/docs/badges.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Badges
|
||||
description: Add badges to your app with minimal effort.
|
||||
---
|
||||
|
||||
## Badges
|
||||
|
||||
Create a badge by applying the `badge` class to an element such as a `<span>`. You can change a badge’s appearance using the `badge-*` modifier.
|
||||
|
||||
```html
|
||||
<span class="badge">Default</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-inverse">Inverse</span>
|
||||
```
|
||||
|
||||
<p>
|
||||
<span class="badge">Default</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-info">Info</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-danger">Danger</span>
|
||||
<span class="badge badge-inverse">Inverse</span>
|
||||
</p>
|
||||
|
||||
By default, badges are sized relative to their parent element.
|
||||
|
||||
```html
|
||||
<h1>Heading 1 <span class="badge">Badge</span></h1>
|
||||
<h2>Heading 2 <span class="badge">Badge</span></h2>
|
||||
<h3>Heading 3 <span class="badge">Badge</span></h3>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
```
|
||||
|
||||
<h1>Heading 1 <span class="badge">Badge</span></h1>
|
||||
<h2>Heading 2 <span class="badge">Badge</span></h2>
|
||||
<h3>Heading 3 <span class="badge">Badge</span></h3>
|
||||
<p>Paragraph <span class="badge">Badge</span></p>
|
||||
19
source/docs/browser-support.md
Normal file
19
source/docs/browser-support.md
Normal file
@@ -0,0 +1,19 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Browser Support
|
||||
description: Learn about browser support and polyfills for older browsers.
|
||||
---
|
||||
|
||||
## Browser Support
|
||||
|
||||
> TL;DR — you can use Shoelace _today_ 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 [grid system](#grid-system) and [Myth](http://www.myth.io/) as a polyfill.
|
||||
|
||||
Browser support for CSS variables is [pretty good](http://caniuse.com/#feat=css-variables), but if you need to support Internet Explorer, consider using [Myth](http://www.myth.io/) as a polyfill. Myth lets you write standards-compliant CSS and “fixes” it for unsupportive browsers.
|
||||
|
||||
Browser support for the CSS Grid is [very good](http://caniuse.com/#feat=css-grid), but if you need to support older browsers you can use a [grid system](#grid-system) instead.
|
||||
|
||||
Browser support for `calc` is [excellent](http://caniuse.com/#feat=calc). Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.
|
||||
|
||||
Browser support for color modifiers is non-existent. [There is a draft](https://drafts.csswg.org/css-color/#modifying-colors), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.
|
||||
|
||||
Browser support for custom media queries is non-existent. [There is a draft](https://drafts.csswg.org/mediaqueries-5/#custom-mq), so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.
|
||||
90
source/docs/buttons.md
Normal file
90
source/docs/buttons.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Buttons
|
||||
description: Add styled buttons to your app with minimal effort.
|
||||
---
|
||||
|
||||
## Buttons
|
||||
|
||||
To create a button, use the `<button>` element or apply the `button` class to another element such as an `<a>`. You can change a button’s appearance using the `button-*` modifier.
|
||||
|
||||
```html
|
||||
<button type="button">Default</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
<button type="button" class="button-inverse">Inverse</button>
|
||||
<button type="button" class="button button-link">Link</button>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button">Default</button>
|
||||
<button type="button" class="button-success">Success</button>
|
||||
<button type="button" class="button-info">Info</button>
|
||||
<button type="button" class="button-warning">Warning</button>
|
||||
<button type="button" class="button-danger">Danger</button>
|
||||
<button type="button" class="button-inverse">Inverse</button>
|
||||
<button type="button" class="button-link">Link</button>
|
||||
</div>
|
||||
|
||||
Use the `button-small` and `button-big` modifiers to change the size of a button.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-small">Small Button</button>
|
||||
<button type="button">Normal Button</button>
|
||||
<button type="button" class="button-big">Big Button</button>
|
||||
</div>
|
||||
|
||||
Use the `button-block` modifier to make the button span the entire width of its parent element. You can also mix and match modifiers as needed.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-small">Small Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block">Normal Block Button</button>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="button-block button-big">Big Block Button</button>
|
||||
</div>
|
||||
|
||||
Disabled buttons look like this. Set the `disabled` property on `<button>` elements to achieve this effect. For all other elements, apply `class="disabled"` instead.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" disabled>Default</button>
|
||||
<button type="button" class="button-success" disabled>Success</button>
|
||||
<button type="button" class="button-info disabled">Info</button>
|
||||
<button type="button" class="button-warning" disabled>Warning</button>
|
||||
<button type="button" class="button-danger" disabled>Danger</button>
|
||||
<button type="button" class="button-inverse" disabled>Inverse</button>
|
||||
</div>
|
||||
|
||||
You can force buttons to have an active state by applying the `active` class.
|
||||
|
||||
<div class="input-single">
|
||||
<button type="button" class="active">Default</button>
|
||||
<button type="button" class="button-success active">Success</button>
|
||||
<button type="button" class="button-info active">Info</button>
|
||||
<button type="button" class="button-warning active">Warning</button>
|
||||
<button type="button" class="button-danger active">Danger</button>
|
||||
<button type="button" class="button-inverse active">Inverse</button>
|
||||
</div>
|
||||
|
||||
### File Buttons
|
||||
|
||||
File inputs are notoriously hard to style properly in every browser. Shoelace offers file buttons as an alternative. These are much easier to style consistently, but come with the caveat that the name (or number) of files selected will not be automatically shown to the user. This aspect of a file button’s UX can be handled effectively with JavaScript, but this is left as an [exercise for the user](https://stackoverflow.com/questions/2189615/how-to-get-file-name-when-user-select-a-file-via-input-type-file).
|
||||
|
||||
File buttons are simply `<label>` elements with the `button` class and a nested file input.
|
||||
|
||||
```html
|
||||
<label class="button">
|
||||
Select File
|
||||
<input type="file">
|
||||
</label>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<label class="button">Select File <input type="file"></label>
|
||||
</div>
|
||||
152
source/docs/content.md
Normal file
152
source/docs/content.md
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Content
|
||||
description: Default content styles.
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in `rem` units.
|
||||
|
||||
### Headings `<h1> – <h6>`
|
||||
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
|
||||
### Paragraphs `<p>`
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat excepturi repellendus nostrum dolorum dignissimos quis non, minus debitis laborum vero cupiditate sequi neque, magnam dolore nemo possimus, soluta ducimus eaque.
|
||||
|
||||
Blanditiis ea qui, veritatis animi recusandae praesentium magnam. Commodi placeat, laboriosam accusamus laudantium quasi eveniet soluta illo ducimus quis doloremque mollitia, officia pariatur deleniti reprehenderit, maxime, dicta libero vero cum.
|
||||
|
||||
### Ordered Lists `<ol>`
|
||||
|
||||
1. List item 1
|
||||
2. List item 2
|
||||
1. Nested item 1
|
||||
2. Nested item 2
|
||||
3. Nested item 3
|
||||
3. List item 3
|
||||
|
||||
### Unordered Lists `<ul>`
|
||||
|
||||
- List item 1
|
||||
- List item 2
|
||||
- Nested item 1
|
||||
- Nested item 2
|
||||
- Nested item 3
|
||||
- List item 3
|
||||
|
||||
### Definition Lists `<dl>`
|
||||
|
||||
<dl>
|
||||
<dt>Term 1</dt>
|
||||
<dd>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem perferendis
|
||||
exercitationem asperiores fuga incidunt, nam dicta amet. Dolor eligendi nisi praesentium
|
||||
placeat officiis esse corporis molestiae. Doloremque accusamus, vel!
|
||||
</dd>
|
||||
<dt>Term 2</dt>
|
||||
<dd>
|
||||
Veritatis repellendus porro ipsam beatae temporibus natus id adipisci nobis accusantium
|
||||
quidem eum fugit cupiditate deleniti nisi nesciunt dicta officia, enim, atque corporis neque
|
||||
error. Unde saepe molestiae hic voluptatibus?
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
### Blockquotes `<blockquote>`
|
||||
|
||||
<blockquote>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia ipsam enim reprehenderit placeat ab voluptate totam suscipit voluptas, culpa pariatur eos quas, sequi unde perferendis officiis! Officiis eligendi eaque facilis.
|
||||
</blockquote>
|
||||
|
||||
### Preformatted Text `<pre>`
|
||||
|
||||
```
|
||||
CLS
|
||||
SCREEN 13
|
||||
PRINT "SHOELACE IS AWESOME"
|
||||
```
|
||||
|
||||
### Text Formats
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>`<strong>`</td>
|
||||
<td><strong>This is strong text</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<em>`</td>
|
||||
<td><em>This is emphasized text</em></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<u>`</td>
|
||||
<td><u>This is underlined text</u></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<s>`</td>
|
||||
<td><s>This is strikethrough text</s></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<a>`</td>
|
||||
<td><a href="#">This is link text</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<small>`</td>
|
||||
<td><small>This is small text</small></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<sup>`</td>
|
||||
<td><sup>This is superscript text</sup></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<sub>`</td>
|
||||
<td><sub>This is subscript text</sub></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<code>`</td>
|
||||
<td>`This is code text`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<samp>`</td>
|
||||
<td><samp>This is sample text</samp></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<var>`</td>
|
||||
<td><var>This is variable text</var></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<kbd>`</td>
|
||||
<td><kbd>This is keyboard text</kbd></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<abbr>`</td>
|
||||
<td><abbr title="Abbreviation">This is abbreviation text</abbr></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<del>`</td>
|
||||
<td><del>This is deleted text</del></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<ins>`</td>
|
||||
<td><ins>This is inserted text</ins></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`<mark>`</td>
|
||||
<td><mark>This is marked text</mark></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
41
source/docs/customizing.md
Normal file
41
source/docs/customizing.md
Normal file
@@ -0,0 +1,41 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Customizing
|
||||
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.
|
||||
|
||||
For example, you can customize the default text color and background like this:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--body-color: white;
|
||||
--body-bg-color: black;
|
||||
}
|
||||
```
|
||||
|
||||
### Using Variables
|
||||
|
||||
You can use any of Shoelace’s variables in your stylesheet. This makes it easy to reuse values without hardcoding them. It also provides a foundation for extending Shoelace with your own [custom components](#custom-components).
|
||||
|
||||
.your-selector {
|
||||
color: var(--state-danger);
|
||||
}
|
||||
```
|
||||
|
||||
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 try it out.
|
||||
|
||||
### Custom Components
|
||||
|
||||
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.
|
||||
|
||||
**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.
|
||||
|
||||
**Semantic markup is strongly encouraged.** Custom components should use the most appropriate elements and the minimal amount of markup required.
|
||||
|
||||
**Keep everything together.** 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.
|
||||
129
source/docs/dropdowns.md
Normal file
129
source/docs/dropdowns.md
Normal file
@@ -0,0 +1,129 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Dropdowns
|
||||
description: Add beautiful menus to your app with dropdowns.
|
||||
---
|
||||
|
||||
## Dropdowns
|
||||
|
||||
Dropdowns can be created using the markup below. You can use a `<button>` or an `<a>` as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply `<a>` elements. Dividers are simply `<hr>` elements.
|
||||
|
||||
Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the `disabled` class. Menu items can also be given a checked state using the `checked` class.
|
||||
|
||||
To disable a dropdown entirely, add the `disabled` property to the dropdown trigger if it’s a button. If it’s a link, add the `disabled` class instead.
|
||||
|
||||
```html
|
||||
<div class="dropdown">
|
||||
<button type="button" class="dropdown-trigger">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
<a href="#" class="checked">Checked</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
<hr>
|
||||
<a href="#">More...</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<div class="dropdown">
|
||||
<button type="button" class="dropdown-trigger">Dropdown</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
<a href="#" class="checked">Checked</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
<hr>
|
||||
<a href="#">More...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Use the `dropdown-top` and `dropdown-left` modifiers to change the positioning of the menu. You can combine these modifiers as needed.
|
||||
|
||||
```html
|
||||
<div class="dropdown dropdown-left">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top dropdown-left">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Left</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top">
|
||||
<button type="button" class="dropdown-trigger">Top</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown dropdown-top dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Top Left</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#">Item 1</a>
|
||||
<a href="#">Item 2</a>
|
||||
<a href="#">Item 3</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Dropdowns with button triggers can be used inside input groups.
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text" placeholder="10.00">
|
||||
<div class="dropdown dropdown-left">
|
||||
<button type="button" class="dropdown-trigger">Currency</button>
|
||||
<div class="dropdown-menu">
|
||||
<a href="#" class="checked">USD</a>
|
||||
<a href="#">AUD</a>
|
||||
<a href="#">CAD</a>
|
||||
<a href="#">GBP</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Events
|
||||
|
||||
Dropdowns require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
|
||||
|
||||
There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
|
||||
|
||||
- `show` – Fires when a dropdown is shown.
|
||||
- `hide` – Fires when a dropdown is hidden.
|
||||
- `select` – Fires when a dropdown menu item is selected. The second callback argument is a reference to the respective menu item.
|
||||
|
||||
This example will log all three events for a dropdown with an id of `my-dropdown`.
|
||||
|
||||
```javascript
|
||||
$('#my-dropdown')
|
||||
.on('show', function(event) {
|
||||
console.log('show', event.target);
|
||||
})
|
||||
.on('hide', function(event) {
|
||||
console.log('hide', event.target);
|
||||
})
|
||||
.on('select', function(event, item) {
|
||||
console.log('select', event.target, item);
|
||||
});
|
||||
```
|
||||
343
source/docs/forms.md
Normal file
343
source/docs/forms.md
Normal file
@@ -0,0 +1,343 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Forms
|
||||
description: Default form control styles.
|
||||
---
|
||||
|
||||
## Forms
|
||||
|
||||
Shoelace gives you beautiful forms without hassle. Most form controls don’t need a special class for styling.
|
||||
|
||||
### Form Controls
|
||||
|
||||
Form controls are styled at 100% of the width of their parent element.
|
||||
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Input Type</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code><input type="checkbox"></code></td>
|
||||
<td>
|
||||
<label><input type="checkbox" checked> Checkbox 1</label><br>
|
||||
<label><input type="checkbox"> Checkbox 2</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="color"></code></td>
|
||||
<td><input type="color" value="#0099dd"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="date"></code></td>
|
||||
<td><input type="date"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="email"></code></td>
|
||||
<td><input type="email"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code><input type="file"></code>
|
||||
<br>
|
||||
<span class="text-small text-muted">
|
||||
File inputs aren’t supported. Use a <a href="#file-buttons">file button</a> instead.
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<label class="button button-block">Select File <input type="file"></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="number"></code></td>
|
||||
<td><input type="number"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="password"></code></td>
|
||||
<td><input type="password"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="radio"></code></td>
|
||||
<td>
|
||||
<label><input type="Radio" name="radio" checked> Radio 1</label><br>
|
||||
<label><input type="Radio" name="radio"> Radio 2</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="range"></code></td>
|
||||
<td><input type="range"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="search"></code></td>
|
||||
<td><input type="search"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="text"></code></td>
|
||||
<td><input type="text"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><input type="time"></code></td>
|
||||
<td><input type="time"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><progress></progress></code></td>
|
||||
<td><progress max="100" value="50"></progress></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><select></code></td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Item 1</option>
|
||||
<option>Item 2</option>
|
||||
<option>Item 3</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code><textarea></code></td>
|
||||
<td><textarea rows="4"></textarea></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
You can change the size of most form controls with the `input-small` and `input-big` modifiers.
|
||||
|
||||
```html
|
||||
<input type="text" class="input-small" placeholder="Small">
|
||||
<input type="text" placeholder="Default">
|
||||
<input type="text" class="input-big" placeholder="Big">
|
||||
|
||||
<select class="input-small"><option>Item</option></select>
|
||||
<select><option>Item</option></select>
|
||||
<select class="input-big"><option>Item</option></select>
|
||||
```
|
||||
|
||||
<div class="two-column">
|
||||
<p><input type="text" class="input-small" placeholder="Small"></p>
|
||||
<p><input type="text" placeholder="Default"></p>
|
||||
<p><input type="text" class="input-big" placeholder="Big"></p>
|
||||
<p><select class="input-small"><option>Item</option></select></p>
|
||||
<p><select><option>Item</option></select></p>
|
||||
<p><select class="input-big"><option>Item</option></select></p>
|
||||
</div>
|
||||
|
||||
Disabled form controls look like this:
|
||||
|
||||
<div class="input-single">
|
||||
<input type="text" placeholder="Input" disabled>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox" disabled> Checkbox</label>
|
||||
<label><input type="radio" disabled> Radio</label>
|
||||
</div>
|
||||
|
||||
Read-only form controls look like this:
|
||||
|
||||
<div class="input-single">
|
||||
<input type="text" readonly value="This is read-only">
|
||||
</div>
|
||||
|
||||
### Form Control Spacing
|
||||
|
||||
For proper spacing of individual form controls, wrap them in `input-single` containers.
|
||||
|
||||
```html
|
||||
<div class="input-single">
|
||||
<label>Name</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox"> Remember me</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<label>Username</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<label><input type="checkbox"> Remember me</label>
|
||||
</div>
|
||||
|
||||
### Input Groups
|
||||
|
||||
Form controls and buttons can be grouped by wrapping them in `input-group` containers.
|
||||
|
||||
```html
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button" class="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button type="button" class="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button" class="button">Submit</button>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<button type="button" class="button">Option 1</button>
|
||||
<button type="button" class="button">Option 2</button>
|
||||
<button type="button" class="button">Option 3</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Submit</button>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="First">
|
||||
<input type="text" placeholder="Middle">
|
||||
<input type="text" placeholder="Last">
|
||||
<button type="button">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<button type="button">Option 1</button>
|
||||
<button type="button">Option 2</button>
|
||||
<button type="button">Option 3</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Input Addons
|
||||
|
||||
To create an input addon, use `<span class="input-addon">`. Addons can appear anywhere inside an input group. Use the `input-addon-small` and `input-addon-big` modifiers to change the size to match adjacent form controls.
|
||||
|
||||
```html
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-small">$</span>
|
||||
<input type="text" class="input-small">
|
||||
<span class="input-addon input-addon-small">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-addon">.00</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-big">$</span>
|
||||
<input type="text" class="input-big">
|
||||
<span class="input-addon input-addon-big">.00</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-small">$</span>
|
||||
<input type="text" class="input-small">
|
||||
<span class="input-addon input-addon-small">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon">$</span>
|
||||
<input type="text">
|
||||
<span class="input-addon">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-single">
|
||||
<div class="input-group">
|
||||
<span class="input-addon input-addon-big">$</span>
|
||||
<input type="text" class="input-big">
|
||||
<span class="input-addon input-addon-big">.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Form Groups
|
||||
|
||||
Related form controls can be grouped in a `<fieldset>`. An optional `<legend>` can be used to display a name for the group.
|
||||
|
||||
```html
|
||||
<fieldset>
|
||||
<legend>User</legend>
|
||||
...
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
<fieldset>
|
||||
<legend>Login</legend>
|
||||
<div class="input-single">
|
||||
<label>Username</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<label>Password</label>
|
||||
<input type="password">
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<label>
|
||||
<input type="checkbox"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-single">
|
||||
<button type="button">Login</button>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
### Validation
|
||||
|
||||
Form controls can be made valid or invalid using the `input-valid` and `input-invalid` modifiers. It’s better to apply modifiers to the surrounding `input-single` so labels will be styled as well, but modifiers can be applied directly to form controls as needed.
|
||||
|
||||
```html
|
||||
<div class="input-single input-valid">
|
||||
<label>Valid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single input-invalid">
|
||||
<label>Invalid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="two-column">
|
||||
<div class="input-single input-valid">
|
||||
<label>Valid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-single input-invalid">
|
||||
<label>Invalid</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
</div>
|
||||
11
source/docs/grid-system.md
Normal file
11
source/docs/grid-system.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Grid System
|
||||
description: Shoelace doesn’t ship with a grid system because you don’t need one!
|
||||
---
|
||||
|
||||
## Grid System
|
||||
|
||||
Shoelace doesn’t ship with a grid system because [you don’t need one](https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/). You should use the [CSS Grid Layout](https://gridbyexample.com/) instead.
|
||||
|
||||
If you have an obligation to support older browsers, consider using the Bootstrap grid [without any extras](https://github.com/zirafa/bootstrap-grid-only) in combination with Shoelace.
|
||||
11
source/docs/icons.md
Normal file
11
source/docs/icons.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Icons
|
||||
description: Shoelace doesn’t ship with icons, but you can easily add your own!
|
||||
---
|
||||
|
||||
## Icons
|
||||
|
||||
Shoelace doesn’t bundle its own icons, but you can easily include your favorite library such as [Font Awesome](http://fontawesome.io/). They work superbly together.
|
||||
|
||||
This keeps Shoelace light and makes it more customizable.
|
||||
49
source/docs/installing.md
Normal file
49
source/docs/installing.md
Normal file
@@ -0,0 +1,49 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Installing
|
||||
description: How to install Shoelace.css.
|
||||
---
|
||||
|
||||
## Installing
|
||||
|
||||
Shoelace is incredibly easy to use. To get started, simply link to `shoelace.css` in your project. You can use the CDN version or download the source manually.
|
||||
|
||||
To make certain components interactive (e.g. dropdowns and tabs), you’ll need to load [jQuery](https://cdnjs.com/libraries/jquery/) or [Zepto](https://cdnjs.com/libraries/zepto/) along with `shoelace.js`.
|
||||
|
||||
### CDN
|
||||
|
||||
The easiest way to use Shoelace is via CDN. Just add this to the `<head>`:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/{version}/shoelace.css">
|
||||
```
|
||||
|
||||
And this before `</body>` but after jQuery/Zepto:
|
||||
|
||||
```html
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/shoelace-css/{version}/shoelace.js"></script>
|
||||
```
|
||||
|
||||
This service is provided free, courtesy of [CDNJS](https://cdnjs.com/). New releases can take up to 12 hours to appear on the CDN.
|
||||
|
||||
### Download
|
||||
|
||||
Alternatively, you can [download the source](https://github.com/claviska/shoelace-css/releases) and link to `shoelace.css` from your own server. Just add this stylesheet to your `<head>`:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="dist/shoelace.css">
|
||||
```
|
||||
|
||||
And this before `</body>` but after jQuery/Zepto:
|
||||
|
||||
```html
|
||||
<script src="dist/shoelace.js"></script>
|
||||
```
|
||||
|
||||
### NPM
|
||||
|
||||
If you’re using NPM, you can install Shoelace by running:
|
||||
|
||||
```
|
||||
npm install --save-dev shoelace-css
|
||||
```
|
||||
34
source/docs/loaders.md
Normal file
34
source/docs/loaders.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Loaders
|
||||
description: These pure CSS loaders are easy to use and look great.
|
||||
---
|
||||
|
||||
## Loaders
|
||||
|
||||
Create a pure CSS loader by applying the `loader` class to an empty `<span>` element. You can use the `loader-small` and `loader-big` modifiers to change the size.
|
||||
|
||||
```html
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
```
|
||||
<div class="input-single">
|
||||
<span class="loader loader-small"></span>
|
||||
<span class="loader"></span>
|
||||
<span class="loader loader-big"></span>
|
||||
</div>
|
||||
|
||||
You can simulate a background loader using `loader-bg`. This is achieved using `position: relative` on the container and the `::after` pseudo-element. You can use the `loader-bg-small` and `loader-bg-big` modifiers to change the size.
|
||||
|
||||
```html
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
```
|
||||
|
||||
<div class="loader-example clearfix">
|
||||
<div class="loader-bg loader-bg-small"></div>
|
||||
<div class="loader-bg"></div>
|
||||
<div class="loader-bg loader-bg-big"></div>
|
||||
</div>
|
||||
69
source/docs/switches.md
Normal file
69
source/docs/switches.md
Normal file
@@ -0,0 +1,69 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Switches
|
||||
description: These pure CSS switches can be used as a checkbox replacement.
|
||||
---
|
||||
|
||||
## Switches
|
||||
|
||||
Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.
|
||||
|
||||
Because this is a pure CSS solution, there are a couple important things to remember:
|
||||
|
||||
- Each switch must have a unique `id`
|
||||
- The `<label>` must have a `for` attribute that references the switch `id`
|
||||
- The `<label>` must come **after** the checkbox, otherwise the control won’t render
|
||||
|
||||
The markup for a switch looks like this:
|
||||
|
||||
```html
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-1">
|
||||
<label for="switch-1">Option 1</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||||
<label for="switch-2">Option 2</label>
|
||||
</span>
|
||||
```
|
||||
|
||||
<div class="input-single">
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-1">
|
||||
<label for="switch-1">Option 1</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-2" checked>
|
||||
<label for="switch-2">Option 2</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Use the `switch-small` and `switch-big` modifiers to change the size of a switch.
|
||||
|
||||
<div class="input-single">
|
||||
<span class="switch switch-small">
|
||||
<input type="checkbox" class="switch" id="switch-3">
|
||||
<label for="switch-3">Small</label>
|
||||
</span>
|
||||
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" id="switch-4">
|
||||
<label for="switch-4">Normal</label>
|
||||
</span>
|
||||
|
||||
<span class="switch switch-big">
|
||||
<input type="checkbox" class="switch" id="switch-5">
|
||||
<label for="switch-5">Big</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Disabled switches are dimmed out. To disable a switch, add the `disabled` attribute to the checkbox (not the wrapper).
|
||||
|
||||
<div class="input-single">
|
||||
<span class="switch">
|
||||
<input type="checkbox" class="switch" disabled id="switch-6">
|
||||
<label for="switch-6">Disabled</label>
|
||||
</span>
|
||||
</div>
|
||||
101
source/docs/tables.md
Normal file
101
source/docs/tables.md
Normal file
@@ -0,0 +1,101 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Tables
|
||||
description: Shoelace ships with elegant table styles and a handful of modifiers.
|
||||
---
|
||||
|
||||
## Tables
|
||||
|
||||
Tables are styled for you automatically — no special classes required.
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Striped Tables
|
||||
|
||||
Use the `table-striped` modifier to add stripes to alternating rows.
|
||||
|
||||
```html
|
||||
<table class="table-striped">
|
||||
...
|
||||
</table>
|
||||
```
|
||||
|
||||
<table class="table-striped">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Bordered Tables
|
||||
|
||||
Use the `table-bordered` modifier to add a border to the table.
|
||||
|
||||
```html
|
||||
<table class="table-bordered">
|
||||
...
|
||||
</table>
|
||||
```
|
||||
|
||||
<table class="table-bordered">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Hoverable Rows
|
||||
|
||||
Use the `table-hoverable` modifier to enable the hover state on table rows.
|
||||
|
||||
```html
|
||||
<table class="table-hoverable">
|
||||
...
|
||||
</table>
|
||||
```
|
||||
|
||||
<table class="table-hoverable">
|
||||
<thead>
|
||||
<tr><th>Item</th><th>Price</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Shoe Freshener</td><td>$4.79</td></tr>
|
||||
<tr><td>Shoe Glue</td><td>$2.50</td></tr>
|
||||
<tr><td>Shoe Polish</td><td>$5.25</td></tr>
|
||||
<tr><td>Shoelaces</td><td>$3.99</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
150
source/docs/tabs.md
Normal file
150
source/docs/tabs.md
Normal file
@@ -0,0 +1,150 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Tabs
|
||||
description: Add tabs to your app with the tabs component.
|
||||
---
|
||||
|
||||
## Tabs
|
||||
|
||||
Tab sets can be created using the markup below. By default, Shoelace renders tabs as pills because they respond better than traditional tabs when rendered on smaller screens.
|
||||
|
||||
Note the class names used for the main container, the tab navs, and the tab panes. Also note that each tab links to its respective tab pane’s `id`.
|
||||
|
||||
To disable a tab, add `disabled` to the appropriate tab nav.
|
||||
|
||||
```html
|
||||
<div class="tabs">
|
||||
<nav class="tabs-nav">
|
||||
<a href="#tab-1" class="active">Tab 1</a>
|
||||
<a href="#tab-2">Tab 2</a>
|
||||
<a href="#tab-3">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2">
|
||||
...
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
<div class="tabs">
|
||||
<nav class="tabs-nav">
|
||||
<a href="#tab-1-example-1" class="active">Tab 1</a>
|
||||
<a href="#tab-2-example-1">Tab 2</a>
|
||||
<a href="#tab-3-example-1">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1-example-1">
|
||||
<h3>Tab 1</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
|
||||
assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
|
||||
officiis, laudantium debitis! Excepturi, quis!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2-example-1">
|
||||
<h3>Tab 2</h3>
|
||||
<p>
|
||||
Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
|
||||
aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
|
||||
pariatur labore iste vel, velit odit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3-example-1">
|
||||
<h3>Tab 3</h3>
|
||||
<p>
|
||||
Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
|
||||
laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
|
||||
quae necessitatibus, aut dignissimos totam non! Quod.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Vertical Tabs
|
||||
|
||||
Tabs can be made vertical by adding custom CSS rules. Shoelace doesn’t include these styles by default because of the many ways tabs can be positioned, customized, and made responsive.
|
||||
|
||||
Here’s an example of vertical tabs that uses the CSS grid. The markup is exactly the same as the previous example, except the tabs container has a custom class and the following custom styles.
|
||||
|
||||
```css
|
||||
.tabs-vertical-example {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav a {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
<div class="tabs tabs-vertical-example">
|
||||
<nav class="tabs-nav tabs-nav-block">
|
||||
<a href="#tab-1-example-2" class="active">Tab 1</a>
|
||||
<a href="#tab-2-example-2">Tab 2</a>
|
||||
<a href="#tab-3-example-2">Tab 3</a>
|
||||
<a href="#" class="disabled">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tabs-pane active" id="tab-1-example-2">
|
||||
<h3>Tab 1</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui repellat ea magni magnam
|
||||
assumenda voluptas accusantium nemo. Iusto beatae illum mollitia aut quasi odit facilis
|
||||
officiis, laudantium debitis! Excepturi, quis!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-2-example-2">
|
||||
<h3>Tab 2</h3>
|
||||
<p>
|
||||
Atque eius voluptatibus ipsa ex totam odit, quidem illo distinctio sit! Quod quae minus,
|
||||
aut itaque. Mollitia, dolore! Facere molestiae necessitatibus sint recusandae incidunt
|
||||
pariatur labore iste vel, velit odit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tabs-pane" id="tab-3-example-2">
|
||||
<h3>Tab 3</h3>
|
||||
<p>
|
||||
Aperiam asperiores optio iusto qui nisi, perspiciatis, ipsum, tenetur explicabo earum et
|
||||
laboriosam odit magni maxime quos molestias aspernatur laudantium harum placeat tempora
|
||||
quae necessitatibus, aut dignissimos totam non! Quod.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Events
|
||||
|
||||
Tabs require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
|
||||
|
||||
There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
|
||||
|
||||
- `show` – Fires when a tab is shown. The second callback argument is a reference to the respective tab pane.
|
||||
- `hide` – Fires when a tab is hidden. The second callback argument is a reference to the respective tab pane.
|
||||
|
||||
This example will log both events for the tab set with an id of `my-tabs`.
|
||||
|
||||
```javascript
|
||||
$('#my-tabs')
|
||||
.on('show', function(event, tabPane) {
|
||||
console.log('show', event.target, tabPane);
|
||||
})
|
||||
.on('hide', function(event, tabPane) {
|
||||
console.log('hide', event.target, tabPane);
|
||||
});
|
||||
```
|
||||
156
source/docs/utilities.md
Normal file
156
source/docs/utilities.md
Normal file
@@ -0,0 +1,156 @@
|
||||
---
|
||||
layout: default.html
|
||||
title: Utilities
|
||||
description: Use these utilities for quick prototyping.
|
||||
---
|
||||
|
||||
## Utilities
|
||||
|
||||
Shoelace provides a number of helpful utility classes that make prototyping easier.
|
||||
|
||||
### Text Utilities
|
||||
|
||||
Text utilities are classes that can be applied to just about any element. The text inside will be
|
||||
formatted appropriately.
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>`text-success`</td>
|
||||
<td class="text-success">This is success text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-info`</td>
|
||||
<td class="text-info">This is info text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-warning`</td>
|
||||
<td class="text-warning">This is warning text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-danger`</td>
|
||||
<td class="text-danger">This is danger text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-muted`</td>
|
||||
<td class="text-muted">This is muted text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-small`</td>
|
||||
<td class="text-small">This is small text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-bold`</td>
|
||||
<td class="text-bold">This is bold text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-italic`</td>
|
||||
<td class="text-italic">This is italic text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-left`</td>
|
||||
<td class="text-left">This is left-aligned text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-center`</td>
|
||||
<td class="text-center">This is centered text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-right`</td>
|
||||
<td class="text-right">This is right-aligned text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-justify`</td>
|
||||
<td class="text-justify">This is justified text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-nowrap`</td>
|
||||
<td class="text-nowrap">This is text that won’t wrap</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-lowercase`</td>
|
||||
<td class="text-lowercase">This is lowercase text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-uppercase`</td>
|
||||
<td class="text-uppercase">This is uppercase text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>`text-capitalize`</td>
|
||||
<td class="text-capitalize">This is capitalized text</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
### Float Utilities
|
||||
Float utilities are provided to easily float elements to the left or right. Just apply the `float-left` or `float-right` class to an element to float it left or right.
|
||||
|
||||
A clearfix utility is also available to clear floated elements. Just apply the `clearfix` class to the appropriate element.
|
||||
|
||||
### Sizing Utilities
|
||||
|
||||
Sizing utilities can be used to set a relative width or height on any element. Just apply a `width-*` or `height-*` class and the appropriate element will be sized accordingly. Sizes are available as percentages from 0 – 100 in multiples of five.
|
||||
|
||||
```html
|
||||
<div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
<div class="width-75">75%</div>
|
||||
<div class="width-100">100%</div>
|
||||
|
||||
<div class="height-25">25%</div>
|
||||
<div class="height-50">50%</div>
|
||||
<div class="height-75">75%</div>
|
||||
<div class="height-100">100%</div>
|
||||
```
|
||||
|
||||
<div class="width-sizing-example">
|
||||
<div class="width-25">25%</div>
|
||||
<div class="width-50">50%</div>
|
||||
<div class="width-75">75%</div>
|
||||
<div class="width-100">100%</div>
|
||||
</div>
|
||||
|
||||
<div class="height-sizing-example">
|
||||
<div class="height-25">25%</div>
|
||||
<div class="height-50">50%</div>
|
||||
<div class="height-75">75%</div>
|
||||
<div class="height-100">100%</div>
|
||||
</div>
|
||||
|
||||
### Spacing Utilities
|
||||
|
||||
Spacing utilities can be used to add or remove paddings and margins to any element. Just apply the desired class and the appropriate element will receive the respective padding/margin.
|
||||
|
||||
Class names are prefixed with `padding-` or `margin-` for padding and margin, respectively. To apply spacing to all sides of an element, use the following classes:
|
||||
|
||||
```
|
||||
padding-[none|small|medium|big]
|
||||
margin-[none|small|medium|big]
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div class="padding-none margin-big">
|
||||
```
|
||||
|
||||
To apply spacing to a specific side of an element, use one or more of the following classes:
|
||||
|
||||
```
|
||||
padding-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
margin-[top|right|bottom|left|x|y]-[none|small|medium|big]
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<div class="padding-left-medium margin-bottom-none">
|
||||
```
|
||||
|
||||
You can also use `margin-[x|y|xy]-auto` to set automatic margins horizontally and/or vertically.
|
||||
90
source/layouts/default.html
Normal file
90
source/layouts/default.html
Normal file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<meta name="description" content="{{description}}">
|
||||
<link rel="icon" href="../source/img/favicon.png">
|
||||
<link rel="stylesheet" href="../source/css/shoelace.css">
|
||||
<link rel="stylesheet" href="../source/css/_docs.css">
|
||||
<link rel="stylesheet" href="https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css">
|
||||
<title>{{title}}</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="head" class="text-center">
|
||||
<h1>
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
</h1>
|
||||
<p class="text-muted text-small">
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<main id="wrap">
|
||||
<nav id="nav">
|
||||
<a href="installing.html">Installing</a>
|
||||
<a href="customizing.html">Customizing</a>
|
||||
<a href="content.html">Content</a>
|
||||
<a href="alerts.html">Alerts</a>
|
||||
<a href="badges.html">Badges</a>
|
||||
<a href="buttons.html">Buttons</a>
|
||||
<a href="dropdowns.html">Dropdowns</a>
|
||||
<a href="forms.html">Forms</a>
|
||||
<a href="loaders.html">Loaders</a>
|
||||
<a href="switches.html">Switches</a>
|
||||
<a href="tabs.html">Tabs</a>
|
||||
<a href="tables.html">Tables</a>
|
||||
<a href="utilities.html">Utilities</a>
|
||||
<a href="grid-system.html">Grid System</a>
|
||||
<a href="icons.html">Icons</a>
|
||||
<a href="browser-support.html">Browser Support</a>
|
||||
<a href="attribution.html">Attribution</a>
|
||||
</nav>
|
||||
|
||||
<div id="content">
|
||||
{{{contents}}}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer id="foot">
|
||||
<a href="../index.html">
|
||||
<img src="../source/img/wordmark.svg" alt="Shoelace logo">
|
||||
</a>
|
||||
<p class="text-small text-muted">
|
||||
Shoelace.css {version} ·
|
||||
© A Beautiful Site, LLC
|
||||
</p>
|
||||
|
||||
<p class="margin-y-small text-center">
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/fork" data-size="large" aria-label="Fork claviska/shoelace-css on GitHub">Fork</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/releases" data-icon="octicon-cloud-download" data-size="large" aria-label="Download claviska/shoelace-css on GitHub">Download</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css/issues" data-icon="octicon-issue-opened" data-size="large" aria-label="Issue claviska/shoelace-css on GitHub">Report a Bug</a>
|
||||
<a class="github-button" href="https://github.com/claviska/shoelace-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star claviska/shoelace-css on GitHub">Star</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://twitter.com/shoelacecss" class="button button-info" style="margin-bottom: 1.2rem;">Follow</a>
|
||||
<a href="https://paypal.me/claviska" class="button button-success" style="margin-bottom: 1.2rem;">Donate</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
|
||||
<script src="../source/js/dropdowns.js"></script>
|
||||
<script src="../source/js/tabs.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
// Highlight current nav item
|
||||
$('#nav a').each(function() {
|
||||
if(this.pathname === location.pathname) {
|
||||
$(this).addClass('current');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user