@@ -39,19 +34,19 @@

@@ -252,11 +247,11 @@

Accordions

Accordions are used to toggle sections of content.

Accordions are used to toggle sections of content.

@@ -405,9 +400,9 @@

Autocomplete

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input.

@@ -532,9 +527,9 @@

Avatars

Avatars are user profile pictures.

Avatars are user profile pictures.

@@ -613,9 +608,9 @@

Badges

Badges are often used as unread number indicators.

Badges are often used as unread number indicators.

@@ -689,9 +684,9 @@

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.

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.

@@ -734,7 +729,7 @@ </div> -

Slider bars

@@ -784,9 +779,26 @@

Breadcrumbs

Breadcrumbs are used as navigational hierarchies to indicate current location.

+ +

- + Home
+ + Settings + +
Search result: - + Spectre

<ul class="breadcrumb">
   <li class="breadcrumb-item">
-    <a href="#">
-      Home
-    </a>
+    <a href="#">Home</a>
   </li>
   <li class="breadcrumb-item">
-    <a href="#">
-      Profile
-    </a>
+    <a href="#">Settings</a>
   </li>
   <li class="breadcrumb-item">
-    <a href="#">
-      Change avatar
-    </a>
+    <a href="#">Change avatar</a>
   </li>
 </ul>

Cards

Cards are flexible content containers.

Cards are flexible content containers.

@@ -859,7 +870,7 @@ OS X El Capitan

Microsoft

Software and hardware

@@ -873,7 +884,7 @@

Apple

Hardware and software

@@ -893,19 +904,16 @@

Google

+ +

Google I/O

Software and hardware

- Organize the world’s information and make it universally accessible and useful. -

- Search - Share + An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.

@@ -926,7 +934,7 @@

Apple

Hardware and software

@@ -939,16 +947,19 @@

- -

Google I/O

Google

Software and hardware

- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond. + Organize the world’s information and make it universally accessible and useful. +

+ Search + Share

@@ -963,8 +974,8 @@ <img src="img/osx-el-capitan.jpg" class="img-responsive" /> </div> <div class="card-header"> - <h4 class="card-title">Microsoft</h4> - <h6 class="card-subtitle">Software and hardware</h6> + <div class="card-title h5">Microsoft</div> + <div class="card-subtitle">Software and hardware</div> </div> <div class="card-body"> Empower every person and every organization on the planet to achieve more. @@ -978,9 +989,9 @@

Chips

Chips are complex entities in small blocks.

Chips are complex entities in small blocks.

@@ -1036,9 +1047,9 @@

Menus

Menus are vertical list of links or buttons for actions and navigation.

Menus are vertical list of links or buttons for actions and navigation.

@@ -1118,9 +1129,9 @@ </ul> -

Dropdown menus

The dropdown is a combination of buttons and menus.

The dropdown is a combination of buttons and menus.

@@ -1234,9 +1245,9 @@

Modals

Modals are flexible dialog prompts.

Modals are flexible dialog prompts.

@@ -1295,7 +1306,7 @@ </div> -

Modal sizes

Pagination

@@ -1501,7 +1512,7 @@

Navs

@@ -1572,9 +1583,9 @@

Popovers

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

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

@@ -1689,9 +1700,9 @@

Steps

Steps are progress indicators of a sequence of task steps.

Steps are progress indicators of a sequence of task steps.

@@ -1751,9 +1762,9 @@

Tabs

Tabs enable quick switch between different views.

Tabs enable quick switch between different views.

@@ -1931,9 +1942,9 @@

Tiles

Tiles are repeatable or embeddable information blocks.

Tiles are repeatable or embeddable information blocks.

@@ -1993,7 +2004,7 @@ </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.

@@ -2039,14 +2050,15 @@

Toasts

Toasts are used to show alert or information to users.

Toasts are used to show alert or information to users.

Toast Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

@@ -2098,22 +2110,22 @@

Tooltips

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

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

- +

@@ -2128,33 +2140,15 @@

- -
Previous
-
Layout
- -
- -
Next
-
Utilities
- -

+ +

- + + diff --git a/docs/img/spectre-logo.svg b/docs/img/spectre-logo.svg new file mode 100644 index 0000000..b6b53ef --- /dev/null +++ b/docs/img/spectre-logo.svg @@ -0,0 +1,19 @@ + diff --git a/docs/index.html b/docs/index.html index cc806a2..e5672fd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,27 +12,24 @@ -

Spectre.css

The lightweight, responsive and modern CSS framework

- Docs + Docs GitHub

@@ -63,7 +60,7 @@ Modern

- Carefully designed elements and components + Elegantly designed and developed elements and components

@@ -71,529 +68,89 @@

- - - Getting started - -

- -

+ +

Spectre Twitter

- - - Elements - -

- Typography -
- Tables -
- Buttons -
- Forms -
- Icons -
- Labels -
- Codes -
- Media -

+ For the latest announcements and updates, follow on Twitter: @spectrecss.

- - - Layout - -

- -

