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/css/docs.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'docs/css/docs.css') diff --git a/docs/css/docs.css b/docs/css/docs.css index d3b773d..4295995 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -1,7 +1,7 @@ /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */ /* Spectre version */ .version::after { - content: "0.4.1"; + content: "0.4.2"; } /* Spectre New Docs */ @@ -251,6 +251,11 @@ filter: grayscale(75%); } +.s-content .off-canvas { + height: 20rem; + position: relative; +} + .s-brand { color: #5764c6; left: 0; -- 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/css/docs.css') 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