diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fa1dc38f..8a978036a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,13 @@ ## Spectre.css Changelog +### [v0.4.1](https://github.com/picturepan2/spectre/releases/tag/v0.4.1) + +- Add default modifier to all variables +- Add `address` reset which changes font-style to normal +- Add Details and Summary Accordions support +- Fix responsive video +- Update the Docs + ### [v0.4.0](https://github.com/picturepan2/spectre/releases/tag/v0.4.0) - Switch from LESS to SASS diff --git a/README.md b/README.md index 4921e81ad..40c943135 100644 --- a/README.md +++ b/README.md @@ -1,46 +1,46 @@ # Spectre.css + Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. - Lightweight (~10KB gzipped) starting point for your projects - Flexbox-based, responsive and mobile-friendly layout - 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. +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 SASS/SCSS compiler. Spectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) for the further development. ♥ -### Getting started +## Getting started 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). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. +### Install manually +Download the compiled and minified [Spectre CSS files](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 from CDN +Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cdnjs.com/libraries/spectre.css) CDN to load compiled Spectre.css. -`` +`` -#### Install with NPM +### Install with NPM `$ npm install spectre.css --save` -#### Install with Yarn +### Install with Yarn `$ yarn add spectre.css` -#### Install with Bower +### Install with Bower `$ bower install spectre.css --save` - -### Compiling custom version +## Compiling custom version You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling). -### Documentation and examples +## Documentation and examples -#### Elements +### 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 @@ -51,12 +51,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [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 -#### Layout +### 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 -#### Components +### 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 @@ -78,11 +78,11 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [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 - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities -#### Experimentals +### 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 @@ -93,13 +93,14 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt - [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 -### Browser support +## 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: -- Chrome (last 4) -- Microsoft Edge (last 4) -- Firefox (last 4) -- Safari (last 4) -- Opera (last 4) + +- Chrome (LAST 4) +- Microsoft Edge (LAST 4) +- Firefox (EXTENDED SUPPORT RELEASE) +- Safari (LAST 4) +- Opera (LAST 4) - Internet Explorer 10+ Designed and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated. diff --git a/bower.json b/bower.json index 5ac3e8f14..37056bd19 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "spectre.css", - "version": "0.4.0", + "version": "0.4.1", "description": "Spectre.css: a lightweight, responsive and modern CSS framework.", "homepage": "http://picturepan2.github.io/spectre", "repository": "picturepan2/spectre", diff --git a/docs/components.html b/docs/components.html index 98ceca1c9..c009ad6ca 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1,15 +1,15 @@ - - - - - + + + + + Components - Spectre.css CSS Framework - - - + + +
@@ -17,14 +17,14 @@ - +

 <!-- buttons with disabled state -->
 <button class="btn disabled" tabindex="-1">disabled button</button>
@@ -701,7 +701,7 @@ 

Button states

- +
<!-- a button with loading state -->
 <button class="btn loading">button</button>
 
@@ -743,7 +743,7 @@

Button groups

If you want to use buttons as a group, add the btn-group class to the container. You can add the btn-group-block class for a full-width button group.

- +
<div class="btn-group btn-group-block">
   <button class="btn">first button</button>
   <button class="btn">second button</button>
@@ -762,11 +762,11 @@ 

Form
- +
- +
@@ -774,7 +774,7 @@

Form
<!-- form input control -->
 <div class="form-group">
   <label class="form-label" for="input-example-1">Name</label>
-  <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
 </div>
 
@@ -832,11 +832,11 @@

Form
@@ -848,11 +848,11 @@

Form <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" checked /> + <input type="radio" name="gender" checked> <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" /> + <input type="radio" name="gender"> <i class="form-icon"></i> Female </label> </div> @@ -862,13 +862,13 @@

Form
@@ -878,7 +878,7 @@

Form
<!-- form switch control -->
 <div class="form-group">
   <label class="form-switch">
-    <input type="checkbox" />
+    <input type="checkbox">
     <i class="form-icon"></i> Send me emails with news and tips
   </label>
 </div>
@@ -888,13 +888,13 @@ 

Form
@@ -904,7 +904,7 @@

Form
<!-- form checkbox control -->
 <div class="form-group">
   <label class="form-checkbox">
-    <input type="checkbox" />
+    <input type="checkbox">
     <i class="form-icon"></i> Remember me
   </label>
 </div>
@@ -926,7 +926,7 @@ 

Horizontal forms

- +

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

Horizontal forms

- +
@@ -943,11 +943,11 @@

Horizontal forms

@@ -968,7 +968,7 @@

Horizontal forms

@@ -985,7 +985,7 @@

Horizontal forms

@@ -1001,14 +1001,14 @@

Horizontal forms

- +
<form class="form-horizontal">
   <div class="form-group">
     <div class="col-3">
       <label class="form-label" for="input-example-1">Name</label>
     </div>
     <div class="col-9">
-      <input class="form-input" type="text" id="input-example-1" placeholder="Name" />
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
     </div>
   </div>
   <!-- form structure -->
@@ -1024,7 +1024,7 @@ 

Form sizes

- +
+
+
- +
- +
@@ -1080,28 +1080,28 @@

Form icons

- +
- +
- +
- +
<!-- form input with Spectre icon -->
 <div class="has-icon-left">
-  <input type="text" class="form-input" placeholder="..." />
+  <input type="text" class="form-input" placeholder="...">
   <i class="form-icon icon icon-check"></i>
 </div>
 
@@ -1113,19 +1113,19 @@

Form icons

- +
- +
- +
@@ -1133,7 +1133,7 @@

Form icons

