Skip to content

Commit 62eb6f7

Browse files
moyusmoyus
committed
Update docs
1 parent 49c7ee5 commit 62eb6f7

67 files changed

Lines changed: 5646 additions & 4192 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/badge.html‎

Lines changed: 81 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
<meta name="description" content="A flexible CSS Framework for building modern responsive web apps">
99
<meta name="keywords" content="css,sass,flexbox,responsive,front-end,mobile-friendly,framework,web">
1010
<link rel="shortcut icon" href="https://moyus.github.io/pointcss/images/favicon.ico" />
11-
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/point.css?v=200alpha11">
12-
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/style.css?v=200alpha11">
13-
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/prism.css?v=200alpha11">
11+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/point.css?v=200alpha12">
12+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/style.css?v=200alpha12">
13+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/prism.css?v=200alpha12">
1414
</head>
1515
<body>
1616
<div id="docs" class="site">
@@ -24,7 +24,7 @@
2424
<div class="navbar__end">
2525
<div class="navbar__item hidden-until@lg">
2626
<div class="site__metadata">
27-
<span>v2.0.0-alpha.11</span>
27+
<span>v2.0.0-alpha.12</span>
2828
<a href="https://github.com/moyus/pointcss" title="Github" target="_blank">
2929
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3030
<path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0" fill="currentColor"></path>
@@ -184,22 +184,26 @@
184184
<h1 id="badge"><span>Badge</span></h1><h2 id="basic">
185185
<a name="basic" class="anchor" href="#basic"></a>
186186
Basic
187-
</h2><div class="level mb-6">
188-
<div class="level__item">
189-
<span class="badge">Badge</span>
190-
</div>
191-
<div class="level__item">
192-
<button class="btn">
193-
<div class="flex items-center">
194-
<span>Messages</span>
195-
<span class="ml-3 badge badge--danger">12</span>
187+
</h2><section class="snippet">
188+
<div class="snippet__preview">
189+
<div class="level">
190+
<div class="level__item">
191+
<span class="badge">Badge</span>
196192
</div>
197-
</button>
198-
</div>
199-
<div class="level__item">
200-
<h3 class="m-0">Heading<sup class="badge badge--info">New</sup></h3>
193+
<div class="level__item">
194+
<button class="btn">
195+
<div class="flex items-center">
196+
<span>Messages</span>
197+
<span class="ml-3 badge badge--danger">12</span>
198+
</div>
199+
</button>
200+
</div>
201+
<div class="level__item">
202+
<h3 class="m-0">Heading<sup class="badge badge--info">New</sup></h3>
203+
</div>
204+
</div>
201205
</div>
202-
</div>
206+
<div class="snippet__source">
203207

204208
<pre><code class="language-html">&lt;span class=&quot;badge&quot;&gt;Badge&lt;/span&gt;
205209

@@ -211,20 +215,25 @@ <h3 class="m-0">Heading<sup class="badge badge--info">New</sup></h3>
211215
&lt;/button&gt;
212216

213217
&lt;h3&gt;Heading&lt;sup class=&quot;badge badge--info&quot;&gt;New&lt;/sup&gt;&lt;/h3&gt;</code></pre>
214-
<h2 id="variants">
215-
<a name="variants" class="anchor" href="#variants"></a>
216-
Variants
217-
</h2><div class="mb-6">
218-
<span class="badge badge--primary">Primary</span>
219-
<span class="badge badge--info">Info</span>
220-
<span class="badge badge--success">Success</span>
221-
<span class="badge badge--danger">Danger</span>
222-
<span class="badge badge--warning">Warning</span>
223-
<span class="badge badge--black">Black</span>
224-
<span class="badge badge--dark">Dark</span>
225-
<span class="badge badge--light">Light</span>
226-
<span class="badge badge--white">White</span>
227-
</div>
218+
</div>
219+
</section>
220+
221+
<h2 id="variant">
222+
<a name="variant" class="anchor" href="#variant"></a>
223+
Variant
224+
</h2><section class="snippet">
225+
<div class="snippet__preview">
226+
<span class="badge badge--primary">Primary</span>
227+
<span class="badge badge--info">Info</span>
228+
<span class="badge badge--success">Success</span>
229+
<span class="badge badge--danger">Danger</span>
230+
<span class="badge badge--warning">Warning</span>
231+
<span class="badge badge--black">Black</span>
232+
<span class="badge badge--dark">Dark</span>
233+
<span class="badge badge--light">Light</span>
234+
<span class="badge badge--white">White</span>
235+
</div>
236+
<div class="snippet__source">
228237

229238
<pre><code class="language-html">&lt;span class=&quot;badge badge--primary&quot;&gt;Primary&lt;/span&gt;
230239
&lt;span class=&quot;badge badge--info&quot;&gt;Info&lt;/span&gt;
@@ -235,54 +244,71 @@ <h2 id="variants">
235244
&lt;span class=&quot;badge badge--dark&quot;&gt;Dark&lt;/span&gt;
236245
&lt;span class=&quot;badge badge--light&quot;&gt;Light&lt;/span&gt;
237246
&lt;span class=&quot;badge badge--white&quot;&gt;White&lt;/span&gt;</code></pre>
238-
<h5 id="empty-badge">Empty badge</h5><div class="mb-6">
239-
<span class="badge"></span>
240-
<span class="badge badge--primary"></span>
241-
<span class="badge badge--info"></span>
242-
<span class="badge badge--success"></span>
243-
<span class="badge badge--danger"></span>
244-
<span class="badge badge--warning"></span>
245-
</div>
247+
</div>
248+
</section>
249+
250+
<h5 id="empty-badge">Empty badge</h5><section class="snippet">
251+
<div class="snippet__preview">
252+
<span class="badge"></span>
253+
<span class="badge badge--primary"></span>
254+
<span class="badge badge--info"></span>
255+
<span class="badge badge--success"></span>
256+
<span class="badge badge--danger"></span>
257+
<span class="badge badge--warning"></span>
258+
</div>
259+
<div class="snippet__source">
246260

247261
<pre><code class="language-html">&lt;span class=&quot;badge&quot;&gt;&lt;/span&gt;
248262
&lt;span class=&quot;badge badge--primary&quot;&gt;&lt;/span&gt;
249263
&lt;span class=&quot;badge badge--info&quot;&gt;&lt;/span&gt;
250264
&lt;span class=&quot;badge badge--success&quot;&gt;&lt;/span&gt;
251265
&lt;span class=&quot;badge badge--danger&quot;&gt;&lt;/span&gt;
252266
&lt;span class=&quot;badge badge--warning&quot;&gt;&lt;/span&gt;</code></pre>
267+
</div>
268+
</section>
269+
253270
<h2 id="linked">
254271
<a name="linked" class="anchor" href="#linked"></a>
255272
Linked
256-
</h2><div class="mb-6">
257-
<a class="badge badge--link">Badge</a>
258-
<a class="badge badge--primary badge--link">Primary</a>
259-
<a class="badge badge--info badge--link">Info</a>
260-
<a class="badge badge--success badge--link">Success</a>
261-
<a class="badge badge--danger badge--link">Danger</a>
262-
<a class="badge badge--warning badge--link">Warning</a>
263-
</div>
273+
</h2><section class="snippet">
274+
<div class="snippet__preview">
275+
<a class="badge badge--link">Badge</a>
276+
<a class="badge badge--primary badge--link">Primary</a>
277+
<a class="badge badge--info badge--link">Info</a>
278+
<a class="badge badge--success badge--link">Success</a>
279+
<a class="badge badge--danger badge--link">Danger</a>
280+
<a class="badge badge--warning badge--link">Warning</a>
281+
</div>
282+
<div class="snippet__source">
264283

265284
<pre><code class="language-html">&lt;a class=&quot;badge badge--link&quot;&gt;Badge&lt;/a&gt;
266285
&lt;a class=&quot;badge badge--primary badge--link&quot;&gt;Primary&lt;/a&gt;
267286
&lt;a class=&quot;badge badge--info badge--link&quot;&gt;Info&lt;/a&gt;
268287
&lt;a class=&quot;badge badge--success badge--link&quot;&gt;Success&lt;/a&gt;
269288
&lt;a class=&quot;badge badge--danger badge--link&quot;&gt;Danger&lt;/a&gt;
270289
&lt;a class=&quot;badge badge--warning badge--link&quot;&gt;Warning&lt;/a&gt;</code></pre>
290+
</div>
291+
</section>
292+
271293
<h2 id="position">
272294
<a name="position" class="anchor" href="#position"></a>
273295
Position
274296
</h2><p>By composing with other components, you can specify the position of badge.</p>
275-
<div class="mb-6">
276-
<button class="btn btn--lose">
277-
<span>Messages</span>
278-
<span class="badge badge--danger badge--rt">99</span>
279-
</button>
280-
</div>
297+
<section class="snippet">
298+
<div class="snippet__preview">
299+
<button class="btn btn--lose">
300+
<span>Messages</span>
301+
<span class="badge badge--danger badge--rt">99</span>
302+
</button>
303+
</div>
304+
<div class="snippet__source">
281305

282306
<pre><code class="language-html">&lt;button class=&quot;btn btn--lose&quot;&gt;
283307
&lt;span&gt;Messages&lt;/span&gt;
284308
&lt;span class=&quot;badge badge--danger badge--rt&quot;&gt;99&lt;/span&gt;
285309
&lt;/button&gt;</code></pre>
310+
</div>
311+
</section>
286312

287313
</article>
288314
</main>
@@ -291,7 +317,7 @@ <h2 id="position">
291317

292318
<a href="#basic">Basic</a>
293319

294-
<a href="#variants">Variants</a>
320+
<a href="#variant">Variant</a>
295321

296322
<a href="#linked">Linked</a>
297323

0 commit comments

Comments
 (0)