From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/components/accordions.html | 328 ++++++++++++++++++++++++++++++++++ docs/components/avatars.html | 295 ++++++++++++++++++++++++++++++ docs/components/badges.html | 267 +++++++++++++++++++++++++++ docs/components/bars.html | 307 +++++++++++++++++++++++++++++++ docs/components/breadcrumbs.html | 261 +++++++++++++++++++++++++++ docs/components/cards.html | 313 ++++++++++++++++++++++++++++++++ docs/components/chips.html | 250 ++++++++++++++++++++++++++ docs/components/empty.html | 276 ++++++++++++++++++++++++++++ docs/components/menu.html | 377 +++++++++++++++++++++++++++++++++++++++ docs/components/modals.html | 353 ++++++++++++++++++++++++++++++++++++ docs/components/nav.html | 273 ++++++++++++++++++++++++++++ docs/components/pagination.html | 306 +++++++++++++++++++++++++++++++ docs/components/panels.html | 353 ++++++++++++++++++++++++++++++++++++ docs/components/popovers.html | 314 ++++++++++++++++++++++++++++++++ docs/components/steps.html | 261 +++++++++++++++++++++++++++ docs/components/tabs.html | 320 +++++++++++++++++++++++++++++++++ docs/components/tiles.html | 314 ++++++++++++++++++++++++++++++++ docs/components/toasts.html | 268 ++++++++++++++++++++++++++++ docs/components/tooltips.html | 246 +++++++++++++++++++++++++ 19 files changed, 5682 insertions(+) create mode 100644 docs/components/accordions.html create mode 100644 docs/components/avatars.html create mode 100644 docs/components/badges.html create mode 100644 docs/components/bars.html create mode 100644 docs/components/breadcrumbs.html create mode 100644 docs/components/cards.html create mode 100644 docs/components/chips.html create mode 100644 docs/components/empty.html create mode 100644 docs/components/menu.html create mode 100644 docs/components/modals.html create mode 100644 docs/components/nav.html create mode 100644 docs/components/pagination.html create mode 100644 docs/components/panels.html create mode 100644 docs/components/popovers.html create mode 100644 docs/components/steps.html create mode 100644 docs/components/tabs.html create mode 100644 docs/components/tiles.html create mode 100644 docs/components/toasts.html create mode 100644 docs/components/tooltips.html (limited to 'docs/components') diff --git a/docs/components/accordions.html b/docs/components/accordions.html new file mode 100644 index 0000000..e63472f --- /dev/null +++ b/docs/components/accordions.html @@ -0,0 +1,328 @@ + + + + Accordions - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Accordions

+
+
+ + + +
+
+ + +
+
+

Accordions are used to toggle sections of content.

+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+ 
<!-- standard Accordions example -->
+<div class="accordion">
+  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
+  <label class="accordion-header" for="accordion-1">
+    <i class="icon icon-arrow-right mr-1"></i>
+    Title
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
+
+<!-- mutually exclusive Accordions example (with same input names) -->
+<div class="accordion">
+  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
+  <label class="accordion-header" for="accordion-1">
+    Title
+  </label>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</div>
+
+

Alternatively, you can use details and summary instead of input radio or checkbox trick. + Add the open attribute to details to expand it. + Microsoft Edge support is under consideration. +

+ 
<!-- details and summary Accordions example -->
+<details class="accordion" open>
+  <summary class="accordion-header">
+    <i class="icon icon-arrow-right mr-1"></i>
+    Title
+  </summary>
+  <div class="accordion-body">
+    <!-- Accordions content -->
+  </div>
+</details>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/avatars.html b/docs/components/avatars.html new file mode 100644 index 0000000..3e8ebb1 --- /dev/null +++ b/docs/components/avatars.html @@ -0,0 +1,295 @@ + + + + Avatars - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Avatars

+
+
+ + + +
+
+ + +
+
+

Avatars are user profile pictures.

+
+
+
Avatar XL
+
Avatar LG
+
Avatar
+
Avatar SM
+
Avatar XS
+
+
+
+
+
+
+
+
+
+

