diff options
Completely rewritten Docs experience
1 files changed, 547 insertions, 0 deletions
| -rw-r--r-- | docs/getting-started.html | 547 |
diff --git a/docs/getting-started.html b/docs/getting-started.html new file mode 100644 index 0000000..d955983 --- /dev/null +++ b/docs/getting-started.html @@ -0,0 +1,547 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="robots" content="index, follow" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="author" content="https://github.com/picturepan2/" /> + <title>Getting started - Spectre.css</title> + <link rel="stylesheet" href="dist/spectre.css" /> + <link rel="stylesheet" href="dist/spectre-icons.css" /> + <link rel="stylesheet" href="css/docs.css" /> +</head> +<body> + <div class="container"> + <div class="columns"> + <div id="sidebar" class="s-sidebar"> + <div class="s-brand"> + <a href="index.html" class="s-logo"> + <img src="img/spectre-logo.svg" alt="Spectre.css" /> + <h2>Spectre.css</h2> + </a> + </div> + <div class="float-btn"> + <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a> + </div> + <div class="s-nav"> + <div class="accordion"> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked /> + <label class="accordion-header hand" for="docs-accordion-1"> + Getting started + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="getting-started.html#introduction">Introduction</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#installation">Installation</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#compiling">Custom version</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#browsers">Browser support</a> + </li> + <li class="menu-item"> + <a href="getting-started.html#whatsnew">What's new</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-2"> + Elements + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="elements.html#typography">Typography</a> + </li> + <li class="menu-item"> + <a href="elements.html#tables">Tables</a> + </li> + <li class="menu-item"> + <a href="elements.html#buttons">Buttons</a> + </li> + <li class="menu-item"> + <a href="elements.html#forms">Forms</a> + </li> + <li class="menu-item"> + <a href="elements.html#icons">Icons</a> + </li> + <li class="menu-item"> + <a href="elements.html#labels">Labels</a> + </li> + <li class="menu-item"> + <a href="elements.html#codes">Codes</a> + </li> + <li class="menu-item"> + <a href="elements.html#media">Media</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-3"> + Layout + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="layout.html#grid">Flexbox grid</a> + </li> + <li class="menu-item"> + <a href="layout.html#responsive">Responsive</a> + </li> + <li class="menu-item"> + <a href="layout.html#navbar">Navbar</a> + </li> + <li class="menu-item"> + <a href="layout.html#panels">Panels</a> + </li> + <li class="menu-item"> + <a href="layout.html#empty">Empty states</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-4"> + Components + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="components.html#accordions">Accordions</a> + </li> + <li class="menu-item"> + <a href="components.html#autocomplete">Autocomplete</a> + </li> + <li class="menu-item"> + <a href="components.html#avatars">Avatars</a> + </li> + <li class="menu-item"> + <a href="components.html#badges">Badges</a> + </li> + <li class="menu-item"> + <a href="components.html#bars">Bars</a> + </li> + <li class="menu-item"> + <a href="components.html#breadcrumbs">Breadcrumbs</a> + </li> + <li class="menu-item"> + <a href="components.html#cards">Cards</a> + </li> + <li class="menu-item"> + <a href="components.html#chips">Chips</a> + </li> + <li class="menu-item"> + <a href="components.html#menus">Menus</a> + </li> + <li class="menu-item"> + <a href="components.html#modals">Modals</a> + </li> + <li class="menu-item"> + <a href="components.html#navs">Navs</a> + </li> + <li class="menu-item"> + <a href="components.html#pagination">Pagination</a> + </li> + <li class="menu-item"> + <a href="components.html#popovers">Popovers</a> + </li> + <li class="menu-item"> + <a href="components.html#steps">Steps</a> + </li> + <li class="menu-item"> + <a href="components.html#tabs">Tabs</a> + </li> + <li class="menu-item"> + <a href="components.html#tiles">Tiles</a> + </li> + <li class="menu-item"> + <a href="components.html#toasts">Toasts</a> + </li> + <li class="menu-item"> + <a href="components.html#tooltips">Tooltips</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-5"> + Utilities + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="utilities.html#colors">Colors</a> + </li> + <li class="menu-item"> + <a href="utilities.html#display">Display</a> + </li> + <li class="menu-item"> + <a href="utilities.html#divider">Divider</a> + </li> + <li class="menu-item"> + <a href="utilities.html#loading">Loading</a> + </li> + <li class="menu-item"> + <a href="utilities.html#position">Position</a> + </li> + <li class="menu-item"> + <a href="utilities.html#shapes">Shapes</a> + </li> + <li class="menu-item"> + <a href="utilities.html#text">Text</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden /> + <label class="accordion-header hand" for="docs-accordion-6"> + Experimentals + </label> + <div class="accordion-body"> + <ul class="menu menu-nav"> + <li class="menu-item"> + <a href="experimentals.html#calendars">Calendars</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#carousels">Carousels</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#comparison">Comparison sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#filters">Filters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#meters">Meters</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#parallax">Parallax</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#progress">Progress</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#sliders">Sliders</a> + </li> + <li class="menu-item"> + <a href="experimentals.html#timelines">Timelines</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + <a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a> + + <div class="s-content"> + <div id="introduction" class="container"> + <h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3> + <div class="notes"> + <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p> + <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p> + </div> + </div> + + <div id="installation" class="container"> + <h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3> + <div class="notes"> + <p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.</p> + </div> + <div class="notes"> + <h5>Install manually</h5> + <p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank">Spectre CSS file</a> (~10KB min+gzip):</p> + <p><a href="https://github.com/picturepan2/spectre/tree/master/docs/dist" target="_blank" class="btn btn-primary">Download Spectre.css</a></p> + <p>Include <code>spectre.css</code> located in <strong>/docs/dist</strong> in your website or Web app <head>. Also, you can add <code>spectre-icons.css</code> and <code>spectre-exp.css</code> accordingly.</p> + </div> + +<!-- install manually example --> +<pre class="code"><code><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"spectre.min.css"</span> /> +<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"spectre-exp.min.css"</span> /> +<<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"spectre-icons.min.css"</span> /> +</code></pre> + + <div class="notes"> + <h5>Install from CDN</h5> + <p>Alternatively, you can use the <a href="https://unpkg.com/" target="_blank">unpkg</a> CDN to load compiled Spectre.css.</p> + </div> + +<!-- install from CDN example --> +<pre class="code"><code><<span class="tag">link</span> <span class="atn">rel</span>=<span class="atv">"stylesheet"</span> <span class="atn">href</span>=<span class="atv">"https://unpkg.com/spectre.css/dist/spectre.min.css"</span> /> +</code></pre> + + <div class="notes"> + <h5>Install with NPM</h5> + +<!-- install with npm example --> +<pre class="code"><code><span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save +</code></pre> + + </div> + <div class="notes"> + <h5>Install with Yarn</h5> + +<!-- install with yarn example --> +<pre class="code"><code><span class="tag">$</span> yarn add <span class="atv">spectre.css</span> +</code></pre> + + </div> + <div class="notes"> + <h5>Install with Bower</h5> + +<!-- install with bower example --> +<pre class="code"><code><span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save +</code></pre> + + </div> + </div> + + <div id="compiling" class="container"> + <h3 class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3> + <div class="notes"> + <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p> + <p>Then, you can build the CSS file from the command line:</p> + <ol> + <li>Navigate to the root directory of Spectre.</li> + <li>Run <code>npm install</code>. NPM will install all dev dependencies as listed in package.json.</li> + <li>When completed, run <code>gulp build</code> to compile LESS to CSS and minify files.</li> + <li>You can find compiled CSS files in <code>/dist</code> directory.</li> + </ol> + <p>You can watch file changes and rebuild CSS files by using <code>gulp watch</code>.</p> + </div> + +<!-- file structure --> +<pre class="code"><code>spectre/ +├── dist/ <span class="com">// Build folder (Git ignored)</span> +│ ├── spectre-exp.css +│ ├── spectre-exp.min.css +│ ├── spectre-icons.css +│ ├── spectre-icons.min.css +│ ├── spectre.css +│ └── spectre.min.css +│ +├── docs/ +│ ├── dist/ <span class="com">// Pre-built CSS folder</span> +│ │ ├── spectre-exp.css +│ │ ├── spectre-exp.min.css +│ │ ├── spectre-icons.css +│ │ ├── spectre-icons.min.css +│ │ ├── spectre.css +│ │ └── spectre.min.css +| ├── css/ <span class="com">// Docs CSS file</span> +│ │ └── docs.css +| ├── src/ +│ │ └── docs.less +│ ├── ../ +│ ├── index.html +│ └── ... +│ +├── src/ <span class="com">// Source LESS files</span> +│ ├── mixins.less +│ ├── variables.less +│ └── ... +│ +├── spectre-exp.less +├── spectre-icons.less +└── spectre.less +</code></pre> + + <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4> + <div class="notes"> + <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design. + <h5>Colors</h5> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#5764c6;color:#fff;"> + <div class="color-title">#5764c6</div> + <div class="color-subtitle">Primary</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#eff1fa;color:#5764c6;"> + <div class="color-title">#eff1fa</div> + <div class="color-subtitle">Secondary</div> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#454d5d;color:#fff;"> + <div class="color-title">#454d5d</div> + <div class="color-subtitle">Dark</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#727e96;color:#fff;"> + <div class="color-title">#727e96</div> + <div class="color-subtitle">Gray dark</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#acb3c2;color:#fff;"> + <div class="color-title">#acb3c2</div> + <div class="color-subtitle">Gray</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e7e9ed;color:#727e96;"> + <div class="color-title">#e7e9ed</div> + <div class="color-subtitle">Gray light</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f0f1f4;color:#727e96;"> + <div class="color-title">#f0f1f4</div> + <div class="color-subtitle">Border</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#f8f9fa;color:#727e96;"> + <div class="color-title">#f8f9fa</div> + <div class="color-subtitle">Background</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#fff;color:#727e96;"> + <div class="color-title">#fff</div> + <div class="color-subtitle">Light</div> + </div> + </div> + </div> + <div class="columns"> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#32b643;color:#fff;"> + <div class="color-title">#32b643</div> + <div class="color-subtitle">Success</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#ffb700;color:#fff;"> + <div class="color-title">#ffb700</div> + <div class="color-subtitle">Warning</div> + </div> + </div> + <div class="column col-3 col-md-6"> + <div class="docs-color" style="background:#e85600;color:#fff;"> + <div class="color-title">#e85600</div> + <div class="color-subtitle">Error</div> + </div> + </div> + </div> + </div> + </div> + + <div id="accessibility" class="container"> + <h3 class="s-title"><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3> + </div> + + <div id="browsers" class="container"> + <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3> + <div class="notes"> + <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p> + <ul> + <li>Chrome <small class="label label-success">LAST 4</small></li> + <li>Microsoft Edge <small class="label label-success">LAST 4</small></li> + <li>Firefox <small class="label label-success">LAST 4</small></li> + <li>Safari <small class="label label-success">LAST 4</small></li> + <li>Opera <small class="label label-success">LAST 4</small></li> + <li>Internet Explorer 10+</li> + </ul> + </div> + </div> + + <div id="whatsnew" class="container"> + <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3> + <div class="notes"> + <p><strong>April 2017</strong></p> + <ul> + <li> + <a href="components.html#accordions">Accordions</a>: used to toggle sections of content <small class="label label-primary">NEW</small> + </li> + <li> + <a href="experimentals.html#filters">Filters</a>: CSS only content filters <small class="label label-primary">NEW</small> + </li> + <li> + <a href="experimentals.html#comparison">Comparison Sliders</a>: sliders for comparing two images <small class="label label-primary">NEW</small> + </li> + <li> + <a href="experimentals.html#timelines">Timelines</a>: ordered sequences of activities <small class="label label-primary">NEW</small> + </li> + </ul> + <p><strong>March 2017</strong></p> + <ul> + <li> + <a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons <small class="label label-primary">NEW</small> + </li> + <li> + <a href="components.html#popovers">Popovers</a>: small overlay content containers + </li> + <li> + <a href="layout.html#panels">Panels</a>: flexible view container layout with auto-expand content section + </li> + <li> + <a href="experimentals.html#carousels">Carousels</a>: slideshows for cycling images + </li> + <li> + <a href="experimentals.html#calendars">Calendars</a>: date or date range picker and events display + </li> + </ul> + <p><strong>February 2017</strong></p> + <ul> + <li>New Documents experience</li> + <li> + <a href="components.html#bars">Bars</a>: represent the progress of a task or the value within the known range + </li> + <li> + <a href="components.html#steps">Steps</a>: progress indicators of a sequence of task steps + </li> + <li> + <a href="components.html#tiles">Tiles</a>: repeatable or embeddable information blocks + </li> + <li> + <a href="experimentals.html">Experimentals</a>: experimental elements and features + </li> + <li> + <a href="experimentals.html#meters">Meters</a>, <a href="experimentals.html#parallax">Parallax</a>, <a href="experimentals.html#progress">Progress</a> and <a href="experimentals.html#sliders">Sliders</a> + </li> + </ul> + <p><strong>March 2016</strong></p> + <ul> + <li>Initial commit</li> + </ul> + </div> + </div> + + <footer class="s-footer"> + <p><a href="index.html#introduction" target="_blank">Documents</a> | <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p> + <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> + </footer> + + </div> + </div> + </div> + + <script> + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-2702768-8', 'auto'); + ga('send', 'pageview'); + </script> +</body> +</html> |