From 9364b516044851a6e15df580bbf409bed4ed44f6 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Wed, 20 Sep 2017 21:02:42 +0800 Subject: Update Readme and the Docs --- README.md | 63 ++++++++++++++++++++++++++++++++------------------------------- 1 file changed, 32 insertions(+), 31 deletions(-) (limited to 'README.md') diff --git a/README.md b/README.md index 40c9431..768bd9f 100644 --- a/README.md +++ b/README.md @@ -49,49 +49,50 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [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 classes +- [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video ### 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 -- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites +- [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) ### Components -- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content -- [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type -- [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar -- [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators -- [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs) - navigational hierarchy -- [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range -- [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers -- [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks -- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens -- [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation -- [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links -- [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts -- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages -- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section -- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers -- [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps -- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views -- [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks -- [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications -- [Tooltips](https://picturepan2.github.io/spectre/components.html#tooltips) - simple tooltip built entirely in CSS +- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) +- [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) +- [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) +- [Badges](https://picturepan2.github.io/spectre/components.html#badges) +- [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs) +- [Bars](https://picturepan2.github.io/spectre/components.html#bars) +- [Cards](https://picturepan2.github.io/spectre/components.html#cards) +- [Chips](https://picturepan2.github.io/spectre/components.html#chips) +- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) +- [Menus](https://picturepan2.github.io/spectre/components.html#menus) +- [Navs](https://picturepan2.github.io/spectre/components.html#navs) +- [Modals](https://picturepan2.github.io/spectre/components.html#modals) +- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) +- [Panels](https://picturepan2.github.io/spectre/components.html#panels) +- [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) +- [Steps](https://picturepan2.github.io/spectre/components.html#steps) +- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) +- [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) +- [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) +- [Tooltips](https://picturepan2.github.io/spectre/components.html#tooltips) ### Utilities - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities ### Experimentals -- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) - date or date range picker and events display -- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - slideshows for cycling images -- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - sliders for comparing two images, built entirely in CSS -- [Filters](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only content filters -- [Meters](https://picturepan2.github.io/spectre/experimentals.html#meters) - representing the value within the known range -- [Parallax](https://picturepan2.github.io/spectre/experimentals.html#parallax) - acting like Apple TV/tvOS hover parallax effect, built entirely in CSS -- [Progress](https://picturepan2.github.io/spectre/experimentals.html#progress) - indicators for the progress completion of a task -- [Sliders](https://picturepan2.github.io/spectre/experimentals.html#sliders) - selecting values from ranges -- [Timelines](https://picturepan2.github.io/spectre/experimentals.html#timelines) - ordered sequences of activities +- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) +- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only +- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - CSS only +- [Filters](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only +- [Meters](https://picturepan2.github.io/spectre/experimentals.html#meters) +- [Off-canvas](https://picturepan2.github.io/spectre/experimentals.html#off-canvas) - CSS only +- [Parallax](https://picturepan2.github.io/spectre/experimentals.html#parallax) - CSS only +- [Progress](https://picturepan2.github.io/spectre/experimentals.html#progress) +- [Sliders](https://picturepan2.github.io/spectre/experimentals.html#sliders) +- [Timelines](https://picturepan2.github.io/spectre/experimentals.html#timelines) ## Browser support Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended: -- 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 'README.md') 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