diff options
New Docs category pages
1 files changed, 55 insertions, 24 deletions
| -rw-r--r-- | docs/getting-started.html | 79 |
diff --git a/docs/getting-started.html b/docs/getting-started.html index 2ec4d96..bc0dc8a 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -186,40 +186,71 @@ </div><a class="off-canvas-overlay" href="#close"></a> <div class="off-canvas-content"> <div class="docs-content" id="content"> - <div class="container" id="introduction"> - <h3 class="s-title">Introduction<a class="anchor" href="#introduction" aria-hidden="true">#</a></h3> - <p> </p><strong>Spectre.css </strong>is a lightweight, 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, pure CSS components and utilities with best practice coding and consistent design language. - <div class="columns"> - <div class="column"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"><i class="icon icon-mail centered"></i></div> - </div> - <div class="tile-content"> - <div class="tile-title">spectre-docs.pdf</div> - <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + <div class="container" id="getting-started"> + <h3 class="s-title">Getting started<a class="anchor" href="#getting-started" aria-hidden="true">#</a></h3> + <div class="docs-ad"> + <div class="hide-md text-center"> + <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> + <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" 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 text-center"> + <!-- 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> + <p> <strong>Spectre.css </strong>is a lightweight, 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, pure CSS components and utilities with best practice coding and consistent design language.</p> + <div class="docs-demo columns"> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Installation</div> </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + <div class="card-body">How to install and use Spectre.css</div> + <div class="card-footer"><a class="btn btn-primary" href="getting-started/installation.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Custom version</div> </div> + <div class="card-body">Customize your version of Spectre.css</div> + <div class="card-footer"><a class="btn btn-primary" href="getting-started/custom.html">View</a></div> </div> </div> - <div class="column"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"><i class="icon icon-mail centered"></i></div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Browser support</div> </div> - <div class="tile-content"> - <div class="tile-title">spectre-docs.pdf</div> - <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> + <div class="card-body">Browser compatibility and support</div> + <div class="card-footer"><a class="btn btn-primary" href="getting-started/browsers.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">What's new</div> </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> + <div class="card-body">Changelog and release notes</div> + <div class="card-footer"><a class="btn btn-primary" href="getting-started/whatsnew.html">View</a></div> + </div> + </div> + <div class="column col-6 col-xs-12"> + <div class="card"> + <div class="card-header"> + <div class="card-title h5">Accessibility</div> </div> + <div class="card-body">Coming soon</div> </div> </div> </div> + <div class="docs-ad docs-ad-sidebar text-center"> + <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> + </div> </div> <div class="docs-footer container grid-lg" id="copyright"> <p><a href="getting-started.html" target="_blank">Documents</a> · <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> |