Skip to content

Commit 59badbe

Browse files
moyusmoyus
committed
v2.0.0 alpha.1
1 parent 0f77b34 commit 59badbe

7 files changed

Lines changed: 689 additions & 0 deletions

File tree

‎docs/components/dropdown.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title> Dropdown - </title>
8+
<meta name="description" content="A flexible CSS Framework for building modern responsive web apps">
9+
<meta name="keywords" content="css,sass,flexbox,responsive,front-end,mobile-friendly,framework,web">
10+
<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=">
12+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/style.css?v=">
13+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/prism.css?v=">
14+
</head>
15+
<body>
16+
<div id="docs" class="site">
17+
<div class="site__sidebar">
18+
<header class="site__header">
19+
<a href="https://moyus.github.io/pointcss" class="site__brand">
20+
<img src="https://moyus.github.io/pointcss/images/logo.svg" alt="pointcss" />
21+
</a>
22+
<div class="site__metadata">
23+
<a href="https://github.com/moyus/pointcss" title="Github" target="_blank">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
25+
<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>
26+
</svg>
27+
</a>
28+
<span>v2.0.0-alpha.1</span>
29+
</div>
30+
</header>
31+
<nav id="sidenav" class="navigation">
32+
<div class="navigation__group">
33+
<label class="navigation__label">GETTING STARTED</label>
34+
<div class="navigation__content">
35+
<a href="https://moyus.github.io/pointcss" class="navigation__link">Introduction</a>
36+
<a href="https://moyus.github.io/pointcss/#installation" class="navigation__link">Installation</a>
37+
<a href="https://moyus.github.io/pointcss/#customization" class="navigation__link">Customization</a>
38+
<a href="https://moyus.github.io/pointcss/#browser-support" class="navigation__link">Browser Support</a>
39+
<a href="https://moyus.github.io/pointcss/getting-started/style-guide.html" class="navigation__link">Style Guide</a>
40+
</div>
41+
</div>
42+
<!-- END .navigation__group -->
43+
<!-- END .navigation__group -->
44+
<div class="navigation__group">
45+
<label class="navigation__label">CONTENT</label>
46+
<div class="navigation__content">
47+
<a href="https://moyus.github.io/pointcss/content/typography.html" class="navigation__link">Typography</a>
48+
<a href="https://moyus.github.io/pointcss/content/table.html" class="navigation__link">Table</a>
49+
<a href="https://moyus.github.io/pointcss/content/media.html" class="navigation__link">Media</a>
50+
</div>
51+
</div>
52+
<!-- END .navigation__group -->
53+
<div class="navigation__group">
54+
<label class="navigation__label">LAYOUTS</label>
55+
<div class="navigation__content">
56+
<a href="https://moyus.github.io/pointcss/layouts/container.html" class="navigation__link">Container</a>
57+
<a href="https://moyus.github.io/pointcss/layouts/flex-grid.html" class="navigation__link">Flex Grid</a>
58+
<a href="https://moyus.github.io/pointcss/layouts/level.html" class="navigation__link">Level</a>
59+
</div>
60+
</div>
61+
<div class="navigation__group">
62+
<label class="navigation__label">COMPONENTS</label>
63+
<div class="navigation__content">
64+
<a href="https://moyus.github.io/pointcss/components/badge.html" class="navigation__link">Badge</a>
65+
<a href="https://moyus.github.io/pointcss/components/box.html" class="navigation__link">Box</a>
66+
<a href="https://moyus.github.io/pointcss/components/breadcrumb.html" class="navigation__link">Breadcrumb</a>
67+
<a href="https://moyus.github.io/pointcss/components/button.html" class="navigation__link">Button</a>
68+
<a href="https://moyus.github.io/pointcss/components/dropdown.html" class="navigation__link">Dropdown</a>
69+
<a href="https://moyus.github.io/pointcss/components/form.html" class="navigation__link">Form</a>
70+
<a href="https://moyus.github.io/pointcss/components/hint.html" class="navigation__link">Hint</a>
71+
<a href="https://moyus.github.io/pointcss/components/list.html" class="navigation__link">List</a>
72+
<a href="https://moyus.github.io/pointcss/components/modal.html" class="navigation__link">Modal</a>
73+
<a href="https://moyus.github.io/pointcss/components/nav.html" class="navigation__link">Nav</a>
74+
<a href="https://moyus.github.io/pointcss/components/navbar.html" class="navigation__link">Navbar</a>
75+
<a href="https://moyus.github.io/pointcss/components/note.html" class="navigation__link">Note</a>
76+
<a href="https://moyus.github.io/pointcss/components/pagination.html" class="navigation__link">Pagination</a>
77+
<a href="https://moyus.github.io/pointcss/components/progress.html" class="navigation__link">Progress</a>
78+
</div>
79+
</div>
80+
<!-- END .navigation__group -->
81+
<div class="navigation__group">
82+
<label class="navigation__label">UTILITIES</label>
83+
<div class="navigation__content">
84+
<a href="https://moyus.github.io/pointcss/utilities/color.html" class="navigation__link">Color</a>
85+
<a href="https://moyus.github.io/pointcss/utilities/elevation.html" class="navigation__link">Elevation</a>
86+
<a href="https://moyus.github.io/pointcss/utilities/layout.html" class="navigation__link">Layout</a>
87+
<a href="https://moyus.github.io/pointcss/utilities/spacing.html" class="navigation__link">Spacing</a>
88+
<a href="https://moyus.github.io/pointcss/utilities/text.html" class="navigation__link">Text</a>
89+
</div>
90+
</div>
91+
<!-- END .navigation__group -->
92+
</nav>
93+
94+
<footer id="colophon" class="site__footer" role="contentinfo">
95+
<p>Designed and built by <a href="https://moyu.io" target="_blank">MOYU</a></p>
96+
<p>Licensed under the <a href="https://github.com/moyus/pointcss/blob/master/LICENSE">MIT License</a></p>
97+
</footer>
98+
</div>
99+
<!-- END .site__sidebar -->
100+
<main id="main" class="site__main" role="main">
101+
<article class="article">
102+
<h1 id="dropdown"><span>Dropdown</span></h1><h2 id="basic">
103+
<a name="basic" class="anchor" href="#basic"></a>
104+
Basic
105+
</h2><details class="dropdown">
106+
<summary class="btn dropdown__trigger">Click Me</summary>
107+
<div class="dropdown__content">
108+
<p>
109+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
110+
</p>
111+
</div>
112+
</details>
113+
114+
<pre><code class="language-html">&lt;details class=&quot;dropdown&quot;&gt;
115+
&lt;summary class=&quot;btn dropdown__trigger&quot;&gt;Click Me&lt;/summary&gt;
116+
&lt;div class=&quot;dropdown__content&quot;&gt;
117+
&lt;p&gt;
118+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
119+
&lt;/p&gt;
120+
&lt;/div&gt;
121+
&lt;/details&gt;</code></pre>
122+
<h2 id="position">
123+
<a name="position" class="anchor" href="#position"></a>
124+
Position
125+
</h2><ul>
126+
<li><code>.dropdown--tl</code></li>
127+
<li><code>.dropdown--tr</code></li>
128+
<li><code>.dropdown--rt</code></li>
129+
<li><code>.dropdown--rb</code></li>
130+
<li><code>.dropdown--bl</code></li>
131+
<li><code>.dropdown--br</code></li>
132+
<li><code>.dropdown--lt</code></li>
133+
<li><code>.dropdown--lb</code></li>
134+
</ul>
135+
136+
</article>
137+
</main>
138+
<!-- END .site__main -->
139+
<nav class="site__catalogue">
140+
141+
<a href="#basic">Basic</a>
142+
143+
<a href="#position">Position</a>
144+
145+
</nav>
146+
<!-- END .site__catalogue -->
147+
</div>
148+
<!-- END .site -->
149+
<script src="https://moyus.github.io/pointcss/js/prism.js"></script>
150+
<script src="https://moyus.github.io/pointcss/js/main.js"></script>
151+
</body>
152+
</html>

