#Introduction
There are multiple ways to get started. First, see all download options available below,
then choose the most suitable option for your need.
Now you should add the main file of the <Gliss> in the header of your project. Just like that!
#Usage
Just add these tags in the inside the head element.
<head>
<link rel="stylesheet" href="gcore/css/glisslize-min.css"/>
<link rel="stylesheet" href="gcore/css/gliss.css"/>
<link rel="stylesheet" href="gcore/css/glissColors.css"/>
</head>
#Typography
Documentation and examples for typography, including global settings, headings, body text, lists, and more.
Sample heading h1 3.3rem
Sample heading h2 2.8rem
Sample heading h3 2.4rem
Sample heading h4 2.0rem
Sample heading h5 1.8rem
Sample heading h6 1.6rem
Sample heading h7 1.2rem
<h1>h1. Sample heading</h1>
<h2>h2. Sample heading</h2>
<h3>h3. Sample heading</h3>
<h4>h4. Sample heading</h4>
<h5>h5. Sample heading</h5>
<h6>h6. Sample heading</h6>
<h7>h7. Sample heading</h7>
#Codes
Different type of components and elements to display a code block.
[User input]
Use the <kbd> to indicate input that is typically entered via keyboard.
To switch directories, type
cd followed by the name of the directory.
To edit settings, press
ctrl +
,
<pre>Sample text here blahh..blahh</pre>
<var>y = mx + b</var>
<kbd>To edit settings, press here</kbd>
#Lists
Add a section to your page for displaying list of sections in your content.
- Unordered list item 1
- Unordered list item 2
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
- Ordered list item 4
- Description list item 1
- Description list item 2
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
<li>Ordered list item 4</li>
</ol>
<dl>
<dt>Description list item 1</dt>
<dd>Description list item 2</dd>
</dl>
#Forms
Gliss forms helps to make this much easier with design focused on the user experience.
<form>
<fieldset>
<label>for="nameField"</label>
<input type="text" placeholder="Your name" id="nameField">
<label for="ageRangeField">Age range</label>
<select id="ageRangeField">
<option value="0-13">0-13</option >
<option value="14-17>14-17</option >
<option value="18-23">18-23</option >
<option value="30+">30+</option >
</select>
<label for="commentField>Comment</label>
<textarea placeholder="Hello…" id="commentField"></textarea>
<div class="float-right">
<input type="checkbox" id="confirmField">
<label class="label-inline" for="confirmField">Send a copy to yourself</label>
</div>
<input class="button-primary" type="submit" value="Send">
</fieldset>
</form>
#Tables
Add a section to your page for displaying list of sections in your content.
| Name |
Age |
Height |
Location |
| Simon Dim |
27 |
1,91 |
Akron, OH |
| Darko Neis |
25 |
2,01 |
Los Angeles, CA |
<table>
<thead>
<tr>;
<th>Name</th >
<th>Age</th >
<th>Height</th >
<th>Location</th >
</tr>
</thead>
<tbody>
<tr>
<th>Simon Dim</th >
<th>27</th >
<th>1.91</th >
<th>Los Angeles, CA</th >
</tr>
<tr>
<th>Darko Neis</th >
<th>25</th >
<th>2,01</th >
<th>Los Angeles, CA</th >
</tr>
</tbody>
</table>
#Nameplates
In newspapers or on the desktop, this is also the
"masthead" or name of an publication.
Charles Roger
CEO/President
<div class="card gliss-green">
<h4 class="">Charles Roger</h4>
<mark>CEO/President</mark>
</div>
Charles Roger
CEO/President
<div class="card gliss-blue">
<h4 class="txt_large">Charles Roger</h4>
<mark>CEO/President</mark>
</div>
<div class="card gliss-red">
<h1 class="txt_shadow transform_multi">Charles Roger</h1>
<pre>CEO/President</pre>
</div>
#Badges
Documentation and examples for gl-badges, our small count and labeling component.
Sample badge New
Sample badge New
Sample badge New
Sample badge New
Sample badge New
Sample badge New
<h1> Sample badge <span class="gl-badge">New</span></h1>
<h2> Sample badge <span class="gl-badge">New</span></h2>
<h3> Sample badge <span class="gl-badge">New</span></h3>
<h4> Sample badge <span class="gl-badge">New</span></h4>
<h5> Sample badge <span class="gl-badge">New</span></h5>
<h6> Sample badge <span class="gl-badge">New</span></h6>
<h7> Sample badge <span class="gl-badge">New</span></h7>
#Recommendations
#GlissLaunch
Gliss backend supports:
