-
Notifications
You must be signed in to change notification settings - Fork 1
/
get-started.html
191 lines (183 loc) · 10.8 KB
/
get-started.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction to White-UICSS | Get Started with docs</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/white-uicss@1.0.3/white-uicss.min.css" />
<link rel="stylesheet" href="./css/index.add.css" />
</head>
<body>
<!-- Navbar started here -->
<div class="navbar bg-secondary text-white white-ui">
<nav class="container">
<a href="./index.html">
<h1 class="site-title display-f align-items-center">
<div class="bg-white text-secondary p-1">W</div>
-UICSS
</h1>
</a>
<button id="menu" class="menu display-f align-items-center">|||||</button>
<ul class="display-f">
<li>
Version 1.0.1
</li>
</ul>
</nav>
</div>
<!-- Navbar ends here -->
<!-- Main section ends here -->
<div class="w-100">
<div class="display-f">
<!-- Sidenavbar starts here -->
<div class="side-bar flex-1 bg-secondary-light-9 p-1 pl-2" id="menus">
<ul class="display-f flex-direction-column w-100">
<li class="font-bold font-md mb-2">
Get Started
<ul class="ml-1 font-normal text-gray">
<li class="mt-1"><a href="get-started.html" class="text-black">Introduction</a></li>
<li class="mt-1"><a href="download-source-code.html">Download</a></li>
<li class="mt-1"><a href="explore.html">Explore</a></li>
</ul>
</li>
<li class="font-bold font-md mb-2">
Layouts
<ul class="ml-1 font-normal text-gray">
<li class="mt-1"><a href="grid.html">Grid</a></li>
<li class="mt-1"><a href="container.html">container</a></li>
<li class="mt-1"><a href="breakpoint.html">BreakPoints</a></li>
</ul>
</li>
<li class="font-bold font-md mb-2">
Components
<ul class="ml-1 font-normal text-gray">
<li class="mt-1"><a href="buttons.html">Buttons</a></li>
<li class="mt-1"><a href="cards.html">Card</a></li>
<li class="mt-1"><a href="navbars.html">Navbar</a></li>
</ul>
</li>
<li class="font-bold font-md mb-2">
Forms
<ul class="ml-1 font-normal text-gray">
<!-- <li class="mt-1"><a href="#">Overview</a></li> -->
<li class="mt-1"><a href="forms.html">Inputs</a></li>
<!-- <li class="mt-1"><a href="#">Validation</a></li> -->
</ul>
</li>
<li class="font-bold font-md mb-2">
Github
<ul class="ml-1 font-normal text-gray">
<li class="mt-1"><a href="https://github.com/The-white-ui/.github/blob/main/profile/README.md"
target="_blank" rel="noopener noreferrer">README</a></li>
<li class="mt-1"><a href="#">Contributors</a></li>
<li class="mt-1"><a href="https://github.com/The-white-ui/Frontend" target="_blank"
rel="noopener noreferrer">Contribute</a></li>
</ul>
</li>
</div>
<!-- Sidenavbar ends here -->
<!-- Conteent section starts here -->
<div class="content flex-4">
<div class="container mt-2">
<!-- Introduction starts here -->
<header>
<h1 class="font-lg font-bold">Introduction</h1>
<p class="font-lg font-normal">
Learn how to easily start using White-UICSS in your website.
</p>
</header>
<div class="content w-75 mt-5">
<div>
<h1 class="font-lg font-xtra-bold mb-1">Quick start</h1>
<p>
Looking to quickly add White-UICSS to your project? Use
jsDelivr, a free open source CDN. To download the source
files?
<a href="white-uicss.rar" target="_blank" rel="noopener noreferrer" class="text-secondary">Click Here to
downloads.</a>
</p>
</div>
<div class="css">
<h1 class="font-lg font-xtra-bold mt-3 mb-1">CSS</h1>
<p>
Copy-paste the stylesheet
<code class="text-red"><link></code>
into your
<code class="text-red"><head></code>
before all other stylesheets to load our CSS.
</p>
<!-- Code showcase -->
<div class="bg-gray-light-9 mt-2 pt-1 pl-1 pr-1 display-f align-items-center">
<pre style="overflow: hidden; overflow-x: scroll">
<code class="display-f align-items-center">
<span><</span>
<span class="text-blue">link</span>
<span class="text-blue ml-1">href</span>
<span class="text-blue">=</span>
<span class="text-red">"https://cdn.jsdelivr.net/npm/white-uicss@1.0.2/white-uicss.min.css"</span>
<span>/></span>
</code>
</pre>
</div>
</div>
<div class="js">
<h1 class="font-lg font-xtra-bold mt-3 mb-1">JS</h1>
<p>
Many of our components require the use of JavaScript to
perform their functions. Specifically, they require our own
JavaScript plugins. Place the below code
<code class="text-red"><script></code> near the end of
your pages, right before the closing
<code class="text-red"></body></code> tag, to enable
them.
</p>
<div class="bg-gray-light-9 mt-2 pt-1 pl-1 pr-1 display-f align-items-center">
<pre style="overflow: hidden; overflow-x: scroll">Not Available
<code class="display-f align-items-center">
<span><</span>
<span class="text-blue">link</span>
<span class="text-blue ml-1">href</span>
<span class="text-blue">=</span>
<span class="text-red">"https://cdn.jsdelivr.net/npm/white-uicss@1.0.2/white-uicss.min.js"</span>
<span>/></span>
</code>
</pre>
</div>
</div>
<div class="setup mt-3">
<h1 class="font-lg font-normal mt-3 mb-1">HTML Setup</h1>
<p>
Next you just have to make sure you link the files properly in
your webpage. Generally it is wise to import javascript files
at the end of the body to reduce page load time. Follow the
example below on how to import Materialize into your webpage.
</p>
<div class="bg-gray-light-9 mt-2 pt-1 pl-1 pr-1 display-f align-items-center setup-markup">
<pre class="language-markup"><code class="language-markup">
<span class="text-gray"><!DOCTYPE html></span>
<span class="text-red"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="text-red"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="text-gray" spellcheck="true"><!--Import White-UICSS.css--></span>
<span class="token tag"><span class="text-red"><span class="token punctuation"><</span>link</span> <span class="text-secondary">rel</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>stylesheet<span class="text-gray">"</span></span> <span class="text-secondary">href</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>https://cdn.jsdelivr.net/npm/white-uicss@1.1.0/index.min.css<span class="text-gray">"</span></span> <span class="text-red">/></span></span>
<span class="text-gray" spellcheck="true"><!--Let browser know website is optimized for mobile--></span>
<span class="token tag"><span class="text-red"><span class="token punctuation"><</span>meta</span> <span class="text-secondary">name</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>viewport<span class="text-gray">"</span></span> <span class="text-gray">content</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>width<span class="text-gray">=</span>device-width, initial-scale<span class="text-gray">=</span>1.0<span class="text-gray">"</span></span><span class="text-gray">/></span></span>
<span class="text-red"><span><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="text-red"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="text-gray" spellcheck="true"><!--JavaScript at end of body for optimized loading--></span>
<span class="token script language-javascript"><span class="token tag"><span class="text-red"><span><</span>script</span> <span class="text-secondary">type</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>text/javascript<span class="text-gray">"</span></span> <span class="text-secondary">src</span><span class="text-blue"><span class="text-gray">=</span><span class="text-gray">"</span>not-available<span class="text-gray">"</span></span><span class="text-gray">></span></span><span class="text-red"><span class="text-red"><span class="text-gray"></</span>script</span><span class="text-gray">></span></span></span>
<span class="text-red"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="text-red"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<!-- Content section ends here -->
</div>
</div>
<!-- Main section ends here -->
<script src="https://cdn.jsdelivr.net/npm/white-uicss@1.0.3/white-uicss.min.js"></script>
</body>
</html>