From d9349538b68b606bd730ea385194cf0a6d4845f2 Mon Sep 17 00:00:00 2001 From: steevLP Date: Sun, 13 Mar 2022 15:23:05 +0100 Subject: [PATCH] added first version of website --- docs/alerts.html | 163 +++++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 168 +++++++++++++++++++++++++++++++++++++++++++++++ docs/nav.html | 167 ++++++++++++++++++++++++++++++++++++++++++++++ docs/slider.html | 134 +++++++++++++++++++++++++++++++++++++ docs/toggle.html | 133 +++++++++++++++++++++++++++++++++++++ index.html | 62 +++++++++++++++++ 6 files changed, 827 insertions(+) create mode 100644 docs/alerts.html create mode 100644 docs/index.html create mode 100644 docs/nav.html create mode 100644 docs/slider.html create mode 100644 docs/toggle.html create mode 100644 index.html diff --git a/docs/alerts.html b/docs/alerts.html new file mode 100644 index 0000000..7fa3644 --- /dev/null +++ b/docs/alerts.html @@ -0,0 +1,163 @@ + + + + + + + Document + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Alerts


+ You are seeing the Alert Documentation
+ as explanation there are two types of elements that some might think both are alerts
+ one is the full body coloured alert documented here and the other is basicly the same but only with coloured borders.
+
+ there are multimple types of alerts
+
+
Primary

+
Danger

+
Warning

+
Success
+ 
+                                
+
 Primary 

+
 Danger 

+
 Warning 

+
 Success 

+                                
+
+

Notification Elements

+ As explained Notifications have a slight difference in their setup
+ the biggest difference is how they look and that they have a title and a message
+
+
+

Primary Title

+ Primary Message +
+
+
+

Danger Title

+ Danger Message +
+
+
+

Warning Title

+ Warning Message +
+
+
+

Success Title

+ Success Message +
+ 
+                                
+
 
+    
Primary Title

+    Primary Message
+

+
 
+    
Danger Title

+    Danger Message
+

+
 
+    
Warning Title

+    Warning Message
+

+
 
+    
Success Title

+    Success Message
+

+                                
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..a094ee0 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,168 @@ + + + + + + + Document + + + + +
+

SteevCSS

+ + + +
+ +
+
+
+
+

Dcoumentation:

+ +
+
+
+

Introduction

+ This Guide should help you to get started and to find the proper first information on how to navigate arround on this site.
+ 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 issue tracker
+
+ You can either use the github releases or use the hosted version by using copying this: + 
+                                
+
+
+                                
+
+ 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. +

+

General Structure classes

+ there are multiple classes one can use to bring strcuture into his site.
+ one is using the container class wich centers content and adds spacing to both sides
+ a nice to have is that this class also can to some degree handle changing screen sizes +

+

inside the container

+
+ you can see how this exact example (it was styled with padding and border) was created + 
+                                
+

+    
inside the container

+

+                                
+
+ another class to use is the implemented grid which can be seen in action here
+
+
+

12

+

11

+

1

+

10

+

2

+

9

+

3

+

8

+

4

+

7

+

5

+

6

+

6

+
+ you can see on this code example how the above was achived + 
+                                
+

+    
12

+    
11

+    
1

+    
10

+    
2

+    
9

+    
3

+    
8

+    
4

+    
7

+    
5

+    
6

+    
6

+

+                                
+
+
+ the display class is used to show how the grid works it is not essential to the functionality of grids in any way +

+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/nav.html b/docs/nav.html new file mode 100644 index 0000000..e41c457 --- /dev/null +++ b/docs/nav.html @@ -0,0 +1,167 @@ + + + + + + + Document + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Navigations

+ Here you will get an explanation on how Navigations in steevCSS are implemented
+ note: these are only exapmples and can be customized to a degree
+
+

Default Implementation

+ Below you find a visual example and the code on how to use it +
+

LOGO

+ + + +
+ 
+                                
+

+    
Logo

+    
+    
+    
+

+                                
+
+ keep in mind this Implementation isnt fixed anywhere in order to do that you will need to assign locked classes as seen Below + 
+                                
+

+    
Logo

+    
+    
+    
+

+                                
+
+ This change will lock the navbar to stay on top at any point.
+ This change has been implemented just recently it may still contain unfound bugs
+ Its recommeneded to keep an eye on this page in order to see changes or additions to the locking system. +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/slider.html b/docs/slider.html new file mode 100644 index 0000000..ea3f468 --- /dev/null +++ b/docs/slider.html @@ -0,0 +1,134 @@ + + + + + + + Document + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Slider

+ 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 +

+ + Span Value: 0 + +

+ this example both show how to setup the slider and how to read its values into a label + 
+                                
+
+Span Value: 0
+
+                                
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/toggle.html b/docs/toggle.html new file mode 100644 index 0000000..2124a29 --- /dev/null +++ b/docs/toggle.html @@ -0,0 +1,133 @@ + + + + + + + Document + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Toggles

+ Here you can see the implemented versions of toggle switches
+ for now, only two version have been implemented and on this site more toggle options will be added later +
+
+

Current versions of switches

+ These two elements are the currently only implemented switch elements inside the library
+ + + + + 
+                                
+
+
+
+  
+                                
+
+ 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 +
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..851c44a --- /dev/null +++ b/index.html @@ -0,0 +1,62 @@ + + + + + + + Document + + + + +
+

SteevCSS

+ + + +
+
+
+

SteevCSS

+

A simple lightweig Web Development Library written in SASS and JavaScript

+
+
+
+
+
+
+
+

SteevCSS to boost your web design proccess

+

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

+
+
+
+
+
+
+

Installation

+

either by using the hosted version or by getting it from the releases tab on Github

+ 
+                        
+
+
+                        
+
+ 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. + +
+
+
+
+ + + + + \ No newline at end of file