Skip to content

Commit

Permalink
Move Panels and Empty states to Components from Layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 16, 2017
1 parent 82e0eef commit b56b14d
Show file tree
Hide file tree
Showing 9 changed files with 420 additions and 412 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities
- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites
- [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section
- [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens

#### Components
- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content
Expand All @@ -67,10 +65,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
- [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range
- [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers
- [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks
- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens
- [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation
- [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links
- [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts
- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages
- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section
- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers
- [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps
- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views
Expand Down
334 changes: 281 additions & 53 deletions docs/components.html
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,6 +405,7 @@
}
.s-content .s-title,
.s-content .s-subtitle {
padding-top: 5rem;
position: static;
}
.s-content .s-title::before,
Expand Down
84 changes: 42 additions & 42 deletions docs/elements.html
View file

Large diffs are not rendered by default.

54 changes: 27 additions & 27 deletions docs/experimentals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,6 @@ <h2>Spectre.css</h2>
<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>
Expand Down Expand Up @@ -145,6 +139,9 @@ <h2>Spectre.css</h2>
<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>
Expand All @@ -157,6 +154,9 @@ <h2>Spectre.css</h2>
<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>
Expand Down Expand Up @@ -252,15 +252,15 @@ <h2>Spectre.css</h2>
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>

<div id="content" class="s-content">
<div id="experimentals" class="container">
<h3 class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
<div class="container">
<h3 id="experimentals" class="s-title"><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3>
<div class="docs-note">
<p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
</div>
</div>

<div id="calendars" class="container">
<h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
<div class="container">
<h3 id="calendars" class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3>
<div class="docs-note">
<p>Calendars are designed for date or date range picker and events display. It is made with flex layout.</p>
</div>
Expand Down Expand Up @@ -328,7 +328,7 @@ <h3 class="s-title"><a href="#calendars" class="anchor" aria-hidden="true">#</a>
</div>
</div>

<h4 class="s-subtitle">Calendars large</h4>
<h4 id="calendars-sizes" class="s-subtitle">Calendars sizes</h4>
<div class="columns">
<div class="column col-12">
<div class="calendar calendar-lg">
Expand Down Expand Up @@ -422,8 +422,8 @@ <h4 class="s-subtitle">Calendars large</h4>

</div>

<div id="carousels" class="container">
<h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
<div class="container">
<h3 id="carousels" class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3>
<div class="docs-note">
<p>Carousels are slideshows for cycling images. It is built in pure CSS.</p>
</div>
Expand Down Expand Up @@ -487,8 +487,8 @@ <h3 class="s-title"><a href="#carousels" class="anchor" aria-hidden="true">#</a>

</div>

<div id="comparison" class="container">
<h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
<div class="container">
<h3 id="comparison" class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3>
<div class="docs-note">
<p>Comparison Sliders are sliders for comparing two images. It is built in pure CSS.</p>
</div>
Expand Down Expand Up @@ -525,8 +525,8 @@ <h3 class="s-title"><a href="#comparison" class="anchor" aria-hidden="true">#</a

</div>

<div id="filters" class="container">
<h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
<div class="container">
<h3 id="filters" class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3>
<div class="docs-note">
<p>Filters are CSS only content filters.</p>
</div>
Expand Down Expand Up @@ -674,8 +674,8 @@ <h3 class="s-title"><a href="#filters" class="anchor" aria-hidden="true">#</a>Fi

</div>

<div id="meters" class="container">
<h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
<div class="container">
<h3 id="meters" class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3>
<div class="docs-note">
<p>Meters represent the value within the known range.</p>
</div>
Expand Down Expand Up @@ -709,8 +709,8 @@ <h3 class="s-title"><a href="#meters" class="anchor" aria-hidden="true">#</a>Met

</div>

<div id="parallax" class="container">
<h3 class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
<div class="container">
<h3 id="parallax" class="s-title"><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3>
<div class="docs-note">
<p>The Parallax acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
</div>
Expand Down Expand Up @@ -752,8 +752,8 @@ <h2>tvOS parallax demo</h2>

</div>

<div id="progress" class="container">
<h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
<div class="container">
<h3 id="progress" class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3>
<div class="docs-note">
<p>The Progress indicates the progress completion of a task.</p>
</div>
Expand All @@ -779,8 +779,8 @@ <h3 class="s-title"><a href="#progress" class="anchor" aria-hidden="true">#</a>P

</div>

<div id="sliders" class="container">
<h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
<div class="container">
<h3 id="sliders" class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3>
<div class="docs-note">
<p>Sliders are for selecting values from ranges.</p>
</div>
Expand All @@ -799,8 +799,8 @@ <h3 class="s-title"><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sl

</div>

<div id="timelines" class="container">
<h3 class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
<div class="container">
<h3 id="timelines" class="s-title"><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3>
<div class="docs-note">
<p>Timelines are ordered sequences of activities.</p>
</div>
Expand Down
50 changes: 28 additions & 22 deletions docs/getting-started.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,6 @@ <h2>Spectre.css</h2>
<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>
Expand Down Expand Up @@ -144,6 +138,9 @@ <h2>Spectre.css</h2>
<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>
Expand All @@ -156,6 +153,9 @@ <h2>Spectre.css</h2>
<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>
Expand Down Expand Up @@ -251,16 +251,16 @@ <h2>Spectre.css</h2>
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>

<div id="content" 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="container">
<h3 id="introduction" class="s-title"><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3>
<div class="docs-note">
<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="container">
<h3 id="installation" 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 NPM, Yarn and Bower.</p>
</div>
Expand Down Expand Up @@ -312,8 +312,8 @@ <h5>Install with Bower</h5>
</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="container">
<h3 id="compiling" class="s-title"><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3>
<div class="docs-note">
<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>
Expand Down Expand Up @@ -366,7 +366,7 @@ <h4 id="variables" class="s-subtitle"><a href="#variables" class="anchor" aria-h
<div class="docs-note">
<p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.</p>
</div>
<h5 class="s-subtitle">Colors</h5>
<h5 id="variables-colors" class="s-subtitle">Colors</h5>
<div class="columns">
<div class="column col-3 col-md-6">
<div class="docs-color" style="background:#5764c6;color:#fff;">
Expand Down Expand Up @@ -445,13 +445,13 @@ <h5 class="s-subtitle">Colors</h5>
</div>
</div>
</div>
<h5 class="s-subtitle">Sizes</h5>
<h5 id="variables-sizes" class="s-subtitle">Sizes</h5>
<div class="docs-note">
<p>The default REM (root em) size in Spectre.css is <code>20px</code>. </p>
<p>Please note in the Chinese/Japanese/Korean version, Chrome uses 12px as default minimum font size. That is why Spectre sets rem default html font size to <code>20px</code>, which is relatively easy to calculate. </p>
<p>Spectre uses <code>4px</code> as the unit size. Sizes of components are based on the unit size. </p>
</div>
<h5 class="s-subtitle">Custom prefix</h5>
<h5 id="variables-custom-prefix" class="s-subtitle">Custom prefix</h5>
<div class="docs-note">
<p>There is also a way to add custom prefix to all CSS classes. You can use <a href="https://www.npmjs.com/package/gulp-css-prefix" target="_blank">gulp-css-prefix</a> plugin and add a new Gulp task to enable it. </p>
</div>
Expand Down Expand Up @@ -479,12 +479,12 @@ <h5 class="s-subtitle">Custom prefix</h5>
</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 class="container">
<h3 id="accessibility" 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="container">
<h3 id="browsers" class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3>
<div class="docs-note">
<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>
Expand All @@ -498,9 +498,15 @@ <h3 class="s-title"><a href="#browsers" class="anchor" aria-hidden="true">#</a>B
</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="container">
<h3 id="whatsnew" class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3>
<div class="docs-note">
<p><strong>August 2017</strong></p>
<ul>
<li>
<a href="getting-started.html">New Docs Experience</a> <small class="label label-primary">NEW</small>
</li>
</ul>
<p><strong>April 2017</strong></p>
<ul>
<li>
Expand All @@ -519,7 +525,7 @@ <h3 class="s-title"><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>W
<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>
<a href="elements.html#icons">Icons</a>: single-element, responsive and pure CSS icons
</li>
<li>
<a href="components.html#popovers">Popovers</a>: small overlay content containers
Expand Down
Loading

0 comments on commit b56b14d

Please sign in to comment.