You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
333 lines
14 KiB
HTML
333 lines
14 KiB
HTML
<!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>Spectre RTL (Right-to-left) - Spectre.css CSS Framework</title>
|
|
<link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
|
|
<link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
|
|
<link rel="stylesheet" href="dist/spectre-rtl.min.css">
|
|
<link rel="stylesheet" href="dist/docs.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="docs-container off-canvas off-canvas-sidebar-show">
|
|
<div class="docs-navbar">
|
|
<a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
|
|
<i class="icon icon-menu"></i>
|
|
</a>
|
|
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
|
|
</div>
|
|
|
|
<div id="sidebar" class="docs-sidebar off-canvas-sidebar">
|
|
<div class="docs-brand">
|
|
<a href="index.html" class="docs-logo">
|
|
<img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
|
|
<h2>SPECTRE</h2>
|
|
</a>
|
|
</div>
|
|
<div class="docs-nav">
|
|
<div class="accordion-container">
|
|
<div class="accordion">
|
|
<input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden checked>
|
|
<label class="accordion-header c-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</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="getting-started.html#installation">Installation</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="getting-started.html#custom">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">
|
|
<input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
|
|
<label class="accordion-header c-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</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">
|
|
<input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
|
|
<label class="accordion-header c-hand" for="docs-accordion-3">
|
|
Layout
|
|
</label>
|
|
<div class="accordion-body">
|
|
<ul class="menu menu-nav">
|
|
<li class="menu-item">
|
|
<a href="layout.html">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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="accordion">
|
|
<input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden>
|
|
<label class="accordion-header c-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</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#empty">Empty states</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#panels">Panels</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">
|
|
<input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
|
|
<label class="accordion-header c-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</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="utilities.html#cursors">Cursors</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">
|
|
<input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
|
|
<label class="accordion-header c-hand" for="docs-accordion-6">
|
|
Experimentals
|
|
</label>
|
|
<div class="accordion-body">
|
|
<ul class="menu menu-nav">
|
|
<li class="menu-item">
|
|
<a href="experimentals.html">Autocomplete</a>
|
|
</li>
|
|
<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#off-canvas">Off-canvas</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 class="off-canvas-overlay" href="#close"></a>
|
|
|
|
<div id="content" class="docs-content off-canvas-content">
|
|
<div id="introduction" class="container">
|
|
<h3 class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
|
|
<div class="docs-note">
|
|
<p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="docs-ad">
|
|
<div class="hide-md">
|
|
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
|
<!-- GitHub-lg -->
|
|
<ins class="adsbygoogle"
|
|
style="display:inline-block;width:728px;height:90px"
|
|
data-ad-client="ca-pub-2225124559530218"
|
|
data-ad-slot="9894180784"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
<div class="show-md">
|
|
<!-- GitHub-sm -->
|
|
<ins class="adsbygoogle"
|
|
style="display:inline-block;width:300px;height:250px"
|
|
data-ad-client="ca-pub-2225124559530218"
|
|
data-ad-slot="9278881734"></ins>
|
|
<script>
|
|
(adsbygoogle = window.adsbygoogle || []).push({});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="installation" class="container">
|
|
<h3 class="s-title"><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3>
|
|
<div class="docs-note">
|
|
<p>There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use package managers.</p>
|
|
</div>
|
|
<div class="docs-note">
|
|
<p class="h5">Install manually</p>
|
|
<p>Download the compiled and minified <a href="https://github.com/picturepan2/spectre/releases" target="_blank">Spectre CSS file</a> (core ~10KB min+gzip):</p>
|
|
<p><a href="https://github.com/picturepan2/spectre/releases" target="_blank" class="btn btn-primary">Download Spectre.css</a></p>
|
|
<p>Include <code>spectre.css</code> located in <strong>/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>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="docs-ad docs-ad-sidebar">
|
|
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="docs-footer">
|
|
<p><a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</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 <span class="text-error">♥</span> 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>
|
|
|
|
<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>
|