diff --git a/.gitignore b/.gitignore index 5180d57..18566ec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,2 @@ node_modules/ -.vscode -sample.html \ No newline at end of file +.vscode \ No newline at end of file diff --git a/examples/overview.html b/examples/overview.html new file mode 100644 index 0000000..b072632 --- /dev/null +++ b/examples/overview.html @@ -0,0 +1,386 @@ + + + + + + + Stylelite + + + + +
+
+ +
+
+

+ STYLELITE + CSS +

+
CSS for Minimalist
+
+
+
+
 
+
 
+
 
+
+
+
+ +

Overview

+
+ DIV is not the only tag avalible to your designs. + Mimic traditional .container class by just using a MAIN tag. +

+ Need to divide major sections of your code, eh...use SECTION tag. +

+ And for that little extra content flair, wrap in an ARTICLE tag. +
+
+
+ +

Typography

+
+
+ The alternative to good design is always bad design. there is no such thing as no design. + Simplicity carried to an extreme, becomes elegance. + -- Adam Judge +
+

+ P + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vestibulum luctus arcu, + eu faucibus ex. Ut consequat lorem eget aliquet semper. Praesent quis vestibulum ante, + id tristique leo. Etiam sed congue lacus. Nunc ut ornare metus. Suspendisse tincidunt in + odio eu faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla + facilisi. +

+

+ STRONG + Generated 1 paragraph, 52 words, 354 bytes of + Lorem Ipsum + +

+
+
+
+
+

H1 Heading...

+

H2 Heading...

+

H3 Heading...

+

H4 Heading...

+
H5 Heading...
+
H6 Heading...
+
+
+

P can simply be a paragraph

+

A can be a link

+

STRONG can be bold

+

U can be underlined

+

EM can be emphasised

+

SMALL can be small

+

CODE can be code

+
+
+
+ HR +
+
+
+
+ IMG +
+ Example image +
+
+
+ +

Lists

+
+
+ UL +
    +
  • LIList Item
    • +
  • LIList Item
    • +
  • LIList Item
    • +
  • LIList Item
    • +
+
+
+ OL +
    +
  1. LIList Item
    2. +
  2. LIList Item
    3. +
  3. LIList Item
    4. +
  4. LIList Item
    5. +
+
+
+
+
+ +

Forms

+
+
+ Details Summary +
+ Default details and summary behavior. + wrap content in tag, like div +
+
+ +
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+
+
+
+
+ +

Buttons

+
+ + + + +
+ +
+ + + + +
+
+
+ +

Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + +
OneTwoThere
DataDataData
DataDataData
DataDataData
+
+ +
+ +

Grid System

+

+ The flex-based grid system dynamicly divides content on the number of + child elements under row, be that a plain div(auto) or col-* + +

+ column sizes range from col-1 to col-5 +

+ +

+ a col-5 is 5x col-1 +

+ +
+ if col-* is not defined on a div, it is considered a col-1 +
+

+
+
+
auto
+
+
+
auto
+
auto
+
+
+
auto
+
auto
+
auto
+
+
+
auto
+
auto
+
auto
+
auto
+
+
+
auto
+
auto
+
auto
+
auto
+
auto
+
+
+
2
+
auto
+
auto
+
auto
+
auto
+
+
+
3
+
auto
+
auto
+
auto
+
auto
+
+
+
4
+
auto
+
auto
+
auto
+
auto
+
+
+
5
+
auto
+
auto
+
auto
+
auto
+
+
+
+
+ +

Utility

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
.contentadds uniform padding
.leftfloat content left
.rightfloat content right
.centertext aligns content center
.griddynamic grid layout helper
.smreduces component size by half
.lgincrease component size by 75%
.outline
.underline
.border
.spaceless
.subtitledesigned for tigher fit under headings
.fillfills all available space
.clear clear float fix
+
+
+ + \ No newline at end of file