Skip to content

Commit

Permalink
Merge pull request #262 from picturepan2/0.3.2
Browse files Browse the repository at this point in the history 
0.3.2
  • Loading branch information
@picturepan2
picturepan2 committed Aug 28, 2017
2 parents 7395257 + 00f87b2 commit 66c492f
Show file tree
Hide file tree
Showing 30 changed files with 415 additions and 517 deletions.
14 changes: 7 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,33 @@ Spectre.css is a lightweight, responsive and modern CSS framework for faster and

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/getting-started.html) to learn more.
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

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

`<link rel="stylesheet" href="spectre.min.css" />`

##### Install from CDN
#### Install from CDN
Alternatively, you can use the [unpkg](https://unpkg.com/) CDN to load compiled Spectre.css.

`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.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

You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started.html#compiling).
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "spectre.css",
"version": "0.3.1",
"version": "0.3.2",
"description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
"homepage": "http://picturepan2.github.io/spectre",
"repository": "picturepan2/spectre",
Expand Down
136 changes: 81 additions & 55 deletions docs/components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -412,28 +412,24 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
<div class="form-group">
<div class="form-autocomplete">
<div class="form-autocomplete-input form-input">
<label class="chip">
<span class="chip">
Bruce Banner
<button class="btn btn-clear"></button>
</label>
<label class="chip">
</span>
<span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
Thor Odinson
<button class="btn btn-clear"></button>
</label>
<label class="chip">
</span>
<span class="chip">
<img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
Steve Rogers
<button class="btn btn-clear"></button>
</label>
<label class="chip">
</span>
<span class="chip">
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
Tony Stark
<button class="btn btn-clear"></button>
</label>
<label class="chip active">
</span>
<span class="chip active">
Natasha Romanoff
<button class="btn btn-clear"></button>
</label>
</span>
<input class="form-input" type="text" placeholder="" />
</div>
</div>
Expand All @@ -443,15 +439,15 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
<div class="form-group">
<div class="form-autocomplete">
<div class="form-autocomplete-input form-input is-focused">
<label class="chip">
<span class="chip">
Bruce Banner
<button class="btn btn-clear"></button>
</label>
<label class="chip">
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
Thor Odinson
<button class="btn btn-clear"></button>
</label>
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<div class="has-icon-left">
<input class="form-input" type="text" placeholder="" value="S" />
<i class="form-icon loading"></i>
Expand Down Expand Up @@ -501,7 +497,7 @@ <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#<
&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span> /&gt;
Thor Odinson
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/label</span>&gt;

<span class="com">&lt;!-- autocomplete real input box --&gt;</span>
Expand Down Expand Up @@ -536,20 +532,20 @@ <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Av
</div>
<div class="columns">
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5764c6;">
<img src="img/avatar-1.png" alt="Avatar" />
<figure class="avatar avatar-xl">
<img src="img/avatar-1.png" alt="Avatar XL" />
</figure>
<figure class="avatar avatar-lg" data-initial="YZ" style="background-color: #5764c6;">
<img src="img/avatar-2.png" alt="Avatar" />
<figure class="avatar avatar-lg">
<img src="img/avatar-2.png" alt="Avatar LG" />
</figure>
<figure class="avatar" data-initial="YZ" style="background-color: #5764c6;">
<figure class="avatar">
<img src="img/avatar-3.png" alt="Avatar" />
</figure>
<figure class="avatar avatar-sm" data-initial="YZ" style="background-color: #5764c6;">
<img src="img/avatar-4.png" alt="Avatar" />
<figure class="avatar avatar-sm">
<img src="img/avatar-4.png" alt="Avatar SM" />
</figure>
<figure class="avatar avatar-xs" data-initial="YZ" style="background-color: #5764c6;">
<img src="img/avatar-5.png" alt="Avatar" />
<figure class="avatar avatar-xs">
<img src="img/avatar-5.png" alt="Avatar XS" />
</figure>
</div>
<div class="column col-6 col-xs-12">
Expand Down Expand Up @@ -606,6 +602,36 @@ <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Av
&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5764c6;&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

<div class="columns">
<div class="column col-6 col-xs-12">
<figure class="avatar avatar-xl" data-initial="YZ">
<i class="avatar-presence online"></i>
</figure>
<figure class="avatar avatar-lg" data-initial="YZ">
<i class="avatar-presence busy"></i>
</figure>
<figure class="avatar" data-initial="YZ">
<i class="avatar-presence away"></i>
</figure>
<figure class="avatar avatar-sm" data-initial="YZ">
<i class="avatar-presence offline"></i>
</figure>
<figure class="avatar avatar-xs" data-initial="YZ">
<i class="avatar-presence online"></i>
</figure>
</div>
</div>
<div class="docs-note">
<p>Avatars support presence indicators. You can add an <code>i</code> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. The default is gray which means offline. </p>
</div>

<!-- avatars example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span> /&gt;
&lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-presence online&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
&lt;<span class="tag">/figure</span>&gt;
</code></pre>

</div>
Expand Down Expand Up @@ -998,53 +1024,53 @@ <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chip
</div>
<div class="columns">
<div class="column col-12">
<label class="chip">
<span class="chip">
Crime
<button class="btn btn-clear"></button>
</label>
<label class="chip">
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<span class="chip">
Drama
<button class="btn btn-clear"></button>
</label>
<label class="chip">
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<span class="chip">
Biography
<button class="btn btn-clear"></button>
</label>
<label class="chip">
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<span class="chip">
Mystery
<button class="btn btn-clear"></button>
</label>
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
</div>
<div class="column col-12">
<label class="chip">
<span class="chip">
<figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5764c6;"></figure>
Tony Stark
</label>
<label class="chip">
</span>
<span class="chip">
<img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
Thor Odinson
</label>
<label class="chip">
</span>
<span class="chip">
<img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
Steve Rogers
</label>
</span>
</div>
</div>
<div class="docs-note">
<p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p>
</div>

<!-- chips example -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
Crime
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">/label</span>&gt;
&lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/span</span>&gt;

&lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
&lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> /&gt;
Yan Zhu
&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
&lt;<span class="tag">/label</span>&gt;</code>
&lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
&lt;<span class="tag">/span</span>&gt;</code>
</pre>

</div>
Expand Down
Loading

0 comments on commit 66c492f

Please sign in to comment.