Skip to content

Commit 6b198c1

Browse files
oguzhan18oguzhan18
authored
Merge pull request #1 from oguzhan18/added-docs
added docs app
2 parents 8f989d9 + a654510 commit 6b198c1

File tree

2,699 files changed

+708514
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,699 files changed

+708514
-0
lines changed

‎docs/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# JS UI Documentation
2+
Welcome to JS UI Documentation, everything you need to know about working with JS-UI CSS and related tools can be found here.
3+
4+
5+
6+
## The JS UI
7+
JS UI is a component library that you can develop very quickly without requiring any framework. It is a general UI library. The difference from other UI libraries is that you can style your HTML code in a class just like you write CSS in classes inside any HTML tag.
8+
So how do you start? Check out our [getting started guide](/getting-started) to understand how it works and go from there.
9+
10+
> Got a great use case for us to demo right here? Submit it to us on [message](https://www.jengal.com)!
11+
12+

‎docs/_coverpage.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
2+
<span><img width="200" src="images/logo.png"></span>
3+
4+
[//]: # (# <span style="color:black; font-weight:800;">JS UI <small>1.0.0</small></span> )
5+
<span>
6+
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
7+
</span>
8+
9+
10+
[GitHub](https://github.com/#)
11+
[Get Started](/layout-property/js-slider)

‎docs/_footer.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
**JS UI** Documentation 2024 - [Visit our repo](https://github.com/#)

‎docs/_sidebar.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
* Getting Started
2+
* [Getting Started](/getting-started/getting-started)
3+
* Library
4+
* [JS Slider](/layout-property/js-slider)

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Let's Add to Our Project
2+
3+
There are 2 different methods when using Glasses UI. The first method is to install it as a package and take advantage
4+
of the internal files. The second method is to use the library codes from CDN in html.
5+
6+
## CDN Usage and Project creation.
7+
8+
```html
9+
10+
<html>
11+
<head>
12+
<link rel="stylesheet" crossorigin="anonymous" href="
13+
https://glasses-ui.vercel.app/styles.88fede6400456408.css">
14+
</head>
15+
<body>
16+
17+
</body>
18+
</html>
19+
```
20+
21+
You are now ready to create your first app with `CDN`. Create a `(HTML)` project and add the following code
22+
23+
24+
> If you paste the upload code into a (`.html`) file
25+
> '`<body></body>`, you can use it any way you want. If you have a (HTML) file and you want to add it, you can use it by
26+
> pasting directly (`<link rel="stylesheet" crossorigin="anonymous"`
27+
> `href="https://glasses-ui.vercel.app/styles.88fede6400456408.css">`) .
28+
29+
### Installing and using NPM.
30+
31+
```bash
32+
npm i glasses-ui
33+
```
34+
35+
* NodeJS and NPM - install latest LTS
36+
* Yarn - run `[sudo] npm i -g yarn` if it is not already installed
37+
* Run the `npm` command above in the `NodeJS` based framework project you want to use.
38+
39+
## Running the application
40+
41+
42+
Below I will explain how you can install and use Glasses UI in a newly created Angular project.
43+
44+
* The first step, is to install Angular CLI `npm install -g @angular/cli`
45+
* The second step, is to create a new angular project. `ng new glasses-ui-user-guide`
46+
> `[glasses-ui-user-guid]` you can give any project name you want to the field.
47+
* The third step is in the `styles.scss` or styles.css file in the src folder in your created angular project.
48+
`@import 'glasses-ui/style';`
49+
If you add the code, you can use `Glasses UI` library in the whole project.
50+
<br>
51+
<br>
52+
I showed you how to download the library in Angular framework and import it into the project. However, you can use it easily by importing it into your (html) or (css) file in the framework you want.
53+
<br>
54+
<br>
55+

‎docs/images/logo.png‎

181 KB
Loading

‎docs/index.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>JS UI Documentation</title>
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
7+
<meta name="description" content="Everything you need to know about working with JS UI Documentation"/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
9+
<link rel="stylesheet" href="/theme.css"/>
10+
<link rel="shortcut icon"
11+
href="https://cdn.dopingcloud.com/jengal/originals/favicon.ico"
12+
type="image/x-icon">
13+
<style>
14+
:root {
15+
--theme-color: #000;
16+
--sidebar-nav-pagelink-background-image--active: url("data:image/svg+xml,%3Csvg height='8' viewBox='0 0 14 8' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0 6 6 6-6' fill='none' stroke='%235f06e4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'/%3E%3C/svg%3E%0A");
17+
--sidebar-background: #fff;
18+
--sidebar-width: 20rem;
19+
--notice-important-border-color: #ffc107;
20+
--notice-important-background: #ffffec;
21+
--docsifytabs-border-color: #f5f5fc;
22+
--docsifytabs-tab-highlight-color: #000;
23+
--cover-background-color: #244937;
24+
--cover-color: #fff;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="app"></div>
30+
<script>
31+
window.$docsify = {
32+
tabs: {
33+
persist: true,
34+
sync: true,
35+
theme: "classic",
36+
tabComments: true,
37+
tabHeadings: true,
38+
},
39+
repo: "https://github.com/oguzhan18/#",
40+
loadSidebar: true,
41+
coverpage: true,
42+
maxLevel: 3,
43+
subMaxLevel: 3,
44+
name: "JS UI Documentation",
45+
nameLink: "/",
46+
auto2top: true,
47+
autoHeader: false,
48+
formatUpdated: (time) => {
49+
return time;
50+
},
51+
copyCode: {
52+
buttonText: "Copy",
53+
},
54+
loadFooter: "_footer.md",
55+
plugins: [
56+
function (hook, vm) {
57+
hook.doneEach(function () {
58+
if (document.title.indexOf("JS UI Documentation") === -1)
59+
document.title += " - JS UI Documentation";
60+
});
61+
},
62+
function (hook, vm) {
63+
hook.afterEach(function (html) {
64+
return (
65+
html +
66+
`<hr /><a href="https://github.com/oguzhan18/#/blob/master/${vm.route.file}" target="_blank">Edit this page on GitHub</a>`
67+
);
68+
});
69+
},
70+
],
71+
};
72+
</script>
73+
<script src="/scripts.min.js"></script>
74+
75+
</body>
76+
</html>

‎docs/layout-property/js-slider.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# How to use the JS Slider?
2+
3+
You can easily create sliders with the `.js-slider` class. All you have to do is include the source code library in your project.
4+
5+
# Usage Method
6+
## HTML Add the following code to your HTML file.
7+
To use the `.gls-container` class, you can follow the example below:
8+
9+
```html
10+
11+
<div class="js-slider" auto="true" arrow="true" dots="true">
12+
<ul>
13+
<li>1</li>
14+
<li>2</li>
15+
<li>3</li>
16+
<li>4</li>
17+
</ul>
18+
<button class="prev">◀</button>
19+
<button class="next">▶</button>
20+
</div>
21+
````
22+
## Slider Attributes ( Auto | Arrow | Dots)
23+
- `auto` : If you want the slider to move automatically, you can use the `auto` attribute. The default value is false.
24+
- `arrow` : If you want to show the arrow buttons, you can use the `arrow` attribute. The default value is false.
25+
- `dots` : If you want to show the dots, you can use the `dots` attribute. The default value is false.
26+
- `ìnfinite` : If you want to show the infinite slider, you can use the `infinite` attribute. The default value is true.
27+
- `transition`: If you want to change the transition time, you can use the `transition` attribute. The default value is 0.5s.
28+
29+
# Live Example
30+
31+
<iframe src="https://stackblitz.com/edit/stackblitz-starters-zgog1z?file=index.html" width="100%" height="450"></iframe>
32+

‎docs/node_modules/.bin/docsify‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/node_modules/.bin/figlet‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)