Skip to content

Commit affe643

Browse files
moyusmoyus
committed
Update Docs
1 parent 18aeba1 commit affe643

27 files changed

Lines changed: 1793 additions & 23 deletions

‎docs/_templates/blank.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>{{ site.title }} | {{ page.title }}</title>
7+
<title>{{ site.title }}</title>
88
<meta name="description" content="{{ site.description }}">
99
<meta name="keywords" content="{{ site.keywords }}">
1010
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

‎docs/_templates/default.njk‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<title>{{ site.title }} | {{ page.title }}</title>
7+
<title>{{ page.title }} {{ site.title }}</title>
88
<meta name="description" content="{{ site.description }}">
99
<meta name="keywords" content="{{ site.keywords }}">
1010
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
@@ -14,6 +14,27 @@
1414
</head>
1515
<body>
1616
<div id="docs" class="docs-l-app">
17+
<header class="docs-l-topbar">
18+
<div class="docs-l-topbar__inner">
19+
<nav class="c-navbar">
20+
<div class="c-navbar__left">
21+
<a href="{{site.url}}" class="c-navbar__item">
22+
<img src="{{site.url}}images/logo-head.png">
23+
</a>
24+
</div>
25+
<!-- END .c-navbar__left -->
26+
<div class="c-navbar__right">
27+
<a href="{{site.url}}getting-started" class="c-navbar__item">Documentation</a>
28+
<a href="https://github.com/moyus/point.css" class="c-navbar__item">Github</a>
29+
<div class="c-navbar__item">
30+
<a href="https://github.com/moyus/point.css" class="btn btn--outline btn--primary">Download</a>
31+
</div>
32+
</div>
33+
<!-- END .c-navbar__right -->
34+
</nav>
35+
</div>
36+
</header>
37+
<!-- END .docs-l-topbar -->
1738
<div class="docs-l-content">
1839
<aside class="docs-l-sidebar">
1940
{% include "menus.html" %}

‎docs/assets/images/logo-head.png‎

3.25 KB
Loading

‎docs/components/drop.md‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
---
2+
layout: default
3+
title: "Drop"
4+
---
5+
6+
# Drop
7+
8+
- [Basic](#basic)
9+
- [Position](#position)
10+
11+
## Basic
12+
The most use case of **Drop** is Drop Menu, it use stacked nav
13+
component as it's content.
14+
15+
<div class="u-mb-15">
16+
<div class="c-drop">
17+
<button class="btn btn--primary c-drop__toggle">Click Me</button>
18+
<div class="c-drop__content c-drop__content--bottomStart">
19+
<ul class="c-nav c-nav--pills c-nav--stacked">
20+
<li class="c-nav__item">
21+
<a role="button" class="c-nav__link is-active">Profile</a>
22+
</li>
23+
<li class="c-nav__item">
24+
<a role="button" class="c-nav__link">Inbox</a>
25+
</li>
26+
<li class="c-nav__item">
27+
<a role="button" class="c-nav__link is-disabled">Task</a>
28+
</li>
29+
<li class="c-nav__divider"></li>
30+
<li class="c-nav__item">
31+
<a role="button" class="c-nav__link">Log out</a>
32+
</li>
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
38+
```html
39+
<div class="c-drop">
40+
<button class="btn btn--primary c-drop__toggle">Click Me</button>
41+
<div class="c-drop__content c-drop__content--bottomStart">
42+
<ul class="c-nav c-nav--pills c-nav--stacked">
43+
<li class="c-nav__item">
44+
<a role="button" class="c-nav__link is-active">Profile</a>
45+
</li>
46+
<li class="c-nav__item">
47+
<a role="button" class="c-nav__link">Inbox</a>
48+
</li>
49+
<li class="c-nav__item">
50+
<a role="button" class="c-nav__link is-disabled">Task</a>
51+
</li>
52+
<li class="c-nav__divider"></li>
53+
<li class="c-nav__item">
54+
<a role="button" class="c-nav__link">Log out</a>
55+
</li>
56+
</ul>
57+
</div>
58+
</div>
59+
```
60+
61+
<div class="c-note c-note--warning u-mt-40">
62+
Point only use pure css trick `.c-drop__toggle:active` to simulate click and show drop content. And Point does <strong>not</strong> include any JavaScript interaction with <strong>Drop</strong>. You need to implement the class toggle yourself.
63+
</div>
64+
65+
## Position
66+
The default position of **Drop Content** is bottomStart.
67+
You can change the position by adding modifier classes below
68+
on `.c-drop__content` container element.
69+
70+
- `.c-drop-topStart`
71+
- `.c-drop-top`
72+
- `.c-drop-topEnd`
73+
- `.c-drop-rightStart`
74+
- `.c-drop-right`
75+
- `.c-drop-rightEnd`
76+
- `.c-drop-bottomStart`
77+
- `.c-drop-bottom`
78+
- `.c-drop-bottomEnd`
79+
- `.c-drop-leftStart`
80+
- `.c-drop-left`
81+
- `.c-drop-leftEnd`
82+
83+
<div class="u-mb-15">
84+
<div class="c-drop">
85+
<button class="btn btn--primary c-drop__toggle">Click Me</button>
86+
<div class="c-drop__content c-drop__content--topStart">
87+
<form action="#" class="form-inline u-p-10">
88+
<div class="form-group">
89+
<input type="text" class="form-input" value="Edit Me">
90+
</div>
91+
<div class="form-group">
92+
<button type="button" class="btn btn--info">Submit</button>
93+
</div>
94+
</form>
95+
</div>
96+
</div>
97+
</div>
98+
99+
```html
100+
<div class="c-drop">
101+
<button class="btn btn--primary c-drop__toggle">Click Me</button>
102+
<div class="c-drop__content c-drop__content--topStart">
103+
<form action="#" class="form-inline u-p-10">
104+
<div class="form-group">
105+
<input type="text" class="form-input" value="Edit Me">
106+
</div>
107+
<div class="form-group">
108+
<button type="button" class="btn btn--info">Submit</button>
109+
</div>
110+
</form>
111+
</div>
112+
</div>
113+
```

‎docs/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ <h1 class="docs-c-hero__title">Point</h1>
88
<p class="docs-c-hero__lead">
99
A flexible CSS Framework for building modern responsive web apps.
1010
</p>
11-
<a href="#" class="btn btn--primary btn--outline btn--smart btn--lg u-mb-10">Download</a>
12-
<p class="u-fs-12 u-textMuted">Currently v1.0.0</p>
11+
<div class="btnGroup">
12+
<a href="#" class="btn btn--primary btn--outline btn--lg">Download v0.8.0</a>
13+
<a href="{{site.url}}getting-started" class="btn btn--primary btn--outline btn--lg">Documentation</a>
14+
</div>
1315
</div>
1416
</div>
1517
{% endblock %}

0 commit comments

Comments
 (0)