Skip to content

Commit

Permalink
Add Grid offset, more margin and padding utilities
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Aug 17, 2017
1 parent b56b14d commit 41ec3e4
Show file tree
Hide file tree
Showing 15 changed files with 548 additions and 381 deletions.
115 changes: 56 additions & 59 deletions docs/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,8 +251,8 @@ <h2>Spectre.css</h2>
<a href="#sidebar-close" id="sidebar-close" class="docs-nav-clear"></a>

<div id="content" class="s-content">
<div class="container">
<h3 id="accordions" class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
<div id="accordions" class="container">
<h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
<div class="docs-note">
<p>Accordions are used to toggle sections of content.</p>
</div>
Expand Down Expand Up @@ -402,8 +402,8 @@ <h3 id="accordions" class="s-title"><a href="#accordions" class="anchor" aria-hi

</div>

<div class="container">
<h3 id="autocomplete" class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
<div id="autocomplete" class="container">
<h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
<div class="docs-note">
<p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
</div>
Expand Down Expand Up @@ -529,8 +529,8 @@ <h3 id="autocomplete" class="s-title"><a href="#autocomplete" class="anchor" ari

</div>

<div class="container">
<h3 id="avatars" class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
<div id="avatars" class="container">
<h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
<div class="docs-note">
<p>Avatars are user profile pictures. </p>
</div>
Expand Down Expand Up @@ -610,8 +610,8 @@ <h3 id="avatars" class="s-title"><a href="#avatars" class="anchor" aria-hidden="

</div>

<div class="container">
<h3 id="badges" class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
<div id="badges" class="container">
<h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
<div class="docs-note">
<p>Badges are often used as unread number indicators.</p>
</div>
Expand Down Expand Up @@ -686,8 +686,8 @@ <h3 id="badges" class="s-title"><a href="#badges" class="anchor" aria-hidden="tr

</div>

<div class="container">
<h3 id="bars" class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
<div id="bars" class="container">
<h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
<div class="docs-note">
<p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
</div>
Expand Down Expand Up @@ -781,8 +781,8 @@ <h4 id="bars-slider" class="s-subtitle">Slider bars</h4>

</div>

<div class="container">
<h3 id="breadcrumbs" class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
<div id="breadcrumbs" class="container">
<h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
<div class="docs-note">
<p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
</div>
Expand Down Expand Up @@ -861,8 +861,8 @@ <h3 id="breadcrumbs" class="s-title"><a href="#breadcrumbs" class="anchor" aria-

</div>

<div class="container">
<h3 id="cards" class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
<div id="cards" class="container">
<h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
<div class="docs-note">
<p>Cards are flexible content containers.</p>
</div>
Expand Down Expand Up @@ -991,8 +991,8 @@ <h3 id="cards" class="s-title"><a href="#cards" class="anchor" aria-hidden="true

</div>

<div class="container">
<h3 id="chips" class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
<div id="chips" class="container">
<h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
<div class="docs-note">
<p>Chips are complex entities in small blocks. </p>
</div>
Expand Down Expand Up @@ -1049,8 +1049,8 @@ <h3 id="chips" class="s-title"><a href="#chips" class="anchor" aria-hidden="true

</div>

<div class="container">
<h3 id="empty" class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3>
<div id="empty" class="container">
<h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3>
<div class="docs-note">
<p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
</div>
Expand Down Expand Up @@ -1116,8 +1116,8 @@ <h3 id="empty" class="s-title"><a href="#empty" class="anchor" aria-hidden="true

</div>

<div class="container">
<h3 id="menus" class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
<div id="menus" class="container">
<h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
<div class="docs-note">
<p>Menus are vertical list of links or buttons for actions and navigation.</p>
</div>
Expand Down Expand Up @@ -1243,8 +1243,8 @@ <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-h
</div>
</div>
<div class="column col-xs-12">
<div class="dropdown dropdown-right">
<a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
<div class="dropdown">
<a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
<ul class="menu">
<li class="menu-item">
<a href="#dropdowns">
Expand All @@ -1264,33 +1264,30 @@ <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-h
</ul>
</div>
</div>
<div class="column col-xs-12">
<div class="dropdown">
<a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
<ul class="menu">
</div>
<div class="docs-note">
<p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
<p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable.</p>
<p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
</div>
<div class="columns">
<div class="column col-xs-12 text-right">
<div class="dropdown dropdown-right">
<a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a>
<ul class="menu text-left">
<li class="menu-item">
<a href="#dropdowns">
Slack
</a>
<a href="#dropdowns">Slack</a>
</li>
<li class="menu-item">
<a href="#dropdowns">
Hipchat
</a>
<a href="#dropdowns">Hipchat</a>
</li>
<li class="menu-item">
<a href="#dropdowns">
Skype
</a>
<a href="#dropdowns">Skype</a>
</li>
</ul>
</div>
</div>
</div>
<div class="docs-note">
<p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
<p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
</div>
<div class="docs-note">
<p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
</div>
Expand Down Expand Up @@ -1327,8 +1324,8 @@ <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-h