+ Follow

- - - Components - -

- Accordions -
- Autocomplete -
- Avatars -
- Badges -
- Bars -
- Breadcrumbs -
- Cards -
- Chips -
- Menus -
- Modals -
- Navs -
- Pagination -
- Popovers -
- Steps -
- Tabs -
- Tiles -
- Toasts -
- Tooltips -

PayPal Donate

- - - Utilities - -

- -

+ Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥

- - - Experimentals - -

- -

+ Donate

- - -

Introduction

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

Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.

- -

Installation

There are 5 ways to get started with Spectre CSS framework in your projects. You can either install manually, from CDN or use NPM, Yarn and Bower.

Install manually

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

Download Spectre.css

Include spectre.css located in /docs/dist in your website or Web app <head>. Also, you can add spectre-icons.css and spectre-exp.css accordingly.

- - -

<link rel="stylesheet" href="spectre.min.css" />
-<link rel="stylesheet" href="spectre-exp.min.css" />
-<link rel="stylesheet" href="spectre-icons.min.css" />
-

- -

Install from CDN

Alternatively, you can use the unpkg CDN to load compiled Spectre.css.

- - -

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />
-

- -

Install with NPM

- - -

$ npm install spectre.css --save
-

- -

Install with Yarn

- - -

$ yarn add spectre.css
-

- -

Install with Bower

- - -

$ bower install spectre.css --save
-

- -

Custom version

Spectre uses Gulp for compiling CSS. You can customize your version of Spectre.css by editing LESS files in /src directory or removing unneeded components from spectre.less, spectre-exp.less and spectre-icons.less.

Then, you can build the CSS file from the command line:

Navigate to the root directory of Spectre.
Run npm install. NPM will install all dev dependencies as listed in package.json.
When completed, run gulp build to compile LESS to CSS and minify files.
You can find compiled CSS files in /dist directory.

You can watch file changes and rebuild CSS files by using gulp watch.

Spectre Logo

- - -

spectre/
-├── dist/                               // Build folder (Git ignored)
-│   ├── spectre-exp.css
-│   ├── spectre-exp.min.css
-│   ├── spectre-icons.css
-│   ├── spectre-icons.min.css
-│   ├── spectre.css
-│   └── spectre.min.css
-│
-├── docs/
-│   ├── dist/                           // Pre-built CSS folder
-│   │   ├── spectre-exp.css
-│   │   ├── spectre-exp.min.css
-│   │   ├── spectre-icons.css
-│   │   ├── spectre-icons.min.css
-│   │   ├── spectre.css
-│   │   └── spectre.min.css
-|   ├── css/                            // Docs CSS file
-│   │   └── docs.css
-|   ├── src/
-│   │   └── docs.less
-│   ├── ../
-│   ├── index.html
-│   └── ...
-│
-├── src/                                // Source LESS files
-│   ├── mixins.less
-│   ├── variables.less
-│   └── ...
-│
-├── spectre-exp.less
-├── spectre-icons.less
-└── spectre.less
-

- -

Variables

Spectre.css is designed with consistent design language. You can modify variables.less to create your new or match existing design. -

Colors

#5764c6

Primary

#eff1fa

Secondary

Responsive Resizer

#454d5d

Dark

#727e96

Gray dark

#acb3c2

Gray

#e7e9ed

Gray light

#f0f1f4

Border

#f8f9fa

Background

#fff

Light

+ A responsive web test tool Responsive Resizer. You can use it online or clone the GitHub Repo to use it locally.

#32b643

Success

#ffb700

Warning

#e85600

Error

+ Use online

- -

Accessibility coming soon

- -

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
Microsoft Edge Last 4
Firefox Last 4
Safari Last 4
Opera Last 4
Internet Explorer 10+

Spectre Docs

+ Spectre Docs experience has been completely rewritten and improved. +

+ Getting started +

- -

What's new

April 2017

- Accordions: used to toggle sections of content NEW -
- Filters: CSS only content filters NEW -
- Comparison Sliders: sliders for comparing two images NEW -
- Timelines: ordered sequences of activities NEW -

March 2017

- Icons: single-element, responsive and pure CSS icons NEW -
- Popovers: small overlay content containers -
- Panels: flexible view container layout with auto-expand content section -
- Carousels: slideshows for cycling images -
- Calendars: date or date range picker and events display -

February 2017

New Documents experience
- Bars: represent the progress of a task or the value within the known range -
- Steps: progress indicators of a sequence of task steps -
- Tiles: repeatable or embeddable information blocks -
- Experimentals: experimental elements and features -
- Meters, Parallax, Progress and Sliders -

March 2016

Initial commit

Accordions

+ Accordions are used to toggle sections of content. +

+ Learn more +

- -

- -
Next
-
Elements
- -

+ diff --git a/docs/layout.html b/docs/layout.html index 1b224b5..888b093 100644 --- a/docs/layout.html +++ b/docs/layout.html @@ -12,24 +12,19 @@ -

- -

@@ -39,19 +34,19 @@

