Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

0.3.2 #262

Merged
merged 8 commits into from
Aug 28, 2017
Merged

0.3.2 #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f8b430f
Update Autoprefixer rules
picturepan2 Aug 19, 2017
4fe9dff
Update label mixin and code mono font family
picturepan2 Aug 20, 2017
c2dcb64
Add label-rounded class and cleanup code
picturepan2 Aug 20, 2017
3d0f1a1
Fix Input group border issue #260
picturepan2 Aug 21, 2017
33c7738
Update Autocomplete style
picturepan2 Aug 21, 2017
72834a9
Add Avatars presence status code
picturepan2 Aug 22, 2017
e5ae885
Add Typography Fonts Docs
picturepan2 Aug 23, 2017
00f87b2
Add Button variant mixins
picturepan2 Aug 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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