Add the avatar class to <img> element. + There are 4 additional sizes available, including avatar-xl(64px), avatar-lg(48px), avatar-sm(24px), and avatar-xs(16px). + By default, the avatar size is 32px. +

+

+ For users who don't have profile pictures, you may use their initials for avatars. + Add the avatar class and avatar size class to <div> element. + The data-initial attribute is the name appear inside the avatar. +

+ 
<!-- Basic avatar examples -->
+<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure>
+
+<!-- Show initals when avatar image is unavailable or not fully loaded -->
+<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;">
+  <img src="img/avatar-1.png" alt="...">
+</figure>
+
+
+
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
AvatarAvatar
+
+
+ 
<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <img src="img/avatar-5.png" class="avatar-icon" alt="...">
+</figure>
+
+

Avatar presence

+
+
+
+
+
+
+
+
+
+

+ Avatars support presence indicators. + You can add an <i> element with the avatar-presence class, and add online, busy or away class for different status colors. + The default is gray which means offline. +

+ 
<figure class="avatar avatar-xl">
+  <img src="img/avatar-1.png" alt="...">
+  <i class="avatar-presence online"></i>
+</figure>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/badges.html b/docs/components/badges.html new file mode 100644 index 0000000..7ceed32 --- /dev/null +++ b/docs/components/badges.html @@ -0,0 +1,267 @@ + + + + Badges - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Badges

+
+
+ + + +
+
+ + +
+
+

Badges are often used as unread number indicators.

+
+
Notifications
+
Notifications
+
Notifications
+
Notifications
+
+

Add the badge class to non self closing elements. + And add the data-badge attribute to define the content of a badge. + The badge will appear in the top-right direction of the element. +

+

If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

+
+
+ + +
+
+ + +
+
+
YZ
+
YZ
+
YZ
+
+
+

Badges support button and avatars elements as well.

+ 
<span class="badge">
+  Notifications
+</span>
+
+<span class="badge" data-badge="8">
+  Notifications
+</span>
+
+<button class="btn badge" data-badge="8">
+  Button
+</button>
+
+<figure class="avatar badge" data-badge="8" data-initial="YZ">
+  <img src="img/avatar-3.png" alt="YZ">
+</figure>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/bars.html b/docs/components/bars.html new file mode 100644 index 0000000..f34b1c8 --- /dev/null +++ b/docs/components/bars.html @@ -0,0 +1,307 @@ + + + + Bars - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Bars

+
+
+ + + +
+
+ + +
+
+

+ Bars represent the progress of a task or the value within the known range. + Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements. +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
25%
+
15%
+
10%
+
15%
+
+
+
+

Add a container element with the bar class. + And add child elements with the bar-item class. + The width percentage value is needed for every bar-item. +

+

There is the bar-sm class for thinner Bars. + Also, you could use Tooltips for any bar-item. +

+ 
<!-- normal bars -->
+<div class="bar bar-sm">
+  <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+</div>
+
+<!-- multi-bars -->
+<div class="bar">
+  <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+  <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+</div>
+
+

Slider bars

+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+

You can add the bar-slider class to the Bars container. + And add child elements with the bar-item class and bar-slider-btn inside bar-item. + You need to set the bar-item width manually to have the slider point. +

+

If there are two bar-item divs in one bar-slider, you will have a range slider.

+ 
<!-- normal slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:25%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+<!-- range slider -->
+<div class="bar bar-slider">
+  <div class="bar-item" role="progressbar" style="width:15%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+  <div class="bar-item" role="progressbar" style="width:65%;">
+    <button class="bar-slider-btn btn" role="slider"></button>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/breadcrumbs.html b/docs/components/breadcrumbs.html new file mode 100644 index 0000000..c0fd0e8 --- /dev/null +++ b/docs/components/breadcrumbs.html @@ -0,0 +1,261 @@ + + + + Breadcrumbs - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/cards.html b/docs/components/cards.html new file mode 100644 index 0000000..ad0a5e8 --- /dev/null +++ b/docs/components/cards.html @@ -0,0 +1,313 @@ + + + + Cards - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Cards

+
+
+ + + +
+
+ + +
+
+

Cards are flexible content containers.

+
+
+
+
OS X El Capitan
+
+
Microsoft
+
Software and hardware
+
+
Empower every person and every organization on the planet to achieve more.
+
Do
+
+
+
+
+
+
Apple
+
Hardware and software
+
+
OS X Yosemite
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
+
+ + + +
+
+
+
+
+
+
macOS Sierra
+
+ +
Google I/O
+
Software and hardware
+
+
An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+
+
+
+
+
OS X El Capitan
+
BuyShare
+
Surface Studio. Turn your desk into a Studio. Surface Studio is designed for the creative process.
+
+
+
+
+
+
Apple
+
Hardware and software
+
+
To make a contribution to the world by making tools for the mind that advance humankind.
+
macOS Sierra
+
+
+
+
+
+
Google
+
Software and hardware
+
+
Organize the world’s information and make it universally accessible and useful.
+
OS X Yosemite
+
SearchShare
+
+
+
+

Add a container element with the card class. + And add child elements with the card-image, card-header, card-body and/or card-footer classes. + The card-image can be placed in any position. +

+ 
<div class="card">
+  <div class="card-image">
+    <img src="img/osx-el-capitan.jpg" class="img-responsive">
+  </div>
+  <div class="card-header">
+    <div class="card-title h5">...</div>
+    <div class="card-subtitle text-gray">...</div>
+  </div>
+  <div class="card-body">
+    ...
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary">...</button>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/chips.html b/docs/components/chips.html new file mode 100644 index 0000000..ba22813 --- /dev/null +++ b/docs/components/chips.html @@ -0,0 +1,250 @@ + + + + Chips - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Chips

+
+
+ + + +
+
+ + +
+
+

Chips are complex entities in small blocks.

+
+
CrimeDramaBiographyMystery
+
+
+
Tony Stark +
+
Thor OdinsonThor Odinson
+
Steve RogersSteve Rogers
+
+
+

Add a container element with the chip class. + And add child text element, buttons or avatars with the avatar class. +

+ 
<span class="chip">Crime</span>
+
+<span class="chip">
+  Biography
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</span>
+
+<div class="chip">
+  <img src="img/avatar-1.png" class="avatar avatar-sm">
+  Yan Zhu
+  <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/empty.html b/docs/components/empty.html new file mode 100644 index 0000000..b0d53c3 --- /dev/null +++ b/docs/components/empty.html @@ -0,0 +1,276 @@ + + + + Empty states - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Empty states

+
+
+ + + +
+
+ + +
+
+

Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.

+
+
+
+
+

You have no new messages

+

Click the button to start a conversation

+
+ +
+
+
+
+
+
+

You've successfully signed up

+

Click the button to invite your friends

+
+ +
+
+ +
+
+
+
+
+
+

You are not following anyone

+

Start to meet new friends

+
+ + +
+
+
+
+

+ An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. + Add empty-icon, empty-title, empty-subtitle or empty-action to the elements. + HTML structure is exampled below. +

+ 
<div class="empty">
+  <div class="empty-icon">
+    <i class="icon icon-people"></i>
+  </div>
+  <p class="empty-title h5">You have no new messages</p>
+  <p class="empty-subtitle">Click the button to start a conversation.</p>
+  <div class="empty-action">
+    <button class="btn btn-primary">Send a message</button>
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/menu.html b/docs/components/menu.html new file mode 100644 index 0000000..448b2d4 --- /dev/null +++ b/docs/components/menu.html @@ -0,0 +1,377 @@ + + + + Menu - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/modals.html b/docs/components/modals.html new file mode 100644 index 0000000..eb5549a --- /dev/null +++ b/docs/components/modals.html @@ -0,0 +1,353 @@ + + + + Modals - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Modals

+
+
+ + + +
+
+ + +
+
+

