From ea508ef4aa932188a1c8cd3a76bd1be6e318b196 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 12 Sep 2017 23:52:31 +0800 Subject: Add Off-screen experimental code --- docs/components.html | 3 +++ 1 file changed, 3 insertions(+) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index c009ad6..0098810 100644 --- a/docs/components.html +++ b/docs/components.html @@ -227,6 +227,9 @@
  • Meters
    • +
  • + Off-canvas +
  • Parallax
    • -- cgit v1.3.1-23-gd82d From fe9c8fea4b136e1b31c9dbe3dbf58243e35197e1 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 20 Sep 2017 20:17:18 +0800 Subject: Fix the Docs bug --- docs/components.html | 202 +++++++++++++++++++++++---------------------------- 1 file changed, 90 insertions(+), 112 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 0098810..68d078e 100644 --- a/docs/components.html +++ b/docs/components.html @@ -271,108 +271,104 @@
    -
    - - -
    - -
    + + +
    +
    -
    - - -
    - -
    +
    +
    + + +
    +
    -
    - - -
    - -
    +
    +
    + + +
    +
    -
    -
    - - -
    - -
    +
    + + +
    +
    -
    - - -
    - -
    +
    +
    + + +
    +
    -
    - - -
    - -
    +
    +
    + + +
    +
    @@ -407,24 +403,6 @@

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

    -
    -
    -
    - Elements -
    - -
    -
    -
    -
    - 
    <!-- details and summary Accordions example -->
 <details class="accordion" open>
-- 
cgit v1.3.1-23-gd82d


From a08ac2610bda551dc89f61fcf6da54ce3373e8a0 Mon Sep 17 00:00:00 2001
From: Yan Zhu 
Date: Thu, 21 Sep 2017 10:41:44 +0800
Subject: Add Ads (TEST)

---
 README.md                 | 20 ++++++++++----------
 docs/components.html      | 30 ++++++++++++++++++++++++++++++
 docs/css/docs.css         | 17 +++++++++++++++++
 docs/elements.html        | 30 ++++++++++++++++++++++++++++++
 docs/experimentals.html   | 26 ++++++++++++++++++++++++++
 docs/getting-started.html | 30 ++++++++++++++++++++++++++++--
 docs/layout.html          | 29 +++++++++++++++++++++++++++++
 docs/src/docs.scss        | 17 +++++++++++++++++
 docs/utilities.html       | 29 +++++++++++++++++++++++++++++
 9 files changed, 216 insertions(+), 12 deletions(-)

(limited to 'docs/components.html')

diff --git a/README.md b/README.md
index 768bd9f..ea5a547 100644
--- a/README.md
+++ b/README.md
@@ -42,18 +42,18 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 ### Elements
 
-- [Typography](https://picturepan2.github.io/spectre/elements.html#typography) - headings, paragraphs, semantic text, blockquote, lists and code elements, optimized for east asian fonts
-- [Tables](https://picturepan2.github.io/spectre/elements.html#tables) - organize and display data
-- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons) - button styles in different types and sizes, and even button groups
-- [Forms](https://picturepan2.github.io/spectre/elements.html#forms) - input, radio, checkbox, switch and other form elements
-- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - single-element, responsive and pure CSS icons
-- [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information
-- [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets
-- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video
+- [Typography](https://picturepan2.github.io/spectre/elements.html#typography)
+- [Tables](https://picturepan2.github.io/spectre/elements.html#tables)
+- [Buttons](https://picturepan2.github.io/spectre/elements.html#buttons)
+- [Forms](https://picturepan2.github.io/spectre/elements.html#forms)
+- [Icons](https://picturepan2.github.io/spectre/elements.html#icons) - CSS only
+- [Labels](https://picturepan2.github.io/spectre/elements.html#labels)
+- [Codes](https://picturepan2.github.io/spectre/elements.html#codes)
+- [Media](https://picturepan2.github.io/spectre/elements.html#media)
 
 ### Layout
-- [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
+- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) 
+- [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive)
 - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar)
 
 ### Components
diff --git a/docs/components.html b/docs/components.html
index 68d078e..08e98ac 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -263,6 +263,36 @@
    +
    +

    Components

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

    Accordions

    diff --git a/docs/css/docs.css b/docs/css/docs.css index 4295995..171b6a9 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -130,6 +130,23 @@ margin: 1.5rem 0; } +.s-content .docs-ad { + background: #f8f9fa; + border-radius: .1rem; + display: inline-block; + padding: .4rem; + position: relative; +} + +.s-content .docs-ad::before { + color: #acb3c2; + content: "AD"; + font-size: .6rem; + position: absolute; + right: .4rem; + top: .1rem; +} + .s-content .column { padding: .4rem; } diff --git a/docs/elements.html b/docs/elements.html index 8f02dc4..12d2276 100644 --- a/docs/elements.html +++ b/docs/elements.html @@ -262,6 +262,36 @@
    +
    +

    Elements

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

    Typography

    diff --git a/docs/experimentals.html b/docs/experimentals.html index f47d983..aeb8e83 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -270,6 +270,32 @@
    +
    +
    +
    + + + + +
    +
    + + + +
    +
    +
    +

    Calendars

    diff --git a/docs/getting-started.html b/docs/getting-started.html index 6dc53c6..070c5b3 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -270,6 +270,32 @@
    +
    +
    +
    + + + + +
    +
    + + + +
    +
    +
    +

    Installation

    @@ -574,10 +600,10 @@ gulp.task('prefix', function() {

    April 2017

    • - Accordions: used to toggle sections of content NEW + Accordions: used to toggle sections of content
    • - Filters: CSS only content filters NEW + Filters: CSS only content filters
    • Comparison Sliders: sliders for comparing two images diff --git a/docs/layout.html b/docs/layout.html index 19d5c6f..39013f3 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -262,6 +262,35 @@
    +
    +

    Layout

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

    Flexbox grid

    diff --git a/docs/src/docs.scss b/docs/src/docs.scss index a065342..11da1f6 100644 --- a/docs/src/docs.scss +++ b/docs/src/docs.scss @@ -132,6 +132,23 @@ margin: 1.5rem 0; } + .docs-ad { + background: $bg-color; + border-radius: $border-radius; + display: inline-block; + padding: $layout-spacing; + position: relative; + + &::before { + content: "AD"; + color: $gray-color; + font-size: $font-size-sm; + position: absolute; + right: $layout-spacing; + top: $unit-h; + } + } + .column { padding: $layout-spacing; } diff --git a/docs/utilities.html b/docs/utilities.html index 9247349..b23adda 100644 --- a/docs/utilities.html +++ b/docs/utilities.html @@ -262,6 +262,35 @@
    +
    +

    Utilities

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

    Color utilities

    -- cgit v1.3.1-23-gd82d