From d4223e06fe1dd6596d90d99ed50c2b082e3a9f8d Mon Sep 17 00:00:00 2001 From: Geoff Doty Date: Fri, 22 Dec 2023 14:52:37 -0600 Subject: [PATCH] styling overhaul & colors --- examples/overview.html | 777 +++++++++++++++++++++-------------------- src/stylelite.css | 668 ++++++++++++++++++++--------------- 2 files changed, 776 insertions(+), 669 deletions(-) diff --git a/examples/overview.html b/examples/overview.html index b072632..f5102ab 100644 --- a/examples/overview.html +++ b/examples/overview.html @@ -1,386 +1,393 @@ - - - - - - - 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
-
-
- + + + + + + + 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
+
+
+
+
+ +

Components

+ +
+
Header
+
Content
+
Footer
+
+
+
+ +

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 diff --git a/src/stylelite.css b/src/stylelite.css index e1e0ed6..02bffb6 100644 --- a/src/stylelite.css +++ b/src/stylelite.css @@ -1,284 +1,384 @@ -/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ -:root { - --space: 1rem; - --size: 1.1rem; - --radius: 0rem; - --fg: #17202A; - --bg: #FDFEFE; - --mg: #ABB2B9; -} - -[data-theme=dark] { - --mg: #ABB2B9; - --bg: #17202A; - --fg: #FDFEFE; -} - -*,*:before,*:after { - box-sizing: border-box; -} - -html,body { - background: var(--bg); - color: var(--fg); - margin: 0; - padding: 0; - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: var(--size); - letter-spacing: 0.0625em; - line-height: calc(var(--size) * 1.5); - box-sizing: border-box; - padding: 0; -} - -img,embed,iframe,object,audio,video { - height: auto; - max-width: 100%; - border: none; -} - -main { - margin: 0 auto; - padding: var(--space); - height: 100vh; - max-width: 1140px; -} - -ul,ol,li { - margin: 0 calc(var(--space) *.72); - padding: 0 -} - -table { - background: var(--bg); - border-collapse: collapse; - border-spacing: 0; - width: 100%; -} - -th { - text-align: left; -} - -th,td { - padding: calc(var(--space) / 2.4); - border-bottom: 1px solid var(--mg); -} - -blockquote { - margin: var(--space) 0; - border-left: calc(var(--space) / 2) solid var(--fg); - color: var(--fg); - background: var(--mg); - padding: var(--space); -} - -code { - color: var(--mg); - font-family: monospace; -} - -blockquote code, details code { - color: var(--bg); -} - -hr { - color: var(--mg); - border: 1px solid; -} - -h1,h2,h3,h4,h5,h6 { - margin: var(--space) 0; - padding-bottom: calc(var(--space) / 2); - text-transform: capitalize; -} - -h1 { - font-size: calc(var(--size) * 2); - color: var(--fg); -} - -a {color: var(--mg)} -a:hover {color: var(--fg)} - -section, article { - margin-top: calc(var(--space) * 1.2); - padding-bottom: var(--space); -} - -/* Forms */ - -details { - margin: var(--space) 0; - color: var(--bg); - cursor: pointer; -} - -details[open] { - background-color: var(--mg); - margin-bottom: var(--space); -} - -details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)} - -summary { - background-color: var(--mg); -} - -button, input { - display: inline-block; - outline: none; - box-sizing: border-box; - font-size: var(--size); - background: var(--bg); - color: var(--fg); - width: 100%; - height: calc(var(--size) * 3); - border: 1px solid var(--mg); - border-radius: var(--radius); - padding: clamp(.5rem, var(--space), 2rem); - margin-bottom: var(--space); - margin-right: var(--space); -} - -button, input[type="reset"],input[type="submit"] { - display: inline-block; - text-transform: uppercase; - border-radius: var(--radius); - width: initial; - background: var(--fg); - color: var(--bg); -} - -button { - background: var(--fg); - color: var(--bg); -} - -button:hover, input[type="reset"]:hover,input[type="submit"]:hover { - background: var(--mg); - color: var(--fg); - cursor: pointer; -} - -input:disabled { - background: var(--mg); - color: var(--bg); - cursor: not-allowed; -} - -select:focus,textarea:focus,input:focus { - border: 2px solid var(--mg); -} - -input[type="checkbox"],input[type="radio"] { - display: inline-block; - padding: 0; - margin: 0 .5rem; - width: calc(var(--size) * .8); - height: calc(var(--size) * .8); -} - -select,textarea { - display: inline-block; - outline: none; - font-size: var(--size); - height: calc(var(--size) * 3); - width: 100%; - border: 1px solid var(--mg); - color: var(--fg); - background: var(--bg); - border-radius: var(--radius); - padding: 0 var(--space); - margin-bottom: var(--space); - cursor: pointer; -} - -select { - background: var(--bg) no-repeat 100%; - color: var(--fg); - padding: 0 clamp(.5rem, var(--space), 2rem); - appearance: none; - background-size: 1ex; - background-origin: content-box; - background-image: url("data:image/svg+xml;utf8,"); -} - -textarea { - overflow: auto; - resize: vertical; - border: 1px solid var(--mg); - height: calc(var(--size) * 6rem);; - padding: clamp(.5rem, var(--space), 2rem); - cursor: text; - color: var(--fg); -} - -/* Navigation */ - -nav { - display: flex; - justify-content: space-between; - padding: .5rem 1rem; - background-color: var(--fg); - color: var(--bg); -} - -nav ul { - display: flex; - list-style-type: none; -} - -nav ul li a { - color: var(--bg); - text-decoration: none; -} -nav ul li a:hover {color: var(--mg)} - - -/* Grid System */ - -.grid { - display: grid; - gap: var(--space); - grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); -} - -.row { - display: flex; - flex: 0 1 auto; - flex-direction: row; - flex-wrap: wrap; - margin:0; -} -.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; - box-sizing: border-box; - flex: 1; - max-width: 100%; -} - -.col-1 {flex: 1 !important;} -.col-2 {flex: 2 !important;} -.col-3 {flex: 3 !important;} -.col-4 {flex: 4 !important;} -.col-5 {flex: 5 !important;} - -/* Utilities */ - -.right {float:right} -.left {float:left} -.center {text-align: center;} -.clear {content:'';display: table;clear:both} -.fill {width: 100%; height: 100%} -.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)} -.underline {border-bottom: 1px solid var(--mg)} -.border {border: 1px solid var(--mg)} -.content {padding: var(--space)} -.subtitle {margin-top: calc(var(--size) * -1); margin-bottom: var(--space); font-size: smaller}; -.spaceless {margin: 0; padding:0} -.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);} -.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);} \ No newline at end of file +/*! Stylelite v:0.5.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ +:root { + --space: 1rem; + --size: 1.1rem; + --radius: 0rem; + --fg: #17202A; + --bg: #FDFEFE; + --mg: #99A3A4; + + --white: #FFF; + --black: #000; + --gray: #DCDCDC; + + --primary: #1F618D; + --info: #3498DB; + --warning: #B7950B; + --danger: #C0392B; + --success: #1E8449; + --default: #DCDCDC; +} + +[data-theme=dark] { + --mg: #99A3A4;; + --bg: #17202A; + --fg: #EAECEE; +} + +*,*:before,*:after { + box-sizing: border-box; +} + +html,body { + background: var(--bg); + color: var(--fg); + margin: 0; + padding: 0; + font-family: -apple-system, system-ui, Roboto, sans-serif; + font-size: 16px; + letter-spacing: 0.0125em; + line-height: calc(var(--size) * 1.5); + box-sizing: border-box; + padding: 0; +} + +img,embed,iframe,object,audio,video { + height: auto; + max-width: 100%; + border: none; +} + +main { + margin: 0 auto; + padding: var(--space); + height: 100vh; + max-width: 1140px; +} + +table { + background: var(--bg); + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +table>thead>tr>th { + border-bottom: 2px solid var(--mg); +} + +table.striped tbody>:nth-child(2n-1) { + background: #f5f5f5; +} + +th { + text-align: left; +} + +th,td { + padding: calc(var(--space) / 2.4); + border-bottom: 1px solid var(--mg); +} + +fieldset {border: none;padding: 0;} + +legend { + font-size: larger; + display: block; + width: 100%; + padding: 0; + margin-bottom: 1rem; + line-height: inherit; + border: 0; + border-bottom: 1px solid var(--mg); +} + +blockquote { + margin: var(--space) 0; + border-left: calc(var(--space) / 2) solid var(--fg); + color: var(--black); + background: var(--gray); + padding: var(--space); +} + +code { + color: var(--mg); + font-family: monospace; +} + +blockquote code, details code { + color: var(--bg); +} + +hr { + color: var(--mg); + border: 1px solid; +} + +h1,h2,h3,h4,h5,h6 { + margin: var(--space) 0; + padding-bottom: calc(var(--space) / 2); + text-transform: capitalize; + color: var(--fg); +} + +h1 { + font-size: 2.2rem; +} + +h2 {font-size: 1.8rem} +h3 {font-size: 1.4rem} +h4 {font-size: 1.2rem} +h5 {font-size: 1rem} +h6 {font-size: .9rem} + +a {color: var(--primary)} +a:hover {opacity: .5;} +/* a:hover {color: var(--fg)} */ + +section, article { + margin-bottom: calc(var(--space) * 1.2); + padding-bottom: var(--space); +} + +article { + border: 1px solid rgba(0,0,0,.125); + background: var(--gray); +} + +article main { + height: auto; + padding: var(--space); +} + +article header { + /* border-bottom: 1px solid rgba(0,0,0,.125); */ + padding: var(--space); +} + +article footer { + /* background: var(--default); */ + /* border-top: 1px solid rgba(0,0,0,.125); */ + padding: var(--space); +} + +/* Forms */ + +form>* {border-top: red} + +details { + margin: var(--space) 0; + color: var(--black); + cursor: pointer; +} + +details[open] { + background-color: var(--default); + margin-bottom: var(--space); +} + +details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)} + +summary { + background-color: var(--default); +} + +button, input { + display: inline-block; + outline: none; + box-sizing: border-box; + font-size: 1rem; + background: var(--bg); + color: var(--fg); + width: 100%; + height: calc(var(--size) * 2); + border: 1px solid var(--mg); + border-radius: var(--radius); + padding: .5rem 1rem; +} + +button, input[type="reset"],input[type="submit"] { + display: inline-block; + border-radius: var(--radius); + width: initial; +} + +button[disabled], button[disabled]:hover { + opacity: .5; + cursor: not-allowed; + pointer-events: none; +} + +button.link { + border: none; + background: none; + color: var(--primary) +} + +button.default { + background: var(--default); + color: var(--black); +} + +button.primary { + background: var(--primary); + color: var(--white); +} +button.info { + background: var(--info); + color: var(--white); +} + +button.warning { + background: var(--warning); + color: var(--white); +} + +button.danger { + background: var(--danger); + color: var(--white); +} + +button.success { + background: var(--success); + color: var(--white); +} + +button:hover, input[type="reset"]:hover,input[type="submit"]:hover { + /* background: var(--mg); */ + background: #DCDCDC; + color: var(--black); + cursor: pointer; + +} + +button.link:hover { + background: var(--bg) +} + +input:disabled { + opacity: .5; + color: var(--bg); + cursor: not-allowed; +} + +select:focus,textarea:focus,input:focus { + border: 2px solid var(--mg); +} + +input[type="checkbox"],input[type="radio"] { + display: inline-block; + padding: 0; + margin: 0 .5rem; + width: calc(var(--size) * .8); + height: calc(var(--size) * .8); +} + +select,textarea { + display: inline-block; + outline: none; + font-size: var(--size); + height: calc(var(--size) * 2); + width: 100%; + border: 1px solid var(--mg); + color: var(--fg); + background: var(--bg); + border-radius: var(--radius); + padding: 0 var(--space); + /* margin-bottom: var(--space); */ + cursor: pointer; +} + +select { + background: var(--bg) no-repeat 100%; + color: var(--fg); + padding: 0 clamp(.5rem, var(--space), 2rem); + appearance: none; + background-size: 1ex; + background-origin: content-box; + background-image: url("data:image/svg+xml;utf8,"); +} + +textarea { + overflow: auto; + resize: vertical; + border: 1px solid var(--mg); + height: calc(var(--size) * 6rem);; + padding: clamp(.5rem, var(--space), 2rem); + cursor: text; + color: var(--fg); +} + +/* Navigation */ + +nav { + display: flex; + justify-content: space-between; + border-bottom: 1px solid var(--mg); +} + +nav ul { + margin:0; + display: flex; + list-style-type: none; + +} + +nav ul li a { + padding: .5rem 1rem; + text-decoration: none; +} + +nav ul li a:hover {opacity: .75;} + + +/* Grid System */ + +.grid { + display: grid; + gap: var(--space); + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); + padding: .4rem; +} + +.row { + display: flex; + flex: 0 1 auto; + flex-direction: row; + flex-wrap: wrap; + margin:0; + padding: .4rem; +} + +.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: stretch; + box-sizing: border-box; + flex: 1; + max-width: 100%; +} + +.col-1 {flex: 1 !important;} +.col-2 {flex: 2 !important;} +.col-3 {flex: 3 !important;} +.col-4 {flex: 4 !important;} +.col-5 {flex: 5 !important;} + +/* Utilities */ + +.right {float:right} +.left {float:left} +.center {text-align: center;} +.clear {content:'';display: table;clear:both} +.fill {width: 100%; height: 100%} +.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)} +.underline {border-bottom: 1px solid var(--mg)} +.border {border: 1px solid var(--mg)} +.content {padding: var(--space)} +.title {margin: 0; padding:0} +.subtitle {margin-top: -.25rem; font-size: small}; +.spaceless {margin: 0; padding:0} +.sm {font-size: small;height: calc(var(--size) * 1.5);padding: 0 calc(var(--size)/ .75);} +.lg {font-size: x-large;height: calc(var(--size) * 4.5);padding: 0 calc(var(--size) / 1.25);} +.rounded {border-radius: calc(var(--size) / 4);}