added first version of website
This commit is contained in:
GitHub
parent
a66a617e4b
commit
d9349538b6
163
docs/alerts.html
Normal file
163
docs/alerts.html
Normal file
@ -0,0 +1,163 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
<style>
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-style {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.493) ;
|
||||
}
|
||||
.sidebar-left {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: fit-content;
|
||||
}
|
||||
.sidebar-item {
|
||||
list-style: none;
|
||||
min-width: min-content;
|
||||
}
|
||||
.sidebar-link {
|
||||
width: fit-content;
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-title {
|
||||
width: max-content;
|
||||
font-size: 20pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.link {
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div style="padding-left: 20px; padding-right: 20px;">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-left sidebar-style">
|
||||
<h1 class="sidebar-title">Dcoumentation:</h1>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/index.html" class="sidebar-link">Home</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/nav.html" class="sidebar-link">Navigations</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/slider.html" class="sidebar-link">Sliders</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/toggle.html" class="sidebar-link">Toggles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="container">
|
||||
<h1>Alerts</h1><br>
|
||||
You are seeing the Alert Documentation<br>
|
||||
as explanation there are two types of elements that some might think both are alerts<br>
|
||||
one is the full body coloured alert documented here and the other is basicly the same but only with coloured borders.<br>
|
||||
<br>
|
||||
there are multimple types of alerts<br>
|
||||
<br>
|
||||
<div class="alert-primary"> Primary </div><br>
|
||||
<div class="alert-danger"> Danger </div><br>
|
||||
<div class="alert-warning"> Warning </div><br>
|
||||
<div class="alert-success"> Success </div>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div class="alert-primary"> Primary </div>
|
||||
<div class="alert-danger"> Danger </div>
|
||||
<div class="alert-warning"> Warning </div>
|
||||
<div class="alert-success"> Success </div>
|
||||
</code>
|
||||
</pre>
|
||||
<h1 style="text-align: center;">Notification Elements</h1>
|
||||
As explained Notifications have a slight difference in their setup<br>
|
||||
the biggest difference is how they look and that they have a title and a message<br>
|
||||
<br>
|
||||
<div class="notification-primary">
|
||||
<h2>Primary Title</h2>
|
||||
<span class="notification-body">Primary Message</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-danger">
|
||||
<h2>Danger Title</h2>
|
||||
<span class="notification-body">Danger Message</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-warning">
|
||||
<h2>Warning Title</h2>
|
||||
<span class="notification-body">Warning Message</span>
|
||||
</div>
|
||||
<br>
|
||||
<div class="notification-success">
|
||||
<h2>Success Title</h2>
|
||||
<span class="notification-body">Success Message</span>
|
||||
</div>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div class="notification-primary">
|
||||
<h2>Primary Title</h2>
|
||||
<span class="notification-body">Primary Message</span>
|
||||
</div>
|
||||
<div class="notification-danger">
|
||||
<h2>Danger Title</h2>
|
||||
<span class="notification-body">Danger Message</span>
|
||||
</div>
|
||||
<div class="notification-warning">
|
||||
<h2>Warning Title</h2>
|
||||
<span class="notification-body">Warning Message</span>
|
||||
</div>
|
||||
<div class="notification-success">
|
||||
<h2>Success Title</h2>
|
||||
<span class="notification-body">Success Message</span>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
168
docs/index.html
Normal file
168
docs/index.html
Normal file
@ -0,0 +1,168 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<style>
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-style {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.493) ;
|
||||
}
|
||||
.sidebar-left {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: fit-content;
|
||||
}
|
||||
.sidebar-item {
|
||||
list-style: none;
|
||||
min-width: min-content;
|
||||
}
|
||||
.sidebar-link {
|
||||
width: fit-content;
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-title {
|
||||
width: max-content;
|
||||
font-size: 20pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.link {
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
<main>
|
||||
<div style="padding-left: 20px; padding-right: 20px;">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-left sidebar-style">
|
||||
<h1 class="sidebar-title">Dcoumentation:</h1>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/index.html" class="sidebar-link">Home</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/nav.html" class="sidebar-link">Navigations</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/slider.html" class="sidebar-link">Sliders</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/toggle.html" class="sidebar-link">Toggles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="container">
|
||||
<h1>Introduction</h1>
|
||||
This Guide should help you to get started and to find the proper first information on how to navigate arround on this site.<br>
|
||||
Because this is my first Documentation i maintain for a framework, feedback for improvement is more then welcome you can provide it on the repos <a class="link" href="https://github.com/steevLP/steevcss/issues">issue tracker</a><br>
|
||||
<br>
|
||||
You can either use the github <a class="link" href="#">releases</a> or use the hosted version by using copying this:
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<!-- <script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script> -->
|
||||
</code>
|
||||
</pre>
|
||||
due to an issue that only should appear when displying code the script tag for the optional Javascript file is commented out if using it, don't add it as comment.
|
||||
<br><br>
|
||||
<h1>General Structure classes</h1>
|
||||
there are multiple classes one can use to bring strcuture into his site.<br>
|
||||
one is using the container class wich centers content and adds spacing to both sides<br>
|
||||
a nice to have is that this class also can to some degree handle changing screen sizes
|
||||
<br><br>
|
||||
<div class="container" style="border: 1px solid black; border-radius: 5px; padding: 10px;"><h4>inside the container</h4></div>
|
||||
<br>
|
||||
you can see how this exact example (it was styled with padding and border) was created
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div class="container" style="border: 1px solid black; border-radius: 5px; padding: 10px;">
|
||||
<h4>inside the container</h4>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
another class to use is the implemented grid which can be seen in action here<br>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h4>12</h4></div>
|
||||
<div class="col-11 display"><h4>11</h4></div>
|
||||
<div class="col-1 display"><h4>1</h4></div>
|
||||
<div class="col-10 display"><h4>10</h4></div>
|
||||
<div class="col-2 display"><h4>2</h4></div>
|
||||
<div class="col-9 display"><h4>9</h4></div>
|
||||
<div class="col-3 display"><h4>3</h4></div>
|
||||
<div class="col-8 display"><h4>8</h4></div>
|
||||
<div class="col-4 display"><h4>4</h4></div>
|
||||
<div class="col-7 display"><h4>7</h4></div>
|
||||
<div class="col-5 display"><h4>5</h4></div>
|
||||
<div class="col-6 display"><h4>6</h4></div>
|
||||
<div class="col-6 display"><h4>6</h4></div>
|
||||
</div>
|
||||
you can see on this code example how the above was achived
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h4>12</h4></div>
|
||||
<div class="col-11 display"><h4>11</h4></div>
|
||||
<div class="col-1 display"><h4>1</h4></div>
|
||||
<div class="col-10 display"><h4>10</h4></div>
|
||||
<div class="col-2 display"><h4>2</h4></div>
|
||||
<div class="col-9 display"><h4>9</h4></div>
|
||||
<div class="col-3 display"><h4>3</h4></div>
|
||||
<div class="col-8 display"><h4>8</h4></div>
|
||||
<div class="col-4 display"><h4>4</h4></div>
|
||||
<div class="col-7 display"><h4>7</h4></div>
|
||||
<div class="col-5 display"><h4>5</h4></div>
|
||||
<div class="col-6 display"><h4>6</h4></div>
|
||||
<div class="col-6 display"><h4>6</h4></div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
<br>
|
||||
the display class is used to show how the grid works it is not essential to the functionality of grids in any way
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
167
docs/nav.html
Normal file
167
docs/nav.html
Normal file
@ -0,0 +1,167 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
<style>
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-style {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.493) ;
|
||||
}
|
||||
.sidebar-left {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: fit-content;
|
||||
}
|
||||
.sidebar-item {
|
||||
list-style: none;
|
||||
min-width: min-content;
|
||||
}
|
||||
.sidebar-link {
|
||||
width: fit-content;
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-title {
|
||||
width: max-content;
|
||||
font-size: 20pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.link {
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div style="padding-left: 20px; padding-right: 20px;">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-left sidebar-style">
|
||||
<h1 class="sidebar-title">Dcoumentation:</h1>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/index.html" class="sidebar-link">Home</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/nav.html" class="sidebar-link">Navigations</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/slider.html" class="sidebar-link">Sliders</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/toggle.html" class="sidebar-link">Toggles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="container">
|
||||
<h1>Navigations</h1>
|
||||
Here you will get an explanation on how Navigations in steevCSS are implemented<br>
|
||||
note: these are only exapmples and can be customized to a degree<br>
|
||||
<br>
|
||||
<h1>Default Implementation</h1>
|
||||
Below you find a visual example and the code on how to use it
|
||||
<header>
|
||||
<h1 class="nav-logo">LOGO</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<header>
|
||||
<h1 class="nav-logo">Logo</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</code>
|
||||
</pre>
|
||||
keep in mind this Implementation isnt fixed anywhere in order to do that you will need to assign locked classes as seen Below
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<header class="locked-top">
|
||||
<h1 class="nav-logo">Logo</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</code>
|
||||
</pre>
|
||||
This change will lock the navbar to stay on top at any point.<br>
|
||||
This change has been implemented just recently it may still contain unfound bugs<br>
|
||||
Its recommeneded to keep an eye on this page in order to see changes or additions to the locking system.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
134
docs/slider.html
Normal file
134
docs/slider.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
<style>
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-style {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.493) ;
|
||||
}
|
||||
.sidebar-left {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: fit-content;
|
||||
}
|
||||
.sidebar-item {
|
||||
list-style: none;
|
||||
min-width: min-content;
|
||||
}
|
||||
.sidebar-link {
|
||||
width: fit-content;
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-title {
|
||||
width: max-content;
|
||||
font-size: 20pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.link {
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div style="padding-left: 20px; padding-right: 20px;">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-left sidebar-style">
|
||||
<h1 class="sidebar-title">Dcoumentation:</h1>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/index.html" class="sidebar-link">Home</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/nav.html" class="sidebar-link">Navigations</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/slider.html" class="sidebar-link">Sliders</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/toggle.html" class="sidebar-link">Toggles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="container">
|
||||
<h1>Slider</h1>
|
||||
here you find the implementation of sliders keep in mind this library is in its very early stages and more will come as we go
|
||||
<br><br>
|
||||
<input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
|
||||
<span>Span Value: </span><span id="output">0</span>
|
||||
<script>
|
||||
var slider = document.getElementById("slider");
|
||||
var output = document.getElementById("output");
|
||||
output.innerHTML = slider.value; // Display the default slider value
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
slider.oninput = function() {
|
||||
output.innerHTML = this.value;
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
this example both show how to setup the slider and how to read its values into a label
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<input type="range" min="1" max="100" value="0" class="range-slider-rounded" id="slider">
|
||||
<span>Span Value: </span><span id="output">0</span>
|
||||
<script>
|
||||
var slider = document.getElementById("slider");
|
||||
var output = document.getElementById("output");
|
||||
output.innerHTML = slider.value; // Display the default slider value
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
slider.oninput = function() {
|
||||
output.innerHTML = this.value;
|
||||
}
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
133
docs/toggle.html
Normal file
133
docs/toggle.html
Normal file
@ -0,0 +1,133 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
<style>
|
||||
.sidebar-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.sidebar-style {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.493) ;
|
||||
}
|
||||
.sidebar-left {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
margin-left: 0;
|
||||
padding-right: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
.sidebar-menu {
|
||||
width: fit-content;
|
||||
}
|
||||
.sidebar-item {
|
||||
list-style: none;
|
||||
min-width: min-content;
|
||||
}
|
||||
.sidebar-link {
|
||||
width: fit-content;
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
.sidebar-content {
|
||||
width: 100%;
|
||||
}
|
||||
.sidebar-title {
|
||||
width: max-content;
|
||||
font-size: 20pt;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.link {
|
||||
color: #2980b9;
|
||||
text-decoration: none;
|
||||
font-size: 12pt;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div style="padding-left: 20px; padding-right: 20px;">
|
||||
<div class="sidebar-wrapper">
|
||||
<div class="sidebar-left sidebar-style">
|
||||
<h1 class="sidebar-title">Dcoumentation:</h1>
|
||||
<ul class="sidebar-menu">
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/index.html" class="sidebar-link">Home</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/nav.html" class="sidebar-link">Navigations</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/slider.html" class="sidebar-link">Sliders</a>
|
||||
</li>
|
||||
<li class="sidebar-item">
|
||||
<a href="/docs/toggle.html" class="sidebar-link">Toggles</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebar-content">
|
||||
<div class="container">
|
||||
<h1>Toggles</h1>
|
||||
Here you can see the implemented versions of toggle switches<br>
|
||||
for now, only two version have been implemented and on this site more toggle options will be added later
|
||||
<br>
|
||||
<br>
|
||||
<h1>Current versions of switches</h1>
|
||||
These two elements are the currently only implemented switch elements inside the library<br>
|
||||
<!-- Rectangular switch -->
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<!-- Rounded switch -->
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<!-- Rectangular switch -->
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<!-- Rounded switch -->
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</code>
|
||||
</pre>
|
||||
more is planed to this kind of input methods currently planed is to rename toggles to input groups and expand on the entire ecosystem it is recommended to stay tuned
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
</main>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
62
index.html
Normal file
62
index.html
Normal file
@ -0,0 +1,62 @@
|
||||
<!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>Document</title>
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<header style="box-shadow: 0 2px 0px rgba(0, 0, 0, 0.356);">
|
||||
<h1 class="nav-logo">SteevCSS</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/docs/index.html">DOCS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="embed" style="border-radius: 0; background-color: #3498db; color: white; padding: 2%;box-shadow: 0 2px 0px rgba(0, 0, 0, 0.356);">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h1>SteevCSS</h1>
|
||||
<p>A simple lightweig Web Development Library written in SASS and JavaScript</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-8">
|
||||
<h1>SteevCSS to boost your web design proccess</h1>
|
||||
<p>With premade and customizable elements such as the embed or alert elements this library helps you on your first steps when starting your new webapp. SteevCSS is written so you have to barely use css to change colours and thats it</p>
|
||||
</div>
|
||||
<div class="col-2"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1"></div>
|
||||
<div class="col-10">
|
||||
<h1>Installation</h1>
|
||||
<p>either by using the hosted version or by getting it from the <a target="_blank" class="link" href="https://github.com/steevLP/steevcss/releases">releases</a> tab on <a target="_blank" class="link" href="https://github.com/steevLP/steevcss">Github</a></p>
|
||||
<pre>
|
||||
<code class="language-html">
|
||||
<link rel="stylesheet" href="https://steevlp.github.io/steevcss/dist/steevcss.bundled.min.css">
|
||||
<!-- <script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script> -->
|
||||
</code>
|
||||
</pre>
|
||||
due to an issue that only should appear when displying code the script tag for the optional Javascript file is commented out if using it, don't add it as comment.
|
||||
|
||||
</div>
|
||||
<div class="col-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://steevlp.github.io/steevcss/dist/steevcss.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
|
||||
<script>hljs.highlightAll();</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user