Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history 
commit 66c492f
Merge: 7395257 00f87b2
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Aug 28 13:30:48 2017 +0800

    Merge pull request picturepan2#262 from picturepan2/0.3.2

    0.3.2

commit 00f87b2
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Aug 28 13:29:09 2017 +0800

    Add Button variant mixins

commit e5ae885
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 23 09:41:35 2017 +0800

    Add Typography Fonts Docs

commit 72834a9
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 22 15:57:14 2017 +0800

    Add Avatars presence status code

commit 33c7738
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Aug 21 19:18:07 2017 +0800

    Update Autocomplete style

commit 3d0f1a1
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Aug 21 17:11:00 2017 +0800

    Fix Input group border issue picturepan2#260

commit c2dcb64
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sun Aug 20 22:10:22 2017 +0800

    Add label-rounded class and cleanup code

commit 4fe9dff
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sun Aug 20 13:08:40 2017 +0800

    Update label mixin and code mono font family

commit f8b430f
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Aug 19 18:53:19 2017 +0800

    Update Autoprefixer rules

commit 7395257
Merge: c9e625c d5f1cb0
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Aug 19 15:31:50 2017 +0800

    Merge pull request picturepan2#259 from picturepan2/0.2.16

    0.3.1

commit d5f1cb0
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Aug 19 15:28:52 2017 +0800

    Bump the version number to v0.3.1

commit 799887f
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Aug 19 15:01:58 2017 +0800

    Cleanup Navigation component code

commit 6a4bbbc
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Aug 19 14:30:07 2017 +0800

    Update Docs examples

commit 3e837ba
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Aug 17 22:59:52 2017 +0800

    Add more Docs content

commit 41ec3e4
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Aug 17 18:54:07 2017 +0800

    Add Grid offset, more margin and padding utilities

commit b56b14d
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 16 19:53:45 2017 +0800

    Move Panels and Empty states to Components from Layout

commit 82e0eef
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 16 18:33:44 2017 +0800

    Rename display utilities and add custom prefix

commit e1889c8
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 16 17:30:48 2017 +0800

    Fix margin utilities picturepan2#250

commit f9e4d64
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 16 17:21:05 2017 +0800

    Add Filters code example picturepan2#232

commit afb32d1
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 18:40:08 2017 +0800

    Improve large Buttons and Forms

commit 0150eb6
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 18:21:48 2017 +0800

    Fix Docs bugs

commit c9e625c
Merge: 846353c d6b5a13
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 16:30:05 2017 +0800

    Merge pull request picturepan2#249 from picturepan2/0.2.15

    0.2.15

commit d6b5a13
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 16:27:56 2017 +0800

    Update Responsive Container and docs

commit a8ba146
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 16:06:33 2017 +0800

    IMPORTANT: Change back to rem unit, and default html font size is 20px.

commit 38962f9
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Aug 15 12:16:53 2017 +0800

    Improve Docs homepage

commit 4cb36cd
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Aug 14 22:30:02 2017 +0800

    Add mobile responsive support

commit b15b0ce
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sun Aug 13 16:47:13 2017 +0800

    Completely rewritten Docs experience

commit f4057ff
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Fri Aug 4 00:45:56 2017 +0800

    Minor update to the Docs

commit a2f1864
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Aug 3 19:08:54 2017 +0800

    Update the Docs HTML structure

commit 706c357
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Aug 3 13:27:26 2017 +0800

    Add form-checkbox, radio and switch validation styles

commit ba51cc1
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Aug 2 23:24:59 2017 +0800

    Update Docs experience

commit ad7ee1b
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Jul 19 18:29:23 2017 +0800

    New Docs experience

commit ef7586b
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Jul 1 21:16:47 2017 +0800

    Add Buttons and Forms variables

commit 78de8f1
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Sat Jul 1 15:33:02 2017 +0800

    IMPORTANT: Replace all rem units to px

commit ef49185
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Jun 28 16:06:58 2017 +0800

    Update East Asian language support and docs

commit a827f7e
Merge: 5865991 b50b8cb
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Jun 28 11:49:14 2017 +0800

    Merge pull request picturepan2#228 from mzyy94/master

    Optimize Japanese font family

commit 5865991
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Jun 27 22:59:33 2017 +0800

    Add Colors utilities picturepan2#205

commit 58b1973
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Mon Jun 26 19:52:38 2017 +0800

    Fix button loading with active status picturepan2#229

commit b50b8cb
Author: Yuki MIZUNO <mizuyuu0904@gmail.com>
Date:   Sat Jun 17 15:39:02 2017 +0900

    Optimize Japanese font family

commit 7e73f38
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Jun 13 20:15:01 2017 +0800

    Add Responsive container to the Docs picturepan2#222

commit aba0d05
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Tue Jun 13 19:16:00 2017 +0800

    Change Dropdown menus max-height to 50% viewport height

commit 123cfa1
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Fri Jun 9 15:55:20 2017 +0800

    Add Install from CDN

commit 73ee932
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Jun 8 18:04:32 2017 +0800

    Fix icon animation bug within Accordions

commit bf07c7c
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Jun 8 18:01:45 2017 +0800

    Fix icons bug within Autocomplete picturepan2#212

commit 130c203
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Jun 8 17:53:13 2017 +0800

    Fix icon direction bug picturepan2#218

commit bade342
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu Jun 8 16:23:55 2017 +0800

    Visual style update

commit 2f9c7cb
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Wed Jun 7 21:46:10 2017 +0800

    Update visual style

commit 430bb39
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Thu May 25 19:53:48 2017 +0800

    Update Breadcrumbs

commit 17dccfb
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Fri May 5 21:06:07 2017 +0800

    Move Accordions to Components and add icons

commit 22af202
Merge: 66df623 0dde7d9
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Fri May 5 19:52:24 2017 +0800

    Merge pull request picturepan2#213 from leroydev/fix/bower-main-property

    Fixed incorrect bower main path

commit 0dde7d9
Author: Leroy Witteveen <leroydev@taw.net>
Date:   Wed May 3 22:59:42 2017 +0200

    Fixed incorrect bower main path

commit 66df623
Author: Yan Zhu <picturepan2@hotmail.com>
Date:   Fri Apr 28 16:16:16 2017 +0800

    Reuse tables code
  • Loading branch information
@rhukster
rhukster committed Aug 30, 2017
1 parent 2af5cac commit 6a0a50a
Show file tree
Hide file tree
Showing 29 changed files with 857 additions and 1,386 deletions.
23 changes: 9 additions & 14 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,36 +15,31 @@ 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

Download the compiled and minified [Spectre CSS file](https://github.com/trilbymedia/spectre-scss/tree/master/docs/dist).
And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.
#### Install manually
Download the compiled and minified [Spectre CSS file](https://github.com/trilbymedia/spectre-scss/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; 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" />`
>>>>>>> upstream

##### 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 All @@ -66,8 +61,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
- [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
Expand All @@ -78,10 +71,12 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
- [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
- [Empty states](https://picturepan2.github.io/spectre/components.html#empty) - empty states/blank slates for first time use, empty data and error screens
- [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
- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages
- [Panels](https://picturepan2.github.io/spectre/components.html#panels) - flexible view container with auto-expand content section
- [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
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 6a0a50a

Please sign in to comment.