Skip to content

Commit 745d691

Browse files
moyusmoyus
committed
Update docs
1 parent 6634345 commit 745d691

30 files changed

Lines changed: 551 additions & 76 deletions

‎docs/_templates/menus.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
<li class="docs-c-sidenav__item">
1111
<a href="{{site.url}}getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
1212
</li>
13+
<li class="docs-c-sidenav__item">
14+
<a href="{{site.url}}getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
15+
</li>
1316
</ul>
1417
<!-- END .docs-c-sidenav__group -->
1518
<ul class="docs-c-sidenav__group">

‎docs/components/navs.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,14 @@ The basic **Nav** just remove default list style. You can easily extend it to cr
5656
</li>
5757
<li class="c-nav__item">
5858
<a href="#" class="c-nav__link">Link</a>
59+
<ul class="c-nav c-nav--menus c-nav--sm">
60+
<li class="c-nav__item">
61+
<a href="#" class="c-nav__link">SubItem 1</a>
62+
</li>
63+
<li class="c-nav__item">
64+
<a href="#" class="c-nav__link">SubItem 2</a>
65+
</li>
66+
</ul>
5967
</li>
6068
<li class="c-nav__item">
6169
<a href="#" class="c-nav__link">Another Link</a>
@@ -75,6 +83,14 @@ The basic **Nav** just remove default list style. You can easily extend it to cr
7583
</li>
7684
<li class="c-nav__item">
7785
<a href="#" class="c-nav__link">Link</a>
86+
<ul class="c-nav c-nav--menus c-nav--sm">
87+
<li class="c-nav__item">
88+
<a href="#" class="c-nav__link">SubItem 1</a>
89+
</li>
90+
<li class="c-nav__item">
91+
<a href="#" class="c-nav__link">SubItem 2</a>
92+
</li>
93+
</ul>
7894
</li>
7995
<li class="c-nav__item">
8096
<a href="#" class="c-nav__link">Another Link</a>

‎docs/data.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
"site": {
33
"title": "Point",
44
"url": "/",
5-
"version": "0.8.4",
5+
"version": "0.8.5",
66
"description": "A flexible CSS Framework for building modern responsive web apps",
77
"keywords": "css,sass,flexbox,responsive,front-end,mobile-first,framework,web",
88
"download": "https://github.com/moyus/point/releases",
99
"github": "https://github.com/moyus/point",
10-
"license": "https://github.com/moyus/point.css/blob/master/LICENSE",
10+
"license": "https://github.com/moyus/point/blob/master/LICENSE",
1111
"author": "http://moyu.io"
1212
}
1313
}

‎docs/getting-started/index.md‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -14,35 +14,64 @@ Point is a flexible CSS Framework for building modern responsive web apps.
1414
- 14KB gzipped
1515

