From c5d3a98c639caed1f0454ce64dbc838f6d773fb7 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sat, 12 May 2018 18:08:15 +0800 Subject: Move Docs to Pug templates --- docs/src/_docs-layout.pug | 99 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 docs/src/_docs-layout.pug (limited to 'docs/src/_docs-layout.pug') diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug new file mode 100644 index 0000000..7ae771c --- /dev/null +++ b/docs/src/_docs-layout.pug @@ -0,0 +1,99 @@ +extends _layout.pug +include _mixins.pug + +block content + .docs-container.off-canvas.off-canvas-sidebar-show + .docs-navbar + a.off-canvas-toggle.btn.btn-link.btn-action(href='#sidebar') + i.icon.icon-menu + a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub + #sidebar.docs-sidebar.off-canvas-sidebar + .docs-brand + a.docs-logo(href='/') + img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework') + h2 SPECTRE + .docs-nav + .accordion-container + +docs-accordion( + 'getting-started', + 'Getting started', + {url: '#introduction', name: 'Introduction'}, + {url: '#installation', name: 'Installation'}, + {url: '#custom', name: 'Custom version'}, + {url: '#browsers', name: 'Browser support'}, + {url: '#whatsnew', name: 'What\'s new'} + ) + +docs-accordion( + 'elements', + 'Elements', + {url: '#typography', name: 'Typography'}, + {url: '#tables', name: 'Tables'}, + {url: '#buttons', name: 'Buttons'}, + {url: '#forms', name: 'Forms'}, + {url: '#icons', name: 'Icons'}, + {url: '#labels', name: 'Labels'}, + {url: '#codes', name: 'Codes'}, + {url: '#media', name: 'Media'} + ) + +docs-accordion( + 'layout', + 'Layout', + {url: '#flexbox', name: 'Flexbox grid'}, + {url: '#responsive', name: 'Responsive'}, + {url: '#navbar', name: 'Navbar'} + ) + +docs-accordion( + 'components', + 'Components', + {url: '#accordions', name: 'Accordions'}, + {url: '#avatars', name: 'Avatars'}, + {url: '#badges', name: 'Badges'}, + {url: '#bars', name: 'Bars'}, + {url: '#breadcrumbs', name: 'Breadcrumbs'}, + {url: '#cards', name: 'Cards'}, + {url: '#chips', name: 'Chips'}, + {url: '#empty', name: 'Empty states'}, + {url: '#menus', name: 'Menus'}, + {url: '#modals', name: 'Modals'}, + {url: '#navs', name: 'Navs'}, + {url: '#pagination', name: 'Pagination'}, + {url: '#panels', name: 'Panels'}, + {url: '#popovers', name: 'Popovers'}, + {url: '#steps', name: 'Steps'}, + {url: '#tabs', name: 'Tabs'}, + {url: '#tiles', name: 'Tiles'}, + {url: '#toasts', name: 'Toasts'}, + {url: '#tooltips', name: 'Tooltips'} + ) + +docs-accordion( + 'utilities', + 'Utilities', + {url: '#colors', name: 'Colors'}, + {url: '#cursors', name: 'Cursors'}, + {url: '#display', name: 'Display'}, + {url: '#divider', name: 'Divider'}, + {url: '#loading', name: 'Loading'}, + {url: '#position', name: 'Position'}, + {url: '#shapes', name: 'Shapes'}, + {url: '#text', name: 'Text'} + ) + +docs-accordion( + 'experimentals', + 'Experimentals', + {url: '#autocomplete', name: 'Autocomplete'}, + {url: '#calendars', name: 'Calendars'}, + {url: '#carousels', name: 'Carousels'}, + {url: '#comparison', name: 'Comparison sliders'}, + {url: '#filters', name: 'Filters'}, + {url: '#meters', name: 'Meters'}, + {url: '#off-canvas', name: 'Off-canvas'}, + {url: '#parallax', name: 'Parallax'}, + {url: '#progress', name: 'Progress'}, + {url: '#sliders', name: 'Sliders'}, + {url: '#timelines', name: 'Timelines'} + ) + + a.off-canvas-overlay(href='#close') + .off-canvas-content + #content.docs-content + block docs-content \ No newline at end of file -- cgit v1.3.1-23-gd82d From 27844c650766864aba46584e566639b79f22c0aa Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Sun, 3 Jun 2018 18:17:42 +0800 Subject: Fix Docs hash linking bug --- docs/elements.html | 34 +- docs/getting-started.html | 26 +- docs/layout.html | 2039 ++++++++++++++++++++++++++++----------------- docs/src/_docs-layout.pug | 2 +- docs/src/_mixins.pug | 4 +- docs/src/elements.pug | 4 +- docs/src/layout.pug | 39 + 7 files changed, 1356 insertions(+), 792 deletions(-) create mode 100644 docs/src/layout.pug (limited to 'docs/src/_docs-layout.pug') diff --git a/docs/elements.html b/docs/elements.html index e7b4e82..b20594a 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -46,7 +46,7 @@
  • Forms
  • Icons
  • Labels
    • -
  • Codes
    • +
  • Code
  • Media
    • @@ -129,8 +129,8 @@
    -
    -

    Typography

    +
    +

    Typography

    Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

    Headings

    @@ -317,8 +317,8 @@ <dd>description list description</dd> </dl>
    -
    -

    Tables

    +
    +

    Tables

    Tables include default styles for tables and data sets.

    @@ -378,8 +378,8 @@ </tbody> </table>
    -
    -

    Buttons

    +
    +

    Buttons

    Buttons include simple button styles for actions in different types and sizes.

    @@ -526,8 +526,8 @@ <button class="btn">third button</button> </div>
    -
    -

    Forms

    +
    +

    Forms

    Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

    @@ -1208,11 +1208,11 @@ </div> </fieldset>
    -
    -

    Icons

    +
    +

    Icons

    -
    -

    Labels

    +
    +

    Labels

    Labels are formatted text tags for highlighted, informative information.

    default labelprimary labelsecondary labelsuccess labelwarning labelerror label
    @@ -1231,8 +1231,8 @@ <!-- rounded labels --> <span class="label label-rounded label-primary">primary label</span>
    -
    -

    Code

    +
    +

    Code

    Code is used for styling inline and multiline code snippets.

    For inline code, you can use the <code> element. For multiline code snippet blocks, you can use <pre> with the code class as a container, and add <code> inside it. @@ -1249,8 +1249,8 @@ &lt;<span class="tag">/button</span>&gt; </code></pre>

    -
    -

    Media

    +
    +

    Media

    Media includes responsive images, figures and video classes.

    Images

    Add the img-responsive class to <img> elements. The images will scale with the parent sizes.

    diff --git a/docs/getting-started.html b/docs/getting-started.html index 4d9f7ee..2665d0c 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -46,7 +46,7 @@
  • Forms
  • Icons
  • Labels
    • -
  • Codes
    • +
  • Code
  • Media
    • @@ -129,14 +129,14 @@
    -
    -

    Introduction

    +
    +

    Introduction

    Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development.

    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.

    -
    -

    Installation

    +
    +

    Installation

    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.

    Install manually

    Download the compiled and minified Spectre CSS file (core ~10KB min+gzip):

    @@ -161,8 +161,8 @@

    Install from Bower

    bower install spectre.css --save
    -
    -

    Custom version

    +
    +

    Custom version

    You can customize your version of Spectre.css by editing Sass files in /src directory or removing unneeded components from .scss source files.

    Sass Source Code

    If you are looking for Less version of Spectre.css, please switch to Less branch.

    @@ -364,11 +364,11 @@ gulp.task('prefix',

    After you compile your version of Spectre in the /dist, run gulp prefix in the directory of Spectre.

    -
    -

    Accessibility

    +
    +

    Accessibility

    -
    -

    Browser support

    +
    +

    Browser support

    Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:

    • Chrome LAST 4
      • @@ -380,8 +380,8 @@ gulp.task('prefix',

      Spectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.

    -
    -

    What's new

    +
    +

    What's new

    September 2017

    • Off-canvas: navigation layout that the sidebar can slide in and out of the viewport NEW
      • diff --git a/docs/layout.html b/docs/layout.html index dd4fae5..b20594a 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -1,799 +1,1326 @@ - - - - - - - Layout - Spectre.css CSS Framework - - - - - - - - -
      -
      - - - - GitHub -
      - -
    -
    -
    -
    -

    Add a container element with the nav class. And add child elements with the nav-item class. The nav-item with the active class will be highlighted.

    -
    - - -
    <ul class="nav">
-  <li class="nav-item">
-    <a href="#">Elements</a>
-  </li>
-  <li class="nav-item active">
-    <a href="#">Layout</a>
-    <ul class="nav">
-      <li class="nav-item">
-        <a href="#">Flexbox grid</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Responsive</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Navbar</a>
-      </li>
-      <li class="nav-item">
-        <a href="#">Empty states</a>
-      </li>
-    </ul>
-  </li>
-  <li class="nav-item">
-    <a href="#">Components</a>
-  </li>
-  <li class="nav-item">
-    <a href="#">Utilities</a>
-  </li>
-</ul>
-
    - -
    - - +
    +

    Add a container element with the nav class. + And add child elements with the nav-item class. + The nav-item with the active class will be highlighted. +

    + 
    <ul class="nav">
+  <li class="nav-item">
+    <a href="#">Elements</a>
+  </li>
+  <li class="nav-item active">
+    <a href="#">Layout</a>
+    <ul class="nav">
+      <li class="nav-item">
+        <a href="#">Flexbox grid</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Responsive</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Navbar</a>
+      </li>
+      <li class="nav-item">
+        <a href="#">Empty states</a>
+      </li>
+    </ul>
+  </li>
+  <li class="nav-item">
+    <a href="#">Components</a>
+  </li>
+  <li class="nav-item">
+    <a href="#">Utilities</a>
+  </li>
+</ul>
    +
    + - -
    -

    Panels

    -
    -

    Panels are flexible view container with auto-expand content section.

    -
    -
    -
    -
    -
    -
    - Avatar -
    -
    Bruce Banner
    -
    THE HULK
    -
    - -
    -
    -
    -
    E-mail
    -
    bruce.banner@hulk.com
    -
    -
    - +
    +
    +

    You could use previous and next pagination to navigate.

    + 
    <ul class="pagination">
+  <li class="page-item page-prev">
+    <a href="#">
+      <div class="page-item-subtitle">Previous</div>
+      <div class="page-item-title h5">Getting started</div>
+    </a>
+  </li>
+  <li class="page-item page-next">
+    <a href="#">
+      <div class="page-item-subtitle">Next</div>
+      <div class="page-item-title h5">Layout</div>
+    </a>
+  </li>
+</ul>
    +
    +
    +

    Panels

    +

    Panels are flexible view container with auto-expand content section.

    +
    +
    +
    +
    +
    Avatar
    +
    Bruce Banner
    +
    THE HULK
    -
    -
    -
    -
    Skype
    -
    bruce.banner
    + +
    +
    +
    +
    E-mail
    +
    bruce.banner@hulk.com
    +
    +
    + +
    +
    +
    +
    +
    Skype
    +
    bruce.banner
    +
    +
    + +
    +
    +
    +
    +
    Location
    +
    Dayton, Ohio
    +
    +
    + +
    +
    -
    - +
    +
    -
    -
    -
    Location
    -
    Dayton, Ohio
    +
    +
    +
    +
    +
    Comments
    -
    - +
    +
    +
    +
    Avatar
    +
    +
    +

    Thor Odinson

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    Avatar
    +
    +
    +

    Bruce Banner

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    +
    +
    +

    Tony Stark

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    Avatar
    +
    +
    +

    Steve Rogers

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    +
    +
    Avatar
    +
    +
    +

    Natasha Romanoff

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    +
    + + +
    -
    - -
    -
    -
    -
    -
    -
    Comments
    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    Thor Odinson

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +

    Add a container element with the panel class. + And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer classes. + The panel-body can be auto expanded and vertically scrollable. +

    + 
    <div class="panel">
+  <div class="panel-header">
+    <div class="panel-title">Comments</div>
+  </div>
+  <div class="panel-nav">
+    <!-- navigation components: tabs, breadcrumbs or pagination -->
+  </div>
+  <div class="panel-body">
+    <!-- contents -->
+  </div>
+  <div class="panel-footer">
+    <!-- buttons or inputs -->
+  </div>
+</div>
    +
    +
    +

    Popovers

    +

    Popovers are small overlay content containers. Popovers component is built entirely in CSS.

    +
    +
    +
    top popover +
    +
    +
    +
    Apple
    +
    Software and hardware
    +
    +
    To make a contribution to the world by making tools for the mind that advance humankind.
    +
    + +
    +
    -
    -
    -
    - Avatar -
    -
    -
    -

    Bruce Banner

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +
    +
    +
    right popover +
    +
    +
    +
    Apple
    +
    Software and hardware
    +
    +
    To make a contribution to the world by making tools for the mind that advance humankind.
    +
    + +
    +
    -
    -
    -
    +
    +
    +
    bottom popover +
    +
    +
    +
    Apple
    +
    Software and hardware
    +
    +
    To make a contribution to the world by making tools for the mind that advance humankind.
    +
    + +
    +
    -
    -

    Tony Stark

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    +
    +
    left popover +
    +
    +
    +
    Apple
    +
    Software and hardware
    +
    +
    To make a contribution to the world by making tools for the mind that advance humankind.
    +
    + +
    +
    +
    +
    +

    Wrap an element by a container with the popover class. + And add a container with the popover-container next to the element. + You can use Cards component inside the popover-container. +

    +

    Also, you can add the popover-right, popover-bottom or popover-left class to define the position. + By default, the popovers appear above the element. +

    + 
    <div class="popover popover-right">
+  <button class="btn btn-primary">right popover</button>
+  <div class="popover-container">
+    <div class="card">
+      <div class="card-header">
+        ...
+      </div>
+      <div class="card-body">
+        ...
+      </div>
+      <div class="card-footer">
+        ...
+      </div>
+    </div>
+  </div>
+</div>
    +
    +
    +

    Steps

    +

    Steps are progress indicators of a sequence of task steps.

    +
    +
    +
      +
      • +
      • +
      • +
      • +
    +
    +
    + +
    +
    +

    Add a container element with the step class. + And add child elements with the step-item class. + The step-item with the active class will be highlighted and indicate the current state of progress. +

    + 
    <ul class="step">
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
+  </li>
+  <li class="step-item active">
+    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
+  </li>
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
+  </li>
+  <li class="step-item">
+    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
+  </li>
+</ul>
+
    +
    +
    +

    Tabs

    +

    Tabs enable quick switch between different views.

    +
    +
    + +
    +
    + +
    +
    +

    Add a container element with the tab class. + And add child elements with the tab-item class. + You can add the tab-block class for a full-width tab. + The tab-item or its child <a> with the active class will be highlighted. +

    + 
    <ul class="tab tab-block">
+  <li class="tab-item active">
+    <a href="#">Music</a>
+  </li>
+  <li class="tab-item">
+    <a href="#" class="active">Playlists</a>
+  </li>
+  <li class="tab-item">
+    <a href="#">Radio</a>
+  </li>
+  <li class="tab-item">
+    <a href="#">Connect</a>
+  </li>
+</ul>
+
    +
    +
    + +
    +
    + +
    +
    +

    If you need badges on tabs, you can add badge class to the element within tab-item.

    + 
    <ul class="tab tab-block">
+  <li class="tab-item active">
+    <a href="#" class="badge" data-badge="9">
+      Music
+    </a>
+  </li>
+</ul>
+
    +
    +
    + +
    +
    +

    + You could add a search box or buttons inside a tab. + Add the tab-action class to the tab-item. +

    + 
    <ul class="tab">
+  <li class="tab-item active">
+    <a href="#">
+      Music
+    </a>
+  </li>
+  <li class="tab-item tab-action">
+    <div class="input-group input-inline">
+      <input class="form-input input-sm" type="text" placeholder="search">
+      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
+    </div>
+  </li>
+</ul>
    +
    +
    +

    Tiles

    +

    Tiles are repeatable or embeddable information blocks.

    +
    +
    -
    - Avatar -
    +
    Avatar
    -

    Steve Rogers

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +

    The Avengers

    +

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +
    +
    + +
    +
    +
    -
    - Avatar -
    +
    Avatar
    -

    Natasha Romanoff

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    +

    The S.H.I.E.L.D.

    +

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    +

    + + +

    -
    -
    - - -
    -
    -
    -
    - -
    -

    Add a container element with the panel class. And add child elements with the panel-header, panel-nav, panel-body and/or panel-footer class. The panel-body can be auto expanded and vertically scrollable.

    -
    - - -
    <div class="panel">
-  <div class="panel-header">
-    <div class="panel-title">Comments</div>
-  </div>
-  <div class="panel-nav">
-    <!-- navigation components: tabs, breadcrumbs or pagination -->
-  </div>
-  <div class="panel-body">
-    <!-- contents -->
-  </div>
-  <div class="panel-footer">
-    <!-- buttons or inputs -->
-  </div>
-</div>
+            
    Add a container with the tile class.
+              And add child elements with the tile-icon, tile-content or/and tile-action classes.
+              The tile-icon and tile-action are optional.
+            
    
+            
    There are tile-title and tile-subtitle classes for title and subtitle text styles.
    
+            
    <div class="tile">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file centered"></i>
+    </div>
+  </div>
+  <div class="tile-content">
+    <p class="tile-title">The Avengers</p>
+    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
+  </div>
+  <div class="tile-action">
+    <button class="btn btn-primary">Join</button>
+  </div>
+</div>
 
    
-  
-
    - -
    -

    Popovers

    -
    -

    Popovers are small overlay content containers. Popovers component is built entirely in CSS.

    -
    -
    -
    -
    - - top popover - -
    -
    -
    -
    Apple
    -
    Software and hardware
    +

    Compact tiles

    +

    There is compact version of Tiles component, which is often used as contact and file info blocks.

    +

    Add the tile-centered class to the container tile. + The tile-icon, tile-content and tile-action will be vertically centered. +

    +
    +
    +
    +
    +
    -
    - To make a contribution to the world by making tools for the mind that advance humankind. +
    +
    spectre-docs.pdf
    +
    14MB · Public · 1 Jan, 2017
    -
    - +
    +
    -
    -
    -
    - - right popover - -
    -
    -
    -
    Apple
    -
    Software and hardware
    -
    -
    - To make a contribution to the world by making tools for the mind that advance humankind. -
    -
    - -
    + 
    <div class="tile tile-centered">
+  <div class="tile-icon">
+    <div class="example-tile-icon">
+      <i class="icon icon-file 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>
+  <div class="tile-action">
+    <button class="btn btn-link">
+      <i class="icon icon-more-vert"></i>
+    </button>
+  </div>
+</div>
    +
    +
    +

    Toasts

    +

    Toasts are used to show alert or information to users.

    +
    +
    +
    + +
    Toast Title
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    -
    -
    -
    -
    - - bottom popover - -
    -
    -
    -
    Apple
    -
    Software and hardware
    -
    -
    - To make a contribution to the world by making tools for the mind that advance humankind. -
    -
    - -
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    -
    -
    -
    - - left popover - -
    -
    -
    -
    Apple
    -
    Software and hardware
    -
    -
    - To make a contribution to the world by making tools for the mind that advance humankind. -
    -
    - -
    +

    Add a container element with the toast class. + You can add any text within the container, and even icons. + You may also add a close button with the btn-clear class if you need. +

    + 
    <div class="toast">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
    +
    +
    +
    + Toast success
    -
    -
    -
    -
    -

    Wrap an element by a container with the popover class. And add a container with the popover-container next to the element. You can use Cards component inside the popover-container.

    -

    Also, you can add the popover-right, popover-bottom or popover-left class to define the position. By default, the popovers appear above the element.

    -
    - - -
    <div class="popover popover-right">
-  <button class="btn btn-primary">right popover</button>
-  <div class="popover-container">
-    <div class="card">
-      <div class="card-header">
-        ...
-      </div>
-      <div class="card-body">
-        ...
-      </div>
-      <div class="card-footer">
-        ...
-      </div>
-    </div>
-  </div>
-</div>
-
    - -
    - -
    -

    Steps

    -
    -

    Steps are progress indicators of a sequence of task steps.

    -
    -
    -
    -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    -
    -
    - -
    -
    -
    -

    Add a container element with the step class. And add child elements with the step-item class. The step-item with the active class will be highlighted and indicate the current state of progress.

    -
    - - -
    <ul class="step">
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 1">Step 1</a>
-  </li>
-  <li class="step-item active">
-    <a href="#" class="tooltip" data-tooltip="Step 2">Step 2</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 3">Step 3</a>
-  </li>
-  <li class="step-item">
-    <a href="#" class="tooltip" data-tooltip="Step 4">Step 4</a>
-  </li>
-</ul>
-
    - -
    - -
    -

    Tabs

    -
    -

    Tabs enable quick switch between different views.

    -
    -
    -
    - -
    -
    - -
    -
    -
    -

    Add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.

    -
    - - -
    <ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#">Music</a>
-  </li>
-  <li class="tab-item">
-    <a href="#" class="active">Playlists</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Radio</a>
-  </li>
-  <li class="tab-item">
-    <a href="#">Connect</a>
-  </li>
-</ul>
-
    - -
    -
    - -
    -
    - -
    -
    -
    -

    If you need badges on tabs, you can add badge class to the element within tab-item.

    -
    - - -
    <ul class="tab tab-block">
-  <li class="tab-item active">
-    <a href="#" class="badge" data-badge="9">
-      Music
-    </a>
-  </li>
-</ul>
-
    - -
    -
    - -
    -
    -
    -

    You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

    -
    - - -
    <ul class="tab">
-  <li class="tab-item active">
-    <a href="#">
-      Music
-    </a>
-  </li>
-  <li class="tab-item tab-action">
-    <div class="input-group input-inline">
-      <input class="form-input input-sm" type="text" placeholder="search">
-      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
-    </div>
-  </li>
-</ul>
-
    - -
    - -
    -

    Tiles

    -
    -

    Tiles are repeatable or embeddable information blocks.

    -
    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    The Avengers

    -

    Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...

    -
    -
    - -
    -
    -
    -
    -
    -
    -
    - Avatar -
    -
    -
    -

    The S.H.I.E.L.D.

    -

    The Strategic Homeland Intervention, Enforcement, and Logistics Division...

    -

    - - -

    +
    +
    + Toast error +
    -
    -
    -
    -

    Add a container with the tile class. And add child elements with the tile-icon, tile-content or/and tile-action classes. The tile-icon and tile-action are optional.

    -

    There are tile-title and tile-subtitle classes for title and subtitle text styles.

    -
    - - -
    <div class="tile">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file centered"></i>
-    </div>
-  </div>
-  <div class="tile-content">
-    <p class="tile-title">The Avengers</p>
-    <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p>
-  </div>
-  <div class="tile-action">
-    <button class="btn btn-primary">Join</button>
-  </div>
-</div>
-
    - -

    Compact tiles

    -
    -

    There is compact version of Tiles component, which is often used as contact and file info blocks.

    -

    Add the tile-centered class to the container tile. The tile-icon, tile-content and tile-action will be vertically centered.

    -
    -
    -
    -
    -
    -
    - -
    +

    And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

    + 
    <div class="toast toast-primary">
+  <button class="btn btn-clear float-right"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
    +
    +
    +

    Tooltips

    +

    Tooltips provide context information labels that appear on hover and focus.

    +
    +
    + +
    +
    +
    -
    -
    spectre-docs.pdf
    -
    14MB · Public · 1 Jan, 2017
    +
    +
    -
    - +
    +
    +

    Tooltips component is built entirely in CSS.

    +

    Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements.

    +

    And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. + By default, the tooltip appears above the element. +

    + 
    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
+<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
    - - -
    <div class="tile tile-centered">
-  <div class="tile-icon">
-    <div class="example-tile-icon">
-      <i class="icon icon-file 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>
-  <div class="tile-action">
-    <button class="btn btn-link">
-      <i class="icon icon-more-vert"></i>
-    </button>
-  </div>
-</div>
-
    -
    - -
    -

    Toasts

    -
    -

    Toasts are used to show alert or information to users.

    -
    -
    -
    -
    - -
    Toast Title
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
    -
    -
    -
    - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -
    -
    -
    -
    -

    Add a container element with the toast class. You can add any text within the container, and even icons. You may also add a close button with the btn-clear class if you need.

    -
    -
    -
    -
    - - Toast success -
    -
    -
    -
    - - Toast warning -
    -
    -
    -
    - - Toast error -
    -
    -
    -
    -

    And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

    -
    - - -
    <div class="toast">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
-<div class="toast toast-primary">
-  <button class="btn btn-clear float-right"></button>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-</div>
-
    - -
    - -
    -

    Tooltips

    -
    -

    Tooltips provide context information labels that appear on hover and focus.

    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    -

    Tooltips component is built entirely in CSS.

    -

    Add the tooltip class and the data-tooltip attribute, which contains the tooltip content, to non self closing elements. And add the tooltip-right, tooltip-bottom or tooltip-left class to define the position of a tooltip. By default, the tooltip appears above the element.

    -
    - - -
    <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
-<button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>
-
    - -
    - - -
    -
    - - - - + + + \ No newline at end of file diff --git a/docs/elements.html b/docs/elements.html index b20594a..7038e74 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -75,9 +75,9 @@
  • Cards
  • Chips
  • Empty states
    • -
  • Menus
    • +
  • Menu
  • Modals
    • -
  • Navs
    • +
  • Nav
  • Pagination
  • Panels
  • Popovers
    • diff --git a/docs/experimentals.html b/docs/experimentals.html index 4f0d944..978788d 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -1,1222 +1,956 @@ - - - - - - - Experimentals - Spectre.css CSS Framework - - - - - - - - -
    -
    - - - - GitHub -
    - -