mirror of
https://github.com/shoelace-style/shoelace.git
synced 2026-01-12 11:09:13 +00:00
235 lines
8.5 KiB
HTML
235 lines
8.5 KiB
HTML
<!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="../dist/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-secondary 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="progress-bars.html">Progress Bars</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 provides default content styles that are easy to customize. 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. Shoelace also sets <code>box-sizing: border-box</code> globally to make it easier to properly size elements.</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="horizontal-rules-hr-">Horizontal Rules <code><hr></code></h3>
|
||
<hr>
|
||
<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-secondary">
|
||
1.0.0-beta16
|
||
</p>
|
||
|
||
<p class="mar-y-sm 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>
|
||
|
||
<p class="text-small text-secondary">
|
||
<a href="https://keycdn.com/" class="text-secondary">Accelerated by KeyCDN</a> ·
|
||
© A Beautiful Site, LLC
|
||
</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="../dist/shoelace.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>
|