‎docs/content/media.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title> Media - </title>
8+
<meta name="description" content="A flexible CSS Framework for building modern responsive web apps">
9+
<meta name="keywords" content="css,sass,flexbox,responsive,front-end,mobile-friendly,framework,web">
10+
<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=">
12+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/style.css?v=">
13+
<link rel="stylesheet" href="https://moyus.github.io/pointcss/css/prism.css?v=">
14+
</head>
15+
<body>
16+
<div id="docs" class="site">
17+
<div class="site__sidebar">
18+
<header class="site__header">
19+
<a href="https://moyus.github.io/pointcss" class="site__brand">
20+
<img src="https://moyus.github.io/pointcss/images/logo.svg" alt="pointcss" />
21+
</a>
22+
<div class="site__metadata">
23+
<a href="https://github.com/moyus/pointcss" title="Github" target="_blank">
24+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
25+
<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>
26+
</svg>
27+
</a>
28+
<span>v2.0.0-alpha.1</span>
29+
</div>
30+
</header>
31+
<nav id="sidenav" class="navigation">
32+
<div class="navigation__group">
33+
<label class="navigation__label">GETTING STARTED</label>
34+
<div class="navigation__content">
35+
<a href="https://moyus.github.io/pointcss" class="navigation__link">Introduction</a>
36+
<a href="https://moyus.github.io/pointcss/#installation" class="navigation__link">Installation</a>
37+
<a href="https://moyus.github.io/pointcss/#customization" class="navigation__link">Customization</a>
38+
<a href="https://moyus.github.io/pointcss/#browser-support" class="navigation__link">Browser Support</a>
39+
<a href="https://moyus.github.io/pointcss/getting-started/style-guide.html" class="navigation__link">Style Guide</a>
40+
</div>
41+
</div>
42+
<!-- END .navigation__group -->
43+
<!-- END .navigation__group -->
44+
<div class="navigation__group">
45+
<label class="navigation__label">CONTENT</label>
46+
<div class="navigation__content">
47+
<a href="https://moyus.github.io/pointcss/content/typography.html" class="navigation__link">Typography</a>
48+
<a href="https://moyus.github.io/pointcss/content/table.html" class="navigation__link">Table</a>
49+
<a href="https://moyus.github.io/pointcss/content/media.html" class="navigation__link">Media</a>
50+
</div>
51+
</div>
52+
<!-- END .navigation__group -->
53+
<div class="navigation__group">
54+
<label class="navigation__label">LAYOUTS</label>
55+
<div class="navigation__content">
56+
<a href="https://moyus.github.io/pointcss/layouts/container.html" class="navigation__link">Container</a>
57+
<a href="https://moyus.github.io/pointcss/layouts/flex-grid.html" class="navigation__link">Flex Grid</a>
58+
<a href="https://moyus.github.io/pointcss/layouts/level.html" class="navigation__link">Level</a>
59+
</div>
60+
</div>
61+
<div class="navigation__group">
62+
<label class="navigation__label">COMPONENTS</label>
63+
<div class="navigation__content">
64+
<a href="https://moyus.github.io/pointcss/components/badge.html" class="navigation__link">Badge</a>
65+
<a href="https://moyus.github.io/pointcss/components/box.html" class="navigation__link">Box</a>
66+
<a href="https://moyus.github.io/pointcss/components/breadcrumb.html" class="navigation__link">Breadcrumb</a>
67+
<a href="https://moyus.github.io/pointcss/components/button.html" class="navigation__link">Button</a>
68+
<a href="https://moyus.github.io/pointcss/components/dropdown.html" class="navigation__link">Dropdown</a>
69+
<a href="https://moyus.github.io/pointcss/components/form.html" class="navigation__link">Form</a>
70+
<a href="https://moyus.github.io/pointcss/components/hint.html" class="navigation__link">Hint</a>
71+
<a href="https://moyus.github.io/pointcss/components/list.html" class="navigation__link">List</a>
72+
<a href="https://moyus.github.io/pointcss/components/modal.html" class="navigation__link">Modal</a>
73+
<a href="https://moyus.github.io/pointcss/components/nav.html" class="navigation__link">Nav</a>
74+
<a href="https://moyus.github.io/pointcss/components/navbar.html" class="navigation__link">Navbar</a>
75+
<a href="https://moyus.github.io/pointcss/components/note.html" class="navigation__link">Note</a>
76+
<a href="https://moyus.github.io/pointcss/components/pagination.html" class="navigation__link">Pagination</a>
77+
<a href="https://moyus.github.io/pointcss/components/progress.html" class="navigation__link">Progress</a>
78+
</div>
79+
</div>
80+
<!-- END .navigation__group -->
81+
<div class="navigation__group">
82+
<label class="navigation__label">UTILITIES</label>
83+
<div class="navigation__content">
84+
<a href="https://moyus.github.io/pointcss/utilities/color.html" class="navigation__link">Color</a>
85+
<a href="https://moyus.github.io/pointcss/utilities/elevation.html" class="navigation__link">Elevation</a>
86+
<a href="https://moyus.github.io/pointcss/utilities/layout.html" class="navigation__link">Layout</a>
87+
<a href="https://moyus.github.io/pointcss/utilities/spacing.html" class="navigation__link">Spacing</a>
88+
<a href="https://moyus.github.io/pointcss/utilities/text.html" class="navigation__link">Text</a>
89+
</div>
90+
</div>
91+
<!-- END .navigation__group -->
92+
</nav>
93+
94+
<footer id="colophon" class="site__footer" role="contentinfo">
95+
<p>Designed and built by <a href="https://moyu.io" target="_blank">MOYU</a></p>
96+
<p>Licensed under the <a href="https://github.com/moyus/pointcss/blob/master/LICENSE">MIT License</a></p>
97+
</footer>
98+
</div>
99+
<!-- END .site__sidebar -->
100+
<main id="main" class="site__main" role="main">
101+
<article class="article">
102+
<h1 id="media"><span>Media</span></h1><p>Provide decent styles for images and videos.</p>
103+
<h2 id="image">
104+
<a name="image" class="anchor" href="#image"></a>
105+
Image
106+
</h2><p>Fluid image is made with <code>.img-fluid</code> class. <code>max-width: 100%;</code> and <code>height: auto;</code> style are applied to the image so that it scales with the parent element</p>
107+
<img src="https://holder.moyu.io/1000/400" class="img-fluid mb-5">
108+
109+
<pre><code class="language-html">&lt;img src=&quot;...&quot; class=&quot;img-fluid&quot; /&gt;</code></pre>
110+
<h2 id="video">
111+
<a name="video" class="anchor" href="#video"></a>
112+
Video
113+
</h2><p>By placing <code>iframe</code>, <code>embed</code>, <code>video</code>, <code>object</code> into <code>.embed-fluid</code> container to quickly create 16x9 fluid embeds.</p>
114+
<div class="embed-fluid mb-5">
115+
<iframe src="https://player.vimeo.com/video/160704576" width="640" height="427" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
116+
</div>
117+
118+
<pre><code class="language-html">&lt;div class=&quot;embed-fluid&quot;&gt;
119+
&lt;iframe src=&quot;https://player.vimeo.com/video/160704576&quot;&gt;&lt;/iframe&gt;
120+
&lt;/div&gt;</code></pre>
121+
122+
</article>
123+
</main>
124+
<!-- END .site__main -->
125+
<nav class="site__catalogue">
126+
127+
<a href="#image">Image</a>
128+
129+
<a href="#video">Video</a>
130+
131+
</nav>
132+
<!-- END .site__catalogue -->
133+
</div>
134+
<!-- END .site -->
135+
<script src="https://moyus.github.io/pointcss/js/prism.js"></script>
136+
<script src="https://moyus.github.io/pointcss/js/main.js"></script>
137+
</body>
138+
</html>

0 commit comments

Comments
 (0)