Modals are flexible dialog prompts.

+
+
Open Modal + +
+
+

Add a container element with the modal class. + And add a real container modal-container and overlay modal-overlay inside it. + You can add child elements with the modal-header, modal-body and modal-footer - any or all of them. +

+

+ Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. + To make a modal appear, add the active class to the modal container. +

+ 
<div class="modal active" id="modal-id">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <a href="#close" class="btn btn-clear float-right" aria-label="Close"></a>
+      <div class="modal-title h5">Modal title</div>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        <!-- content here -->
+      </div>
+    </div>
+    <div class="modal-footer">
+      ...
+    </div>
+  </div>
+</div>
+
+

Modal sizes

+
+
Open small size Modal + +
+
+

Use the modal-sm class for a smaller modal dialog. + The container max width is 320px. +

+
+
Open large size Modal + +
+
+

Use the modal-lg class for a full size modal. + The container max width is 960px. +

+ 
<div class="modal modal-sm">
+  <a href="#close" class="modal-overlay" aria-label="Close"></a>
+  <div class="modal-container">
+    <!-- modal structure here -->
+  </div>
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/nav.html b/docs/components/nav.html new file mode 100644 index 0000000..962c052 --- /dev/null +++ b/docs/components/nav.html @@ -0,0 +1,273 @@ + + + + Nav - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/pagination.html b/docs/components/pagination.html new file mode 100644 index 0000000..7bd9f14 --- /dev/null +++ b/docs/components/pagination.html @@ -0,0 +1,306 @@ + + + + Pagination - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+ + +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/panels.html b/docs/components/panels.html new file mode 100644 index 0000000..a95e6fd --- /dev/null +++ b/docs/components/panels.html @@ -0,0 +1,353 @@ + + + + Panels - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Panels

+
+
+ + + +
+
+ + +
+
+

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

+
+
+
+
+
Avatar
+
Bruce Banner
+
THE HULK
+
+ +
+
+
+
E-mail
+
bruce.banner@hulk.com
+
+
+ +
+
+
+
+
Skype
+
bruce.banner
+
+
+ +
+
+
+
+
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...

+
+
+
+
+
+ + +
+
+
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/popovers.html b/docs/components/popovers.html new file mode 100644 index 0000000..fc9226c --- /dev/null +++ b/docs/components/popovers.html @@ -0,0 +1,314 @@ + + + + Popovers - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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.
+
+ +
+
+
+
+
+
+
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.
+
+ +
+
+
+
+
+
+
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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/steps.html b/docs/components/steps.html new file mode 100644 index 0000000..414fa66 --- /dev/null +++ b/docs/components/steps.html @@ -0,0 +1,261 @@ + + + + Steps - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/tabs.html b/docs/components/tabs.html new file mode 100644 index 0000000..78346b6 --- /dev/null +++ b/docs/components/tabs.html @@ -0,0 +1,320 @@ + + + + Tabs - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/tiles.html b/docs/components/tiles.html new file mode 100644 index 0000000..aeb0c5d --- /dev/null +++ b/docs/components/tiles.html @@ -0,0 +1,314 @@ + + + + Tiles - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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...

+

+ + +

+
+
+
+
+

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. +

+
+
+
+
+
+
+
+
spectre-docs.pdf
+
14MB · Public · 1 Jan, 2017
+
+
+ +
+
+
+
+ 
<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>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/toasts.html b/docs/components/toasts.html new file mode 100644 index 0000000..d28a2f5 --- /dev/null +++ b/docs/components/toasts.html @@ -0,0 +1,268 @@ + + + + Toasts - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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. +

+ 
<div class="toast">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+
+
+
+ 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 toast-primary">
+  <button class="btn btn-clear float-right"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</div>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/docs/components/tooltips.html b/docs/components/tooltips.html new file mode 100644 index 0000000..bb64ef2 --- /dev/null +++ b/docs/components/tooltips.html @@ -0,0 +1,246 @@ + + + + Tooltips - Components - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

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 -- cgit v1.3.1-23-gd82d