1616
## Setup
17-
There are two ways to start
18-
### 1. Install with Yarn
17+
There are 3 ways to start
18+
19+
### Install with Yarn
20+
```sh
21+
yarn add point-sass
22+
```
23+
24+
### Install with NPM
1925
```sh
20-
yarn add point.css
26+
npm install point-sass --save
2127
```
22-
*****
23-
### 2. Download from the repository
24-
[https://github.com/moyus/point](https://github.com/moyus/point)
28+
29+
### Direct `<script>` Include
30+
`<link rel="stylesheet" href="dist/point.min.css" />`
2531

2632
## Customize
27-
Point uses Gulp for compiling SASS into CSS, If you want to customize Point with
28-
your own variables, just download the source files from the repository.
33+
Point is coded in [SASS](http://sass-lang.com/), If you're familiar with it, You can continue.
2934

30-
### 1. Install dependences
31-
Navigate to the root directory of Point, then run the command below to install all dependencies.
35+
### 1. Install the dependence
3236
```sh
33-
yarn
37+
yarn add point-sass --dev
3438
```
3539

36-
### 2. Override variables
37-
All initial variables are located in `src/_vars.scss`.
38-
39-
### 3. Compile
40-
Run the command below to start compiling your own customized **Point**, you can
41-
find the compiled CSS files in the `./dist` directory
40+
### 2. Set your variables
41+
you can reference all initial variables in `scss/_ars.scss`
42+
```scss
43+
$master-palette: (
44+
primary: #e74c3c
45+
) !default;
4246

47+
$link-color: #e74c3c;
4348
```
44-
gulp build
49+
50+
### 3. Import Point at the end of your code
51+
```scss
52+
$master-palette: (
53+
primary: #e74c3c
54+
) !default;
55+
56+
$link-color: #e74c3c;
57+
58+
// Your code
59+
60+
@import "node_modules/point-sass/point"
4561
```
4662

63+
## Browser Support
64+
Point uses [Normalize.css](https://necolas.github.io/normalize.css/) for CSS
65+
reset and [Autoprefixer](https://github.com/postcss/autoprefixer) to make styles
66+
compatible with earlier browser versions. For best user experience, these
67+
browsers are recommended:
68+
69+
- Chrome
70+
- Firefox
71+
- Safari
72+
- Opera
73+
- Microsoft Edge
74+
- Internet Explorer 10+
75+
4776
## Copyright and license
4877
Code copyright 2017 moyu. Code released under [the MIT license](https://github.com/moyus/point/blob/master/LICENSE).

‎docs/getting-started/style-guide.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
layout: default
3+
title: "Style Guide"
4+
---
5+
6+
# Style Guide
7+
In order to create a more transparent UI code, **Point** introduced some great code styles from the community.
8+
9+
## BEM
10+
**Point** relies on [BEM](http://getbem.com/) to create structured class names.
11+
12+
```html
13+
<div class="c-box c-box--info">
14+
<header class="c-box__header">Tip</header>
15+
<div class="c-box__body">
16+
<div class="c-box__inner">
17+
// ...
18+
</div>
19+
</div>
20+
</div>
21+
```
22+
23+
## Namespaces
24+
By prefixing some classes with a certain string can explain what kind of job it does.
25+
26+
<table class="table table--bordered">
27+
<thead>
28+
<tr>
29+
<th>Prefix</th>
30+
<th>Description</th>
31+
<th>Example</th>
32+
</tr>
33+
</thead>
34+
<tbody>
35+
<tr>
36+
<td><code>.c-*</code></td>
37+
<td>Component</td>
38+
<td><code>.c-modal</code></td>
39+
</tr>
40+
<tr>
41+
<td><code>.l-*</code></td>
42+
<td>Layout</td>
43+
<td><code>.l-row</code>, <code>.l-col</code></td>
44+
</tr>
45+
<tr>
46+
<td><code>.is-*</code>, <code>.has-*</code></td>
47+
<td>State</td>
48+
<td><code>.is-active</code>, <code>.has-children</code></td>
49+
</tr>
50+
<tr>
51+
<td><code>.js-*</code></td>
52+
<td>JavaScript hooks</td>
53+
<td><code>.js-nav</code></td>
54+
</tr>
55+
<tr>
56+
<td><code>.form-*</code></td>
57+
<td>Form related element</td>
58+
<td><code>.form-input</code></td>
59+
</tr>
60+
<tr>
61+
<td><code>.u-*</code></td>
62+
<td>Utilities</td>
63+
<td><code>.u-color-primary</code></td>
64+
</tr>
65+
</tbody>
66+
</table>
67+
68+
<div class="c-note c-note--warning">
69+
Classes without prefixing are treated as simple elements which could be native HTML elements or one tag element.
70+
</div>
71+
72+
## Responsive Suffixes
73+
`*@<breakpoint>` tell us *'when at this breakpoint, use this class'*. Some examples:
74+
75+
- `.u-hiddenUp@md`: a utility class to hide things when at `md` breakpoint and up.
76+
- `.l-col-6@sm`: change column's size to half of it's parent when at `sm` breakpoint and up

‎site/components/box.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<li class="docs-c-sidenav__item">
5050
<a href="/getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
5151
</li>
52+
<li class="docs-c-sidenav__item">
53+
<a href="/getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
54+
</li>
5255
</ul>
5356
<!-- END .docs-c-sidenav__group -->
5457
<ul class="docs-c-sidenav__group">
@@ -262,7 +265,7 @@ <h2 id="types">Types</h2>
262265
<!-- END .docs-l-content -->
263266
<footer id="colophon" class="docs-l-footer" role="contentinfo">
264267
<p>Designed and built by <a href="http://moyu.io">moyu</a></p>
265-
<p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
268+
<p>Licensed under the <a href="https://github.com/moyus/point/blob/master/LICENSE">MIT License</a>.</p>
266269
</footer>
267270
</div>
268271
<script src="/js/main.js"></script>

‎site/components/breadcrumb.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<li class="docs-c-sidenav__item">
5050
<a href="/getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
5151
</li>
52+
<li class="docs-c-sidenav__item">
53+
<a href="/getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
54+
</li>
5255
</ul>
5356
<!-- END .docs-c-sidenav__group -->
5457
<ul class="docs-c-sidenav__group">
@@ -170,7 +173,7 @@ <h1 id="breadcrumb">Breadcrumb</h1>
170173
<!-- END .docs-l-content -->
171174
<footer id="colophon" class="docs-l-footer" role="contentinfo">
172175
<p>Designed and built by <a href="http://moyu.io">moyu</a></p>
173-
<p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
176+
<p>Licensed under the <a href="https://github.com/moyus/point/blob/master/LICENSE">MIT License</a>.</p>
174177
</footer>
175178
</div>
176179
<script src="/js/main.js"></script>

‎site/components/drop.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<li class="docs-c-sidenav__item">
5050
<a href="/getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
5151
</li>
52+
<li class="docs-c-sidenav__item">
53+
<a href="/getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
54+
</li>
5255
</ul>
5356
<!-- END .docs-c-sidenav__group -->
5457
<ul class="docs-c-sidenav__group">
@@ -247,7 +250,7 @@ <h2 id="position">Position</h2>
247250
<!-- END .docs-l-content -->
248251
<footer id="colophon" class="docs-l-footer" role="contentinfo">
249252
<p>Designed and built by <a href="http://moyu.io">moyu</a></p>
250-
<p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
253+
<p>Licensed under the <a href="https://github.com/moyus/point/blob/master/LICENSE">MIT License</a>.</p>
251254
</footer>
252255
</div>
253256
<script src="/js/main.js"></script>

‎site/components/lists.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<li class="docs-c-sidenav__item">
5050
<a href="/getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
5151
</li>
52+
<li class="docs-c-sidenav__item">
53+
<a href="/getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
54+
</li>
5255
</ul>
5356
<!-- END .docs-c-sidenav__group -->
5457
<ul class="docs-c-sidenav__group">
@@ -326,7 +329,7 @@ <h2 id="sizes">Sizes</h2>
326329
<!-- END .docs-l-content -->
327330
<footer id="colophon" class="docs-l-footer" role="contentinfo">
328331
<p>Designed and built by <a href="http://moyu.io">moyu</a></p>
329-
<p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
332+
<p>Licensed under the <a href="https://github.com/moyus/point/blob/master/LICENSE">MIT License</a>.</p>
330333
</footer>
331334
</div>
332335
<script src="/js/main.js"></script>

‎site/components/modal.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@
4949
<li class="docs-c-sidenav__item">
5050
<a href="/getting-started/index.html#customize" class="docs-c-sidenav__link">Customize</a>
5151
</li>
52+
<li class="docs-c-sidenav__item">
53+
<a href="/getting-started/style-guide.html" class="docs-c-sidenav__link">Style Guide</a>
54+
</li>
5255
</ul>
5356
<!-- END .docs-c-sidenav__group -->
5457
<ul class="docs-c-sidenav__group">
@@ -269,7 +272,7 @@ <h4 class="c-modalCard__title">Large Modal</h4>
269272
<!-- END .docs-l-content -->
270273
<footer id="colophon" class="docs-l-footer" role="contentinfo">
271274
<p>Designed and built by <a href="http://moyu.io">moyu</a></p>
272-
<p>Licensed under the <a href="https://github.com/moyus/point.css/blob/master/LICENSE">MIT License</a>.</p>
275+
<p>Licensed under the <a href="https://github.com/moyus/point/blob/master/LICENSE">MIT License</a>.</p>
273276
</footer>
274277
</div>
275278
<script src="/js/main.js"></script>

0 commit comments

Comments
 (0)