@@ -252,11 +247,11 @@

Flexbox grid

Layout includes flexbox based responsive grid system with 12 columns.

Layout includes flexbox based responsive grid system with 12 columns.

@@ -299,22 +294,22 @@

col-12 (100%)

col-9 (75%)

col-6 (50%)

col-3 (25%)

@@ -325,10 +320,10 @@

col-6 (gapless)

@@ -338,10 +333,10 @@

col-8

@@ -364,28 +359,28 @@

Responsive grid

Spectre provides a neat responsive layout grid system and responsive visibility utilities.

col-lg-6

col-md-6

col-sm-6

col-xs-6

@@ -410,7 +405,7 @@ </div> -

Responsive container

The responsive layout also provides fixed-width containers. Use grid-480, grid-960 or grid-1280 to container for a fixed-width container with the specific max-width.

@@ -423,7 +418,7 @@ </div> -

Responsive visibility

The responsive visibility utilities help show and hide elements on specific viewport sizes.

@@ -563,9 +558,9 @@

Navbar

Navbar is a layout container that appears in the header of apps and websites.

Navbar is a layout container that appears in the header of apps and websites.

@@ -604,6 +599,10 @@ </header> +

You can use navbar-center class to have a centered section.

<header class="navbar">
@@ -644,9 +640,9 @@


 
         
-          #Panels
+          #Panels
           
-            Panels are flexible view container layout with auto-expand content section.
+            Panels are flexible view container layout with auto-expand content section.
           
           
             
@@ -655,7 +651,7 @@
                   
                     
                   
-                  Bruce Banner
+                  Bruce Banner
                   THE HULK
                 
                 
@@ -714,7 +710,7 @@
             
               
                 
-                  Comments
+                  Comments
                 
                 
                   
@@ -805,9 +801,9 @@
         
 
         
-          #Empty states / blank slates
+          #Empty states / blank slates
           
-            Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
+            Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.
           
           
             
@@ -815,7 +811,7 @@
                 
                   
                 
-                You have no new messages
+                You have no new messages
                 Click the button to start a conversation
                 
                   
@@ -827,7 +823,7 @@
                 
                   
                 
-                You've successfully signed up
+                You've successfully signed up
                 Click the button to invite your friends
                 
                   
@@ -842,7 +838,7 @@
                 
                   
                 
-                You are not following anyone
+                You are not following anyone
                 Start to meet new friends
                 
                   
@@ -861,7 +857,7 @@
   <div class="empty-icon">
     <i class="icon icon-people"></i>
   </div>
-  <h4 class="empty-title">You have no new messages</h4>
+  <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>
@@ -871,33 +867,15 @@
 
         
 
-        
-          
-          
-            
-              
-                Previous
-                Elements
-              
-            
-            
-              
-                Next
-                Components
-              
-            
-          
-        
+        
+          GitHub Repo | Twitter | PayPal Donate | Version 
+          Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
+        
+
       
     
   
 
-  
-    
-      Documents | GitHub Repo | Twitter | PayPal Donate | Version 
-      Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.
-    
-

#Accordions

#Accordions

#Autocomplete

#Autocomplete

#Avatars

#Avatars

#Badges

#Badges

#Bars

#Bars

Slider bars

Slider bars

#Breadcrumbs

#Breadcrumbs

#Cards

#Cards

#Chips

#Chips

#Menus

#Menus

#Dropdown menus

#Dropdown menus

#Modals

#Modals

Modal sizes

Modal sizes

#Pagination

#Pagination

#Navs

#Navs

#Popovers

#Popovers

#Steps

#Steps

#Tabs

#Tabs

#Tiles

#Tiles

Compact tiles

Compact tiles

#Toasts

#Toasts

Toast Title

#Tooltips

#Tooltips

Layout

Utilities

Spectre.css

The lightweight, responsive and modern CSS framework

#Introduction

#Installation

Install manually

Install from CDN

Install with NPM

Install with Yarn

Install with Bower

#Custom version

#Variables

Colors

#Accessibility coming soon

#Browser support

#What's new

Elements

#Flexbox grid

#Flexbox grid

#Responsive grid

#Responsive grid

Responsive container

Responsive container

Responsive visibility

Responsive visibility

#Navbar

#Navbar

#Panels

#Panels

You are not following anyone

Elements

Components

Accordions

Accordions

Autocomplete

Autocomplete

Avatars

Avatars

Badges

Badges

Bars

Bars

Breadcrumbs

Breadcrumbs

Cards

Cards

Chips

Chips

Menus

Menus

Dropdown menus

Dropdown menus

Modals

Modals

Pagination

Pagination

Navs

Navs

Popovers

Popovers

Steps

Steps

Tabs

Tabs

Tiles

Tiles

Toasts

Toasts

Tooltips

Tooltips

Introduction

Installation

Custom version

Variables

Accessibility coming soon

Browser support

What's new

Flexbox grid

Flexbox grid

Responsive grid

Responsive grid

Navbar

Navbar

Panels

Panels