<!-- form input with loading icon -->
 <div class="has-icon-right">
-  <input type="text" class="form-input" placeholder="..." />
+  <input type="text" class="form-input" placeholder="...">
   <i class="form-icon loading"></i>
 </div>
 
@@ -1147,7 +1147,7 @@

Input types

- +
@@ -1163,7 +1163,7 @@

Input types

- +
@@ -1171,7 +1171,7 @@

Input types

- +
@@ -1179,7 +1179,7 @@

Input types

- +
@@ -1187,7 +1187,7 @@

Input types

- +
@@ -1195,7 +1195,7 @@

Input types

- +
@@ -1203,7 +1203,7 @@

Input types

- +
@@ -1211,7 +1211,7 @@

Input types

- +
@@ -1222,7 +1222,7 @@

Input groups

- + +
@@ -1241,7 +1241,7 @@

Input groups

- + +
@@ -1260,7 +1260,7 @@

Input groups

- + +
@@ -1280,23 +1280,23 @@

Input groups

If you want to attach text and button along with an input, add the input-group class to the input container. And add the input-group-addon class to the text element and input-group-btn to the button element.

- +
<!-- normal input group -->
 <div class="input-group">
   <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="..." />
+  <input type="text" class="form-input" placeholder="...">
 </div>
 
 <!-- large input group -->
 <div class="input-group">
   <span class="input-group-addon addon-lg">...</span>
-  <input type="text" class="form-input input-lg" placeholder="..." />
+  <input type="text" class="form-input input-lg" placeholder="...">
 </div>
 
 <!-- normal input group with button -->
 <div class="input-group">
   <span class="input-group-addon">...</span>
-  <input type="text" class="form-input" placeholder="..." />
+  <input type="text" class="form-input" placeholder="...">
   <button class="btn btn-primary input-group-btn">Submit</button>
 </div>
 
@@ -1311,17 +1311,17 @@

Form validation styles

form-input
- +

The name is valid.

- +

Passwords must have at least 8 characters.

- +

The Email address is unavailable.

@@ -1350,23 +1350,23 @@

Form validation styles

form-checkbox, radio and switch (Error status only)
@@ -1374,26 +1374,26 @@

Form validation styles

- +
<form>
   <!-- form validation class: has-success -->
   <div class="form-group has-success">
     <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input" type="text" id="input-example-1" placeholder="..." />
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
     <p class="form-input-hint">The name is invalid.</p>
   </div>
 
   <!-- form validation class: is-success -->
   <div class="form-group">
     <label class="form-label" for="input-example-1">Name</label>
-    <input class="form-input is-success" type="text" id="input-example-1" placeholder="..." />
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
     <p class="form-input-hint">The name is invalid.</p>
   </div>
 
   <!-- form validation example for checkbox, radio and switch -->
   <div class="form-group">
     <label class="form-checkbox is-error">
-      <input type="checkbox" />
+      <input type="checkbox">
       <i class="form-icon"></i> Remember me
     </label>
   </div>
@@ -1410,16 +1410,16 @@ 

Form disabled styles

- +
@@ -1433,7 +1433,7 @@

Form disabled styles

@@ -1443,7 +1443,7 @@

Form disabled styles

@@ -1696,7 +1696,7 @@

Object icons

- +
<i class="icon icon-menu"></i>
 
@@ -1734,7 +1734,7 @@

Lab

Add the label-rounded class to have rounded labels.

- +
<span class="label">default label</span>
 <span class="label label-primary">primary label</span>
 
@@ -1754,7 +1754,7 @@

Code </button>

- +
<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- code snippets --&gt;</span>
 &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
   Submit
@@ -1775,7 +1775,7 @@ 

Images

- macOS El Capitan Wallpaper + macOS El Capitan Wallpaper
@@ -1785,21 +1785,21 @@

Images

- macOS Yosemite Wallpaper + macOS Yosemite Wallpaper
img-fit-contain
- macOS Yosemite Wallpaper + macOS Yosemite Wallpaper
img-fit-cover
-
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="..." />
-<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="..." />
-<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="..." />
+
<img src="img/osx-el-capitan.jpg" class="img-responsive ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-contain ..." alt="...">
+<img src="img/osx-el-capitan.jpg" class="img-fit-cover ..." alt="...">
 
@@ -1808,14 +1808,14 @@

Images

- macOS Yosemite Wallpaper + macOS Yosemite Wallpaper
macOS Yosemite wallpaper
<figure class="figure">
-  <img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="..." />
+  <img src="img/osx-yosemite-2.jpg" class="img-responsive ..." alt="...">
   <figcaption class="figure-caption text-center">macOS Yosemite wallpaper</figcaption>
 </figure>
 
@@ -1832,10 +1832,16 @@

Video

- +
+

For responsive video elements, you can add the video-responsive class directly to the video.

+
+ +
<div class="video-responsive video-responsive-4-3">
   <iframe src="..." width="..." height="..." frameborder="0" allowfullscreen></iframe>
 </div>
+
+<video class="video-responsive" src="...">...</video>
 
diff --git a/docs/examples/starter.html b/docs/examples/starter.html index cbeca2d88..b8b774fb6 100644 --- a/docs/examples/starter.html +++ b/docs/examples/starter.html @@ -1,13 +1,13 @@ - - - - + + + + Starter Page Example - +
diff --git a/docs/experimentals.html b/docs/experimentals.html index 1a34fe897..8c16bfc73 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -1,16 +1,16 @@ - - - - - + + + + + Experimentals - Spectre.css CSS Framework - - - - + + + +
@@ -18,14 +18,14 @@