</div>

<div class="container">
<h3 id="modals" class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
<div id="modals" class="container">
<h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
<div class="docs-note">
<p>Modals are flexible dialog prompts.</p>
</div>
Expand Down Expand Up @@ -1463,8 +1460,8 @@ <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4>

</div>

<div class="container">
<h3 id="pagination" class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
<div id="pagination" class="container">
<h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
<div class="columns">
<div class="column col-xs-12">
<ul class="pagination">
Expand Down Expand Up @@ -1594,8 +1591,8 @@ <h3 id="pagination" class="s-title"><a href="#pagination" class="anchor" aria-hi

</div>

<div class="container">
<h3 id="panels" class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3>
<div id="panels" class="container">
<h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3>
<div class="docs-note">
<p>Panels are flexible view container with auto-expand content section.</p>
</div>
Expand Down Expand Up @@ -1755,8 +1752,8 @@ <h3 id="panels" class="s-title"><a href="#panels" class="anchor" aria-hidden="tr

</div>

<div class="container">
<h3 id="navs" class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
<div id="navs" class="container">
<h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
<div class="columns">
<div class="column col-6 col-xs-12">
<ul class="nav">
Expand Down Expand Up @@ -1826,8 +1823,8 @@ <h3 id="navs" class="s-title"><a href="#navs" class="anchor" aria-hidden="true">

</div>

<div class="container">
<h3 id="popovers" class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
<div id="popovers" class="container">
<h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
<div class="docs-note">
<p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
</div>
Expand Down Expand Up @@ -1943,8 +1940,8 @@ <h3 id="popovers" class="s-title"><a href="#popovers" class="anchor" aria-hidden

</div>

<div class="container">
<h3 id="steps" class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
<div id="steps" class="container">
<h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
<div class="docs-note">
<p>Steps are progress indicators of a sequence of task steps.</p>
</div>
Expand Down Expand Up @@ -2005,8 +2002,8 @@ <h3 id="steps" class="s-title"><a href="#steps" class="anchor" aria-hidden="true

</div>

<div class="container">
<h3 id="tabs" class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
<div id="tabs" class="container">
<h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
<div class="docs-note">
<p>Tabs enable quick switch between different views.</p>
</div>
Expand Down Expand Up @@ -2185,8 +2182,8 @@ <h3 id="tabs" class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">

</div>

<div class="container">
<h3 id="tiles" class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
<div id="tiles" class="container">
<h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
<div class="docs-note">
<p>Tiles are repeatable or embeddable information blocks.</p>
</div>
Expand Down Expand Up @@ -2293,8 +2290,8 @@ <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4>

</div>

<div class="container">
<h3 id="toasts" class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
<div id="toasts" class="container">
<h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
<div class="docs-note">
<p>Toasts are used to show alert or information to users.</p>
</div>
Expand Down Expand Up @@ -2353,8 +2350,8 @@ <h5>Toast Title</h5>

</div>

<div class="container">
<h3 id="tooltips" class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
<div id="tooltips" class="container">
<h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
<div class="docs-note">
<p>Tooltips provide context information labels that appear on hover and focus.</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
}
.s-content .docs-block {
border-radius: .1rem;
padding: .5rem;
padding: .4rem;
}
.s-content .docs-block.bg-gray {
background: #f0f1f4;
Expand Down Expand Up @@ -435,7 +435,7 @@
padding: 3.5rem .5rem 0 .5rem;
}
.s-content .docs-block {
padding: .5rem .1rem;
padding: .4rem .1rem;
}
.s-content .anchor {
display: none;
Expand Down
Loading

0 comments on commit 41ec3e4

Please sign in to comment.