diff --git a/README.md b/README.md index 4f81a0d87..65b957ae4 100644 --- a/README.md +++ b/README.md @@ -3,18 +3,25 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and - Lightweight (~10KB gzipped) starting point for your projects - Flexbox-based, responsive and mobile-friendly layout -- Carefully designed elements and components +- Elegantly designed and developed elements and components Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with LESS compiler. -Read [the documentation](https://picturepan2.github.io/spectre/) to learn more. +Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html) to learn more. ### Getting started -There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower. +There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower. ##### Install manually -Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). +Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. + +`` + +##### Install from CDN +Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load compiled Spectre.css. + +`` ##### Install with NPM `$ npm install spectre.css --save` @@ -25,13 +32,11 @@ Download the compiled and minified [Spectre CSS file](https://github.com/picture ##### Install with Bower `$ bower install spectre.css --save` -And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. -`` ### Compiling custom version -You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling). +You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling). ### Documentation and examples @@ -47,35 +52,37 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes #### Layout -- [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system +- [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 - [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section - [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens #### 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 - [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 -- [Navigation](https://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs +- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages - [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 #### Utilities -- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things +- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities #### Experimentals -- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content - [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 diff --git a/bower.json b/bower.json index c3a0b9840..a20e4bb65 100644 --- a/bower.json +++ b/bower.json @@ -1,12 +1,12 @@ { "name": "spectre.css", - "version": "0.2.14", + "version": "0.2.15", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", "license": "MIT", "author": "Yan Zhu ", - "main": "dist/spectre.css", + "main": "docs/dist/spectre.css", "keywords": [ "css", "framework", diff --git a/docs/components.html b/docs/components.html index c42b6df7b..3143683f2 100644 --- a/docs/components.html +++ b/docs/components.html @@ -6,103 +6,407 @@ - Components - Spectre.css + Components - Spectre.css CSS Framework -
-
- -
-
- -
-
- + + -
-
-

Autocomplete

-
-

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

-
+
+
+

Accordions

+
+

Accordions are used to toggle sections of content.

+
+
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+ + +
+ +
+
+
+
+
+ + +
<!-- standard Accordions examples -->
+<div class="accordion">
+  <div class="accordion-item">
+    <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden/>
+    <label class="accordion-header">
+      <i class="icon icon-arrow-right mr-5"></i>
+      Title
+    </label>
+    <div class="accordion-body">
+      <!-- Accordions content -->
+    </div>
+  </div>
+  <!-- Accordions item -->
+</div>
+
+<!-- mutually exclusive Accordions examples -->
+<div class="accordion">
+  <div class="accordion-item">
+    <input type="radio" id="accordion-1" name="accordion-radio" hidden/>
+    <label class="accordion-header">
+      Title
+    </label>
+    <div class="accordion-body">
+      <!-- Accordions content -->
+    </div>
+  </div>
+  <!-- Accordions item -->
+</div>
+
+ +
+ +
+

Autocomplete

+
+

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

+
@@ -113,12 +417,12 @@ @@ -148,7 +452,10 @@ Thor Odinson - +
+ + +
  • @@ -180,10 +487,10 @@
-
+

Add a container element with the form-autocomplete class. There are 2 parts of it, one is form-autocomplete-input, another is menu component. You may add the is-focused class to form-autocomplete-input to make it appear as focus state.

Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.

-
+ 
<div class="form-autocomplete">
@@ -220,29 +527,29 @@
 </div>
-
+
-
-

Avatars

-
-

Avatars are user profile pictures.

-
+
+

Avatars

+
+

Avatars are user profile pictures.

+
- + Avatar
- + Avatar
- + Avatar
- + Avatar
- + Avatar
@@ -253,31 +560,31 @@
-
+

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.

-
+
- - + Avatar + Avatar
- - + Avatar + Avatar
- - + Avatar + Avatar
- - + Avatar + Avatar
- - + Avatar + Avatar
@@ -285,29 +592,29 @@ 
<!-- Basic avatar examples -->
 <figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" />
+  <img src="img/avatar-1.png" alt="..." />
 </figure>
 
 <figure class="avatar avatar-xl">
-  <img src="img/avatar-1.png" />
-  <img src="img/avatar-5.png" class="avatar-icon" />
+  <img src="img/avatar-1.png" alt="..." />
+  <img src="img/avatar-5.png" class="avatar-icon" alt="..." />
 </figure>
 
 <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;"></figure>
 
 <!-- Show initals when avatar image is unavailable or not fully loaded -->
 <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
-  <img src="img/avatar-1.png" />
+  <img src="img/avatar-1.png" alt="..." />
 </figure>
-
+ -
-

Badges

-
-

Badges are often used as unread number indicators.

-
+
+

Badges

+
+

Badges are often used as unread number indicators.

+
@@ -330,10 +637,10 @@
-
+

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.

-
+
@@ -355,9 +662,9 @@
-
+

Badges support button and avatars elements as well.

-
+ 
<span class="badge">
@@ -377,13 +684,13 @@
 </figure>
-
+ -
-

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

+
+

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.

+
@@ -408,10 +715,10 @@
-
+

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.

-
+ 
<div class="bar bar-sm">
@@ -425,7 +732,7 @@
 </div>
-

Slider bars

+

Slider bars

@@ -448,10 +755,10 @@
-
+

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.

-
+ 
<!-- slider -->
@@ -472,21 +779,101 @@
 </div>
-
+ + + -
-

Cards

-
-

Cards are flexible content containers.

-
+
+

Cards

+
+

Cards are flexible content containers.

+
- + OS X El Capitan
-
Microsoft
+
Microsoft
Software and hardware
@@ -500,11 +887,11 @@
-
Apple
+
Apple
Hardware and software
- + OS X Yosemite
To make a contribution to the world by making tools for the mind that advance humankind. @@ -520,26 +907,23 @@
+
+ macOS Sierra +
-
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.
- + OS X El Capitan
Buy @@ -553,36 +937,39 @@
-
Apple
+
Apple
Hardware and software
To make a contribution to the world by making tools for the mind that advance humankind.
- + macOS Sierra
-
- -
- -
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. +
+
+ OS X Yosemite +
+
+ Search + Share
-
+

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">
@@ -590,8 +977,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.
@@ -602,13 +989,13 @@
 </div>
-
+ -
-

Chips

-
-

Chips are complex entities in small blocks.

-
+
+

Chips

+
+

Chips are complex entities in small blocks.

+
-
+

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

-
+ 
<label class="chip">
@@ -660,20 +1047,20 @@
 </label>
-
+ - + -
-

Modals

-
-

Modals are flexible dialog prompts.

-
+
+

Modals

+
+

Modals are flexible dialog prompts.

+
Open Modal @@ -881,7 +1273,7 @@

Dropdown menus
-
Modal title
+
Modal title
@@ -905,10 +1297,10 @@

Candy ipsum

-
+

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-content 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">
@@ -916,7 +1308,7 @@ 
Candy ipsum

   <div class="modal-container">
     <div class="modal-header">
       <button class="btn btn-clear float-right"></button>
-      <div class="modal-title">Modal title</div>
+      <div class="modal-title h5">Modal title</div>
     </div>
     <div class="modal-body">
       <div class="content">
@@ -930,7 +1322,7 @@ 
Candy ipsum

 </div>
-

Modal sizes

+

Modal sizes

@@ -938,315 +1330,74 @@

Candy ipsum

-
Modal title
+
Modal title
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus.
-
-
-
-
-
-
-
-
- -
Modal title
-
-
-
-
-
- - -
-
- - - -
-
-
-
-
- - -
-
-
-
-
-
-

Add the modal-sm class for a smaller modal dialog.

-
- - -
<div class="modal modal-sm">
-  <div class="modal-overlay"></div>
-  <div class="modal-container">
-    <!-- modal structure here -->
-  </div>
-</div>
-
- -
- - + -
-

Popovers

-
-

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

-
+
+

Popovers

+
+

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

+
@@ -1460,7 +1612,7 @@

Navs

-
Apple
+
Apple
Software and hardware
@@ -1481,7 +1633,7 @@

Navs

-
Apple
+
Apple
Software and hardware
@@ -1502,7 +1654,7 @@

Navs

-
Apple
+
Apple
Software and hardware
@@ -1523,7 +1675,7 @@

Navs

-
Apple
+
Apple
Software and hardware
@@ -1537,10 +1689,10 @@

Navs

-
+

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">
@@ -1561,13 +1713,13 @@ 
Navs

 </div>
-
+ -
-

Steps

-
-

Steps are progress indicators of a sequence of task steps.

-
+
+

Steps

+
+

Steps are progress indicators of a sequence of task steps.

+
    @@ -1602,9 +1754,9 @@

    Navs

-
+

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">
@@ -1623,19 +1775,199 @@ 
Navs

 </ul>
-
+ + +
+

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

Tiles

-
-

Tiles are repeatable or embeddable information blocks.

-
+
+

Tiles

+
+

Tiles are repeatable or embeddable information blocks.

+
- + Avatar
@@ -1652,7 +1984,7 @@

Navs

- + Avatar
@@ -1666,10 +1998,10 @@

Navs

-
+

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">
@@ -1688,10 +2020,11 @@ 
Navs

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

-
+
@@ -1730,17 +2063,18 @@

Navs

</div> -
+ -
-

Toasts

-
-

Toasts are used to show alert or information to users.

-
+
+

Toasts

+
+

Toasts are used to show alert or information to users.

+
+
Toast Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -1751,9 +2085,9 @@

Navs

-
+

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.

-
+
@@ -1774,9 +2108,9 @@

Navs

-
+

And you can add the toast-primary, toast-success, toast-warning or toast-error class for additional toast colors.

-
+ 
<div class="toast">
@@ -1789,68 +2123,48 @@ 
Navs

 </div>
-
+ -
-

Tooltips

-
-

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

-
+
+

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>
-
- -
-
- -
+ + + + -
-
- - + + + + + diff --git a/docs/img/spectre-logo.svg b/docs/img/spectre-logo.svg new file mode 100644 index 000000000..b6b53ef59 --- /dev/null +++ b/docs/img/spectre-logo.svg @@ -0,0 +1,19 @@ + + + Spectre.css Logo + + + + + + + + + + + + + + + + diff --git a/docs/index.html b/docs/index.html index 0951255ea..20489da20 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,35 +6,31 @@ - Spectre.css - The lightweight, responsive and modern CSS framework + Spectre.css - A lightweight, responsive and modern CSS framework -
-
- -
-
+
+
+
+ +
+
+
-
-
+
+

Spectre.css

-

The lightweight, responsive and modern CSS framework

+

A lightweight, responsive and modern CSS framework

- Docs - GitHub + Docs + GitHub
@@ -64,350 +60,79 @@

The lightweight, responsive and modern CSS frameworkModern

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

And include spectre.css located in /docs/dist in your website or Web app <head>. If you want the Spectre Icons and Experimentals, 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" />
-
- -
-
- -
-

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:

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

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

-
- - -
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
-
-
+
+
+
+
+
+
+
Spectre Twitter
-
-
-
-
#454d5d
-
Dark
-
-
-
-
-
#727e96
-
Gray dark
-
-
-
-
-
#acb3c2
-
Gray
-
-
-
-
-
#e7e9ed
-
Gray light
-
-
-
-
-
#f0f1f4
-
Border
-
-
-
-
-
#f8f9fa
-
Background
-
-
-
-
-
#fff
-
Light
-
-
+
+ For the latest announcements and updates, follow on Twitter: @spectrecss.
-
-
-
-
#32b643
-
Success
-
-
-
-
-
#ffb700
-
Warning
-
-
-
-
-
#e85600
-
Error
-
-
+
+ Follow
-
-
- -
-

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

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
    • -
-
-
- -
-
- -
+ + +
+
+
+
PayPal Donate
+
+
+ Spectre.css is completely free to use. If you enjoy it, please consider donating for the further development. ♥ +
+
+ Donate +
+
+
+
+
+
+
Spectre Docs
+
+
+ Spectre Docs experience has been completely rewritten and improved. +
+
+ Explore +
+
+
- - + + -