Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
steevLP 2022-03-20 13:41:15 +01:00 committed by GitHub
parent 256aa7a981
commit a725faa01c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 945 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
docs/alerts.html Normal file
View File

@ -0,0 +1,125 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/buttons.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Alerts</h1><br>
Provide context based information for certain actions or results.
<br>
There are multiple 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>
</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>

123
docs/button.html Normal file
View File

@ -0,0 +1,123 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Toggles</h1>
Use the custom button styles for context-based options and actions on your website.<br>
<br>
<h1>Implementations</h1>
SteevCSS Currently ships with these button types<br>
<button class="btn">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
<pre>
<code class="language-html">
<button class="btn">Neutral</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-success">Success</button>
</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>

190
docs/index.html Normal file
View File

@ -0,0 +1,190 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Introduction</h1>
This Guide helps you to get started.<br>
You Also will find the Documentation for SteevCSS here.<br>
Because this is the first Documentation I maintain for a framework, feedback for improvement is more than welcome.<br>
You can provide feedback on the repositories <a class="link" href="https://github.com/steevLP/steevcss/issues">issue tracker</a><br>
<br>
To get started, You can either use the GitHub <a class="link" href="https://github.com/steevLP/steevcss/releases">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 displaying code, the script tag for the optional Javascript file is commented out. If using it, don't add it as a comment.
<br><br>
<h1>Embeds</h1>
Embeds are styled containers, they can be used to make the content look special or section off to kinds of designs.<br>
<div class="embed">
<h3>Use Embeds to section off content from the rest of your website.</h3>
<hr>
<p>Or make messages look more special through them.</p>
</div>
You can see how this example was created below.
<pre>
<code class="language-html">
<div class="embed">
<h3>Use Embeds to section off content from the rest of your website.</h3>
<hr>
<p>Or make messages look more special through them.</p>
</div>
</code>
</pre>
<h1>General Structure classes</h1>
There are multiple classes you can use to bring structure into your website. <br>
The First is the container class, which centers content and adds spacing to both sides.<br>
A nice side effect 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 a Container</h4></div>
<br>
You can see how this example was created below.
<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 way is the Grid System you can see an example below.<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 how this example was created below.
<pre>
<code class="language-html">
<div class="row">
<div class="col-12"><h4>12</h4></div>
<div class="col-11"><h4>11</h4></div>
<div class="col-1"><h4>1</h4></div>
<div class="col-10"><h4>10</h4></div>
<div class="col-2"><h4>2</h4></div>
<div class="col-9"><h4>9</h4></div>
<div class="col-3"><h4>3</h4></div>
<div class="col-8"><h4>8</h4></div>
<div class="col-4"><h4>4</h4></div>
<div class="col-7"><h4>7</h4></div>
<div class="col-5"><h4>5</h4></div>
<div class="col-6"><h4>6</h4></div>
<div class="col-6"><h4>6</h4></div>
</div>
</code>
</pre>
<br>
</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>

172
docs/nav.html Normal file
View File

@ -0,0 +1,172 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/buttons.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Navigations</h1>
Find Documentation and Examples for the Navbar Implementation.<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 isn't fixed anywhere to do that you will need to assign <u>locked</u> 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>
It's recommended to keep an eye on this page 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>

141
docs/slider.html Normal file
View File

@ -0,0 +1,141 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Slider</h1>
Use sliders to make an easy range from min to max values
<br><br>
<h2>How to use it?</h2>
As seen in the example this is one of the rare occurrences where you will need to use javascript to get values from the input.<br>
You can use normal javascript you would use to read from input fields as done below to get your values.
<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
View 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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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="/steevcss/docs/index.html" class="sidebar-link">Home</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/nav.html" class="sidebar-link">Navigations</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/alerts.html" class="sidebar-link">Alerts & Notification</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/slider.html" class="sidebar-link">Sliders</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/toggle.html" class="sidebar-link">Toggles</a>
</li>
<li class="sidebar-item">
<a href="/steevcss/docs/button.html" class="sidebar-link">Buttons</a>
</li>
</ul>
</div>
<div class="sidebar-content">
<div class="container">
<h1>Toggles</h1>
Use the toggle options to make easy true false selections for users.<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>
</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>

61
index.html Normal file
View File

@ -0,0 +1,61 @@
<!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>steevcss</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="/steevcss/">Home</a></li>
<li><a href="/steevcss/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 lightweight 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 process</h1>
<p>With premade and customizable elements such as the embed or alert elements, this library helps you with your first steps when starting your new web app. SteevCSS is written so you have to barely use CSS to change colors and that's it</p>
</div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-10">
<h1>Usage</h1>
<p>You can use SteevCSS by either 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 displaying code, the script tag for the optional Javascript file is commented out, if you are using it, don't add it as a 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>