Skip to content

Commit 5410f0b

Browse files
xcatliuxcatliu
committed
Fix styles
1 parent 86bd630 commit 5410f0b

File tree

3 files changed

+9
-129
lines changed

3 files changed

+9
-129
lines changed

‎docs/index.html‎

Lines changed: 4 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0,
88
maximum-scale=1.0, user-scalable=no"/>
99

10-
<title>Flexbox - Mobi.css Plugin</title>
10+
<title>Flexbox</title>
1111

1212
<link rel="stylesheet" href="https://unpkg.com/mobi.css@2.0.0-alpha.1/dist/mobi.min.css" />
13-
<link rel="stylesheet" href="./css/mobi-plugin-flexbox.min.css}" />
13+
<link rel="stylesheet" href="./css/mobi-plugin-flexbox.min.css" />
1414

1515
<style>
1616
.text-center {
@@ -25,29 +25,8 @@
2525
<body>
2626
<div class="flex-center">
2727
<div class="container">
28-
<div class="text-center">
29-
<h1 id="flexbox-mobicss-plugin">Flexbox - Mobi.css Plugin</h1>
30-
<p>The flexbox plugin for <a href="http://getmobicss.com">Mobi.css</a></p>
31-
</div>
32-
<div class="flex-center units-gap-big">
33-
<div class="unit-0">
34-
<a href="https://github.com/mobi-css/mobi-plugin-flexbox/releases" class="btn">Download</a>
35-
</div>
36-
<div class="unit-0">
37-
<a href="https://github.com/mobi-css/mobi-plugin-flexbox/" class="btn">GitHub</a>
38-
</div>
39-
</div>
40-
<hr class="top-gap-big"/>
41-
<h2 id="introduction">Introduction</h2>
42-
<blockquote>
43-
<p>Mobi.css is a themeable, pluginable, mobile-first css framework.</p>
44-
</blockquote>
45-
<p>This is the flexbox plugin for <a href="http://getmobicss.com">Mobi.css</a>, you can use it within <a href="http://getmobicss.com">Mobi.css</a> framework, or simply use the <a href="https://github.com/mobi-css/mobi-plugin-flexbox/releases">standalone css library</a> without using Mobi.css framework.</p>
46-
<p>You can also insert the CDN link to your <code>&lt;head&gt;</code> to try the standalone version:</p>
47-
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/mobi-plugin-flexbox/dist/mobi-plugin-flexbox.min.css&quot; /&gt;
48-
</code></pre>
49-
<h2 id="usage">Usage</h2>
50-
<h3 id="flexbox-container-and-units">Flexbox Container and Units</h3>
28+
<h2 id="flexbox">Flexbox</h2>
29+
<h3 id="container-and-units">Container and Units</h3>
5130
<p>First of all, let's create a <code>.flex-left</code> container which contains several <code>.unit</code>s. In this case, <code>.flex-left</code>'s width is divided equally between <code>.unit</code>s.</p>
5231
<div class="flex-left top-gap text-center">
5332
<div class="unit site-box">unit</div>
@@ -249,36 +228,6 @@ <h3 id="units-gap">Units Gap</h3>
249228
&lt;div class=&quot;unit-1-4 site-box&quot;&gt;.units-gap-big &gt; .unit-1-4&lt;/div&gt;
250229
&lt;/div&gt;
251230
</code></pre>
252-
<h2 id="customize">Customize</h2>
253-
<p>It's also able to customize it, clone this repo and run:</p>
254-
<pre><code class="language-shell">npm install
255-
npm start
256-
</code></pre>
257-
<p>Then modify <code>src/_custom.scss</code> as you like.</p>
258-
<pre><code class="language-scss">//
259-
// Modify variables in this file to Customize your flexbox styles
260-
//
261-
262-
//
263-
// Width lower than $width-breakpoint will be treated as mobile devices
264-
// Default is 1000px
265-
//
266-
// $width-breakpoint: 600px;
267-
268-
//
269-
// This decides the gaps between units in `.units-gap` and `.units-gap-big`
270-
// Default is 12px
271-
//
272-
// $width-gap: 16px;
273-
</code></pre>
274-
<h2 id="community">Community</h2>
275-
<p>Like Mobi.css? Please join the community to discuss new features, open an issue or create pull requests!</p>
276-
<ul>
277-
<li><a href="http://github.com/mobi-css">GitHub organization</a></li>
278-
<li><a href="https://twitter.com/mobi_css">Follow us on twitter</a></li>
279-
<li><a href="https://gitter.im/mobi-css">Join gitter discuss</a></li>
280-
<li><a href="https://medium.com/@mobi_css">Read our blogs</a></li>
281-
</ul>
282231

283232
</div>
284233
</div>

‎site/_layout.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = ({ title, content, relativeToRoot }) => `
1+
module.exports = ({ content, relativeToRoot }) => `
22
<!doctype html>
33
<html lang="en">
44
<head>
@@ -7,10 +7,10 @@ module.exports = ({ title, content, relativeToRoot }) => `
77
<meta name="viewport" content="width=device-width, initial-scale=1.0,
88
maximum-scale=1.0, user-scalable=no"/>
99
10-
<title>${title}</title>
10+
<title>Flexbox</title>
1111
1212
<link rel="stylesheet" href="https://unpkg.com/mobi.css@2.0.0-alpha.1/dist/mobi.min.css" />
13-
<link rel="stylesheet" href="${relativeToRoot}/css/mobi-plugin-flexbox.min.css}" />
13+
<link rel="stylesheet" href="${relativeToRoot}/css/mobi-plugin-flexbox.min.css" />
1414
1515
<style>
1616
.text-center {

‎site/index.md‎

Lines changed: 2 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,6 @@
1-
<div class="text-center">
1+
## Flexbox
22

3-
# Flexbox - Mobi.css Plugin
4-
5-
The flexbox plugin for [Mobi.css](http://getmobicss.com)
6-
7-
</div>
8-
9-
<div class="flex-center units-gap-big">
10-
<div class="unit-0">
11-
<a href="https://github.com/mobi-css/mobi-plugin-flexbox/releases" class="btn">Download</a>
12-
</div>
13-
<div class="unit-0">
14-
<a href="https://github.com/mobi-css/mobi-plugin-flexbox/" class="btn">GitHub</a>
15-
</div>
16-
</div>
17-
18-
<hr class="top-gap-big"/>
19-
20-
## Introduction
21-
22-
> Mobi.css is a themeable, pluginable, mobile-first css framework.
23-
24-
This is the flexbox plugin for [Mobi.css](http://getmobicss.com), you can use it within [Mobi.css](http://getmobicss.com) framework, or simply use the [standalone css library](https://github.com/mobi-css/mobi-plugin-flexbox/releases) without using Mobi.css framework.
25-
26-
You can also insert the CDN link to your `<head>` to try the standalone version:
27-
28-
```html
29-
<link rel="stylesheet" href="https://unpkg.com/mobi-plugin-flexbox/dist/mobi-plugin-flexbox.min.css" />
30-
```
31-
32-
## Usage
33-
34-
### Flexbox Container and Units
3+
### Container and Units
354

365
First of all, let's create a `.flex-left` container which contains several `.unit`s. In this case, `.flex-left`'s width is divided equally between `.unit`s.
376

@@ -273,41 +242,3 @@ In all of the above examples, the `.unit*` has no left and right paddings, it ma
273242
<div class="unit-1-4 site-box">.units-gap-big > .unit-1-4</div>
274243
</div>
275244
```
276-
277-
## Customize
278-
279-
It's also able to customize it, clone this repo and run:
280-
281-
```shell
282-
npm install
283-
npm start
284-
```
285-
286-
Then modify `src/_custom.scss` as you like.
287-
288-
```scss
289-
//
290-
// Modify variables in this file to Customize your flexbox styles
291-
//
292-
293-
//
294-
// Width lower than $width-breakpoint will be treated as mobile devices
295-
// Default is 1000px
296-
//
297-
// $width-breakpoint: 600px;
298-
299-
//
300-
// This decides the gaps between units in `.units-gap` and `.units-gap-big`
301-
// Default is 12px
302-
//
303-
// $width-gap: 16px;
304-
```
305-
306-
## Community
307-
308-
Like Mobi.css? Please join the community to discuss new features, open an issue or create pull requests!
309-
310-
- [GitHub organization](http://github.com/mobi-css)
311-
- [Follow us on twitter](https://twitter.com/mobi_css)
312-
- [Join gitter discuss](https://gitter.im/mobi-css)
313-
- [Read our blogs](https://medium.com/@mobi_css)

0 commit comments

Comments
 (0)