diff --git a/docs/alerts.html b/docs/alerts.html new file mode 100644 index 0000000..6234912 --- /dev/null +++ b/docs/alerts.html @@ -0,0 +1,125 @@ + + + + + + + steevcss + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Alerts


+ Provide context based information for certain actions or results. +
+ There are multiple types of alerts. +
+
+
Primary

+
Danger

+
Warning

+
Success
+ 
+                                
+
 Primary 

+
 Danger 

+
 Warning 

+
 Success 

+                                
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/button.html b/docs/button.html new file mode 100644 index 0000000..7f77556 --- /dev/null +++ b/docs/button.html @@ -0,0 +1,123 @@ + + + + + + + steevcss + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Toggles

+ Use the custom button styles for context-based options and actions on your website.
+
+

Implementations

+ SteevCSS Currently ships with these button types
+ + + + + + 
+                                
+
+
+
+
+
+                                
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..7fa3c2a --- /dev/null +++ b/docs/index.html @@ -0,0 +1,190 @@ + + + + + + + steevcss + + + + +
+

SteevCSS

+ + + +
+ +
+
+
+
+

Dcoumentation:

+ +
+
+
+

Introduction

+ This Guide helps you to get started.
+ You Also will find the Documentation for SteevCSS here.
+ Because this is the first Documentation I maintain for a framework, feedback for improvement is more than welcome.
+ You can provide feedback on the repositories issue tracker
+
+ To get started, 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 displaying code, the script tag for the optional Javascript file is commented out. If using it, don't add it as a comment. +

+

Embeds

+ Embeds are styled containers, they can be used to make the content look special or section off to kinds of designs.
+
+

Use Embeds to section off content from the rest of your website.

+
+

Or make messages look more special through them.

+
+ You can see how this example was created below. + 
+                                
+

+    
Use Embeds to section off content from the rest of your website.

+    

+    
Or make messages look more special through them.

+

+                                
+
+

General Structure classes

+ There are multiple classes you can use to bring structure into your website.
+ The First is the container class, which centers content and adds spacing to both sides.
+ A nice side effect is that this class also can, to some degree, handle changing screen sizes. +

+
+

Inside a Container

+
+ You can see how this example was created below. + 
+                                
+

+    
inside the container

+

+                                
+
+ Another way is the Grid System you can see an example below.
+
+
+

12

+

11

+

1

+

10

+

2

+

9

+

3

+

8

+

4

+

7

+

5

+

6

+

6

+
+ You can see how this example was created below. + 
+                                
+

+    
12

+    
11

+    
1

+    
10

+    
2

+    
9

+    
3

+    
8

+    
4

+    
7

+    
5

+    
6

+    
6

+

+                                
+
+
+

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

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Navigations

+ Find Documentation and Examples for the Navbar Implementation.
+
+

Default Implementation

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

LOGO

+ + + +
+ 
+                                
+

+    
Logo

+    
+    
+    
+

+                                
+
+ Keep in mind this Implementation isn't fixed anywhere 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
+ It's recommended to keep an eye on this page 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..a261f42 --- /dev/null +++ b/docs/slider.html @@ -0,0 +1,141 @@ + + + + + + + steevcss + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Slider

+ Use sliders to make an easy range from min to max values +

+

How to use it?

+ 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.
+ You can use normal javascript you would use to read from input fields as done below to get your values. +

+ + 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..adb1c5f --- /dev/null +++ b/docs/toggle.html @@ -0,0 +1,133 @@ + + + + + + + steevcss + + + + + +
+

SteevCSS

+ + + +
+
+
+
+
+

Dcoumentation:

+ +
+
+
+

Toggles

+ Use the toggle options to make easy true false selections for users.
+
+

Current versions of switches

+ These two elements are the currently only implemented switch elements inside the library
+ + + + + 
+                                
+
+
+
+  
+                                
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..1088f2e --- /dev/null +++ b/index.html @@ -0,0 +1,61 @@ + + + + + + + steevcss + + + + +
+

SteevCSS

+ + + +
+
+
+

SteevCSS

+

A simple lightweight Web Development Library, written in SASS and JavaScript

+
+
+
+
+
+
+
+

SteevCSS to boost your web design process

+

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

+
+
+
+
+
+
+

Usage

+

You can use SteevCSS by either using the hosted version or by getting it from the releases tab on Github

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