diff --git a/README.md b/README.md index ff6354a..aac5c7e 100644 --- a/README.md +++ b/README.md @@ -44,10 +44,47 @@ Include Feather Icons ``` -## Dark Mode +## Customize + +While **Stylelite** is a drop-and-forget cascading style sheet (css) file, that doesn't mean you cannot customize it -- easily! + +It is RECOMMENDED you import **Stylelite** via a `main.css` or the like referenced in your web application, like + +```css +@import url(stylelite); + +/* Add Your Styles Below */ + +``` + +Below are some simple and common examples. + +### Dark Mode Add `data-theme="dark"` to the `html` tag for a taste of the dark side +```html + +``` + +> DEFAULT: data-theme="light" + +### Theme + +The stock theme color is `steelblue`, but you can change it to anything you want just add + +```css +:root { + --theme: Magenta; +} +``` + +> NOTE: Light mode (default) should use dark theme colors, and dark mode should use light theme colors + +### Rounded Corners + +By default Stylelite is a boxy design, but if you want a rounded design, just set `--radius` to something. try `.4rem` + ## LICENSE @@ -58,7 +95,12 @@ Add `data-theme="dark"` to the `html` tag for a taste of the dark side Keep it small, but immediately useful. -Tweaks to hit that SWEET spot: +Tweak to hit that SWEET spot: - Dark mode use native browser scroll bars/classes -- Color Utility (extras) +- Extras + - Colors - Bootstrap-inspired classes + - Layout - Little more flex-based layout options + - Switch - More modern UI component + - Spinner - Identify content is loading + - Tabs - Another useful modern UI component diff --git a/dist/stylelite.map b/dist/stylelite.map index 2775822..112f5bc 100644 --- a/dist/stylelite.map +++ b/dist/stylelite.map @@ -1 +1 @@ -{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,W,CACA,a,CACA,Y,CACA,Y,CACA,Y,CAEA,Y,CACA,Y,CACA,W,CAEA,Y,CACA,W,CAEA,iB,CAEA,iB,CACA,gB,CACA,iB,CAGJ,iB,CACI,Y,CACA,Y,CACA,Y,CAGJ,C,CAAG,Q,CAAH,C,CAEY,O,CAAV,Q,CACE,qB,CAGC,I,CAAL,I,CA8CA,K,CACI,oB,CA/CC,I,CAAL,I,CAEI,e,CACA,yB,CACA,gC,CACA,c,CACA,sB,CACA,kB,CAGe,M,CAAnB,G,CAAY,K,CAAP,K,CAAgC,M,CAAV,Q,CAAkB,oB,CAE7C,C,CAAG,a,CAEqB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CAKJ,E,CAFA,E,CAAI,E,CAAI,gB,CAIR,K,CACI,oB,CACA,e,CACA,iB,CACA,kB,CACA,kB,CAGJ,W,CACI,iB,CACA,uB,CACA,kB,CACA,iB,CACA,6B,CAGJ,I,CACI,a,CACA,mB,CACA,gB,CAGJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,iB,CACI,oC,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,a,CACA,oC,CAGJ,oC,CACI,kB,CAGJ,iB,CAAmB,S,CAEnB,Q,CAEI,Y,CACA,6B,CAuBJ,kB,CApBA,M,CAoByC,kB,CAAqB,6B,CA1B9D,Q,CAMA,M,CAII,oB,CAJJ,M,CACI,gB,CACA,e,CAGA,a,CACA,iB,CACA,oB,CACA,Q,CACA,mB,CAIJ,U,CACI,mB,CACA,kB,CACA,uB,CACA,mB,CAGJ,kB,CAAoB,kB,CACpB,iB,CAAmB,kB,CAAqB,mB,CAAsB,8B,CAC9D,e,CAAiB,kB,CAAqB,oB,CAAwB,+B,CAC9D,kB,CAAoB,kB,CAAqB,oB,CAAuB,+B,CAChE,kB,CAAoB,e,CAAkB,iB,CAAoB,4B,CAE1D,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CACX,kB,CACA,mB,CACA,kC,CACA,yB,CAGJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,c,CAEJ,C,CAnBA,E,CAmBG,kB,CACH,O,CAAS,iB,CAEA,O,CAAT,O,CACI,kB,CAGJ,O,CACI,iC,CACA,uB,CACA,mB,CAKJ,O,CACI,mB,CACA,e,CAIJ,a,CAWA,O,CAGI,0B,CACA,6B,CAfJ,a,CAEI,yB,CAIJ,S,CACI,qB,CACA,kB,CAGJ,O,CACI,kB,CACA,W,CAnBJ,O,CAwBA,a,CAAe,c,CACf,YAAY,c,CAAgB,c,CAE5B,Q,CAAU,M,CAAQ,K,CAEd,S,CACA,qB,CACA,c,CACA,oB,CAEA,qB,CAEA,a,CACA,6B,CAEA,kB,CAZJ,Q,CAAkB,K,CACd,oB,CAOA,U,CAGA,2B,CAXc,K,CAMd,e,CASJ,iB,CAAmB,c,CAEnB,oB,CACA,iB,CACI,S,CACH,Y,CACA,a,CACA,kB,CACG,iB,CAGJ,M,CAAQ,iB,CAAoB,kB,CACxB,oB,CACA,2B,CACA,a,CAGJ,gB,CAAkB,sB,CACd,iB,CACA,6B,CACA,4B,CACA,kB,CACA,mB,CAGJ,W,CAMA,iB,CALI,Q,CACA,c,CACA,kB,CAGJ,iB,CAII,yB,CAQJ,c,CACI,uB,CACA,kB,CAPJ,Q,CAAU,M,CAUV,c,CACI,uB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,a,CACI,wB,CACA,kB,CAGJ,c,CACI,yB,CACA,kB,CAGJ,c,CAAgB,Y,CAAc,uB,CAA0B,wB,CACpD,sB,CACA,6B,CACA,kB,CACA,c,CAG+B,c,CAAnC,e,CAAiB,iB,CACb,kB,CACA,mB,CACA,sB,CAGwB,W,CAA5B,Y,CAAa,c,CACT,6B,CAGJ,M,CAAS,gB,CAAmB,qB,CAE5B,M,CAAO,Q,CACH,oB,CACA,S,CACA,qB,CACA,a,CACA,U,CAGA,oB,CACA,2B,CACA,qB,CAiBA,6B,CAIA,e,CA/BJ,M,CAWI,c,CAIA,mC,CAEA,uC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CArBG,Q,CAyBH,a,CACA,e,CAEA,6B,CACA,qC,CACA,W,CAIkB,Q,CAAtB,S,CAAgC,mB,CAIhC,G,CAEI,6B,CACA,qB,CACA,oC,CAGJ,M,CAAsB,oB,CACtB,M,CAAQ,iB,CACR,K,CAAO,oB,CAEP,U,CACI,Y,CACA,uB,CAFJ,U,CAMA,Y,CAAc,kB,CAId,Y,CACI,W,CAGJ,M,CACI,6B,CACA,8D,CACA,2B,CACA,a,CAKJ,K,CACI,Y,CACA,U,CACA,oD,CAGJ,I,CAxCA,G,CAOA,M,CAkCI,Y,CADJ,I,CAEI,a,CACA,kB,CACA,c,CACA,gB,CACA,Q,CACA,gB,CAGI,I,CAAR,M,CAKI,M,CALI,I,CAAM,M,CAAQ,M,CAAQ,M,CAAQ,M,CAAO,M,CAA7C,M,CACI,Y,CACA,qB,CACA,6B,CACA,mB,CAEA,c,CAGJ,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CACR,M,CAAQ,gB,CAIR,M,CAAQ,Y,CACR,M,CAAQ,W,CACR,K,CAAO,U,CACP,O,CAAS,iB,CACT,M,CAAQ,U,CAAW,a,CAAe,U,CAClC,Q,CAAU,iC,CACV,O,CAAS,6B,CACT,U,CAAY,Q,CACZ,S,CAAW,Q,CAAW,S,CACtB,S,CAAW,iB","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.7.1 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --size: 1rem;\r\n --radius: 0rem;\r\n --fg: #17202A;\r\n --bg: #FDFEFE;\r\n --mg: #99A3A4;\r\n\r\n --white: #FFF;\r\n --black: #000;\r\n --gray: #777;\r\n\r\n --light: #EEE;\r\n --dark: #222;\r\n\r\n --theme: steelblue;\r\n\r\n --warning: #B7950B;\r\n --danger: #C0392B;\r\n --success: #1E8449;\r\n}\r\n\r\n[data-theme=dark] {\r\n --mg: #99A3A4;;\r\n --bg: #17202A;\r\n --fg: #EAECEE;\r\n}\r\n\r\n* {margin:0}\r\n\r\n*,*::before,*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml,body {\r\n background: var(--bg);\r\n color: var(--fg);\r\n accent-color: var(--theme);\r\n font-family: system-ui, sans-serif;\r\n font-size: 16px;\r\n letter-spacing: 0.0125em;\r\n line-height: 1.5rem;\r\n}\r\n\r\ndiv, label, input, button, textarea, select {margin-bottom: .25rem;}\r\n\r\np {margin: 1rem 0}\r\n\r\nimg,embed,iframe,object,audio,video {\r\n height: auto;\r\n max-width: 100%;\r\n border: none;\r\n}\r\n\r\nol, ul {margin-left: 1rem}\r\n\r\nli {margin-left: 1rem}\r\n\r\nlabel {\r\n display: inline-block;\r\n font-weight: 600;\r\n color: var(--dark);\r\n white-space: nowrap;\r\n vertical-align: top;\r\n}\r\n\r\nlabel.addon {\r\n max-height: 2.5rem;\r\n background: var(--light);\r\n padding: .5rem 1rem;\r\n text-align: center;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nmain {\r\n margin: 0 auto;\r\n padding: var(--size);\r\n max-width: 1140px;\r\n}\r\n\r\ntable {\r\n background: var(--bg);\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n}\r\n\r\ntable>thead>tr>th {\r\n border-bottom: 2px solid var(--theme);\r\n}\r\n\r\nth {\r\n text-align: left;\r\n}\r\n\r\nth,td {\r\n padding: .5rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\ntable.striped tbody>:nth-child(2n-1) {\r\n background: #f5f5f5;\r\n}\r\n\r\ntable.condensed * {padding:0}\r\n\r\nfieldset {\r\n background: var(--bg);\r\n padding: 1rem;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nlegend {\r\n font-size: larger;\r\n font-weight: 600;\r\n color: var(--theme);\r\n background: var(--bg);\r\n display: block;\r\n width: fit-content;\r\n padding: .25rem .5rem;\r\n margin: 0;\r\n line-height: inherit;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nblockquote {\r\n margin: var(--size) 0;\r\n color: var(--black);\r\n background: var(--light);\r\n padding: var(--size);\r\n}\r\n\r\nblockquote.primary {background: #EBF5FB; color: var(--theme); border: 1px solid var(--theme)}\r\nblockquote.danger {background: #FDEDEC; color: var(--danger); border: 1px solid var(--danger)}\r\nblockquote.warn {background: #FEF9E7; color: var(--warning) ; border: 1px solid var(--warning)}\r\nblockquote.success {background: #EAFAF1; color: var(--success); border: 1px solid var(--success)}\r\nblockquote.default {background: #EEE; color: var(--dark); border: 1px solid var(--dark)}\r\n\r\nhr {\r\n color: var(--theme);\r\n border: 1px solid;\r\n}\r\n\r\nh1,h2,h3,h4,h5,h6 {\r\n color: var(--theme);\r\n margin: var(--size) 0;\r\n padding-bottom: calc(var(--size) / 2);\r\n text-transform: capitalize;\r\n}\r\n\r\nh1 {font-size: 2.2rem}\r\nh2 {font-size: 1.8rem}\r\nh3 {font-size: 1.4rem}\r\nh4 {font-size: 1.2rem}\r\nh5 {font-size: 1.1rem}\r\nh6 {font-size: 1rem}\r\n\r\na {color: var(--theme)}\r\na:hover {color: var(--dark);}\r\n\r\nsection, article {\r\n margin-bottom: 2rem;\r\n}\r\n\r\narticle {\r\n border: 1px solid rgba(0,0,0,.125);\r\n background: var(--light);\r\n padding: var(--size);\r\n}\r\n\r\n/* Forms */\r\n\r\ndetails {\r\n margin: var(--size) 0;\r\n color: var(--fg);\r\n cursor: pointer;\r\n}\r\n\r\ndetails[open] {\r\n background-color: var(--bg);\r\n margin-bottom: var(--size);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\ndetails>* {\r\n box-sizing: border-box;\r\n padding: .5rem 1rem;\r\n}\r\n\r\nsummary {\r\n color: var(--theme);\r\n height: 40px;\r\n background-color: var(--bg);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nsummary:hover {cursor: pointer;}\r\ndetails:not(summary):hover {cursor: default}\r\n\r\na.button, button, input {\r\n display: inline-block;\r\n outline: none;\r\n box-sizing: border-box;\r\n font-size: 1rem;\r\n background: var(--bg);\r\n color: var(--fg);\r\n min-width: fit-content;\r\n width: 100%;\r\n height: 2.5rem;\r\n border: 1px solid var(--theme);\r\n border-radius: var(--radius);\r\n padding: .5rem 1rem;\r\n}\r\n\r\ninput[type=color] {padding: .25rem}\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"]{\r\n padding: 0;\r\n\twidth: 1.1rem;\r\n\theight: 1.1rem;\r\n\tmargin-right: .5rem;\r\n margin-top: .25rem;\r\n}\r\n\r\nbutton, input[type=\"reset\"],input[type=\"submit\"] {\r\n display: inline-block;\r\n border-radius: var(--radius);\r\n width: initial;\r\n}\r\n\r\nbutton[disabled], button[disabled]:hover {\r\n color: var(--gray);\r\n background-color: var(--light);\r\n border: 1px solid var(--gray);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.link {\r\n border: none;\r\n background: none;\r\n color: var(--theme)\r\n}\r\n\r\nbutton.link:hover {\r\n background: none;\r\n border: none;\r\n color: var(--theme);\r\n text-decoration: underline;\r\n}\r\n\r\na.button, button {\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nbutton.default {\r\n background: var(--light);\r\n color: var(--black);\r\n}\r\n\r\nbutton.primary {\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nbutton.warning {\r\n background: var(--warning);\r\n color: var(--white);\r\n}\r\n\r\nbutton.danger {\r\n background: var(--danger);\r\n color: var(--white);\r\n}\r\n\r\nbutton.success {\r\n background: var(--success);\r\n color: var(--white);\r\n}\r\n\r\na.button:hover, button:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n background: var(--dark);\r\n border: 2px solid var(--theme);\r\n color: var(--light);\r\n cursor: pointer;\r\n}\r\n\r\nselect:disabled, textarea:disabled,input:disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n border-color: var(--mg);\r\n}\r\n\r\nselect:focus,textarea:focus,input:focus {\r\n border: 2px solid var(--theme);\r\n}\r\n\r\noption { line-height: 1rem; vertical-align: center;}\r\n\r\nselect,textarea {\r\n display: inline-block;\r\n outline: none;\r\n font-size: var(--size);\r\n height: 2.5rem;\r\n width: 100%;\r\n border: 1px solid var(--theme);\r\n color: var(--fg);\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 0 var(--size);\r\n cursor: pointer;\r\n}\r\n\r\nselect {\r\n background: var(--bg) no-repeat 100%;\r\n color: var(--fg);\r\n padding: 0 clamp(.5rem, var(--size), 2rem);\r\n appearance: none;\r\n background-size: 1ex;\r\n background-origin: content-box;\r\n background-image: url(\"data:image/svg+xml;utf8,\");\r\n}\r\n\r\ntextarea {\r\n overflow: auto;\r\n resize: vertical;\r\n border: 1px solid var(--theme);\r\n height: calc(var(--size) * 6rem);;\r\n padding: clamp(.5rem, var(--size), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n*:disabled, .disable, .disable {pointer-events: none;}\r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n padding-bottom: .25rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\nnav ul {display: flex;list-style-type: none;}\r\nnav li {padding-left: 1rem;}\r\nnav a {text-decoration: none;}\r\n\r\nnav.navbar {\r\n padding: 1rem;\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nnav.navbar a {color: var(--white)}\r\n\r\n/* Dialog */\r\n\r\ndialog[open] {\r\n margin: auto;\r\n}\r\n\r\ndialog {\r\n border: 1px solid var(--theme);\r\n box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n padding: calc(var(--size) * 2);\r\n max-width: 85%;\r\n}\r\n\r\n/* Grid System */\r\n\r\n.grid {\r\n display: grid;\r\n gap: .25rem;\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}\r\n\r\n.row {\r\n display: flex;\r\n flex: 0 1 auto;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n column-gap: .5rem;\r\n margin:0;\r\n padding: .25rem 0;\r\n}\r\n\r\n.row>*, .col, .col-1, .col-2, .col-3, .col-4,.col-5 {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: stretch;\r\n flex: 1;\r\n max-width: 100%;\r\n}\r\n\r\n.col-1 {flex: 1 !important;}\r\n.col-2 {flex: 2 !important;}\r\n.col-3 {flex: 3 !important;}\r\n.col-4 {flex: 4 !important;}\r\n.col-5 {flex: 5 !important;}\r\n\r\n/* Utilities */\r\n\r\n.group {display: flex;}\r\n.right {float:right}\r\n.left {float:left}\r\n.center {text-align: center;}\r\n.clear {content:'';display: table;clear:both}\r\n.rounded {border-radius: calc(var(--size) / 4);}\r\n.border {border: 1px solid var(--theme)}\r\n.no-border {border: none}\r\n.no-space {margin: 0; padding:0;}\r\n.no-theme {--theme: var(--fg)}\r\n"]} \ No newline at end of file +{"version":3,"sources":["src/stylelite.css"],"names":[],"mappings":";AACA,K,CACI,W,CACA,a,CACA,Y,CACA,Y,CACA,Y,CAEA,Y,CACA,Y,CACA,W,CAEA,Y,CACA,W,CAEA,iB,CAGJ,iB,CACI,Y,CACA,Y,CACA,Y,CAGJ,C,CAAG,Q,CAAH,C,CAEY,O,CAAV,Q,CACE,qB,CAGC,I,CAAL,I,CAmDA,K,CACI,oB,CApDC,I,CAAL,I,CAEI,e,CACA,yB,CACA,gC,CACA,c,CACA,sB,CACA,kB,CAGe,M,CAAnB,G,CAAY,K,CAAP,K,CAAgC,M,CAAV,Q,CAAkB,oB,CAE7C,C,CAAG,a,CAEqB,K,CAApB,K,CAAM,M,CAAV,G,CAAiB,M,CAAa,K,CAC1B,W,CACA,c,CACA,Q,CAKJ,E,CAFA,E,CAAI,E,CAAI,gB,CAIR,K,CACI,oB,CACA,e,CACA,iB,CACA,kB,CACA,kB,CAWJ,I,CARA,W,CASI,uB,CATJ,W,CACI,iB,CAEA,kB,CACA,iB,CACA,6B,CAGJ,I,CAEI,c,CAGJ,I,CACI,a,CACA,mB,CACA,gB,CAGJ,K,CAEI,wB,CACA,gB,CACA,U,CAGJ,iB,CACI,oC,CAGJ,E,CACI,e,CAGD,E,CAJH,E,CAKI,a,CACA,oC,CAGJ,oC,CACI,kB,CAGJ,iB,CAAmB,S,CAEnB,Q,CAMA,M,CALI,oB,CACA,Y,CACA,6B,CAGJ,M,CACI,gB,CACA,e,CAGA,a,CACA,iB,CACA,oB,CACA,Q,CACA,mB,CAIJ,U,CACI,mB,CACA,kB,CACA,uB,CACA,mB,CACA,kC,CACA,2B,CAGJ,E,CAEI,gB,CAGJ,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CAAG,E,CACX,kB,CACA,mB,CACA,kC,CACA,yB,CAGJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,gB,CACJ,E,CAAI,c,CAEJ,C,CAnBA,E,CAtBA,M,CAyCG,kB,CACH,O,CAAS,iB,CAEA,O,CAAT,O,CACI,kB,CAGJ,O,CACI,iC,CACA,uB,CACA,iB,CAKJ,O,CACI,mB,CACA,e,CAIJ,a,CAWA,O,CAGI,0B,CACA,6B,CAfJ,a,CAEI,yB,CAIJ,S,CACI,qB,CACA,kB,CAGJ,O,CACI,kB,CACA,W,CAnBJ,O,CAwBA,a,CAAe,c,CACf,YAAY,c,CAAgB,c,CAE5B,Q,CAAU,M,CAAQ,K,CAEd,S,CACA,qB,CACA,c,CACA,oB,CAEA,qB,CAEA,a,CACA,6B,CAEA,kB,CAZJ,Q,CAAkB,K,CACd,oB,CAOA,U,CAGA,2B,CAXc,K,CAMd,e,CASJ,iB,CAAmB,c,CAEnB,oB,CACA,iB,CACI,S,CACH,Y,CACA,a,CACA,kB,CACG,iB,CAGJ,M,CAAQ,iB,CAAoB,kB,CACxB,oB,CACA,2B,CACA,a,CAGJ,gB,CAAkB,sB,CACd,iB,CACA,6B,CACA,4B,CACA,kB,CACA,mB,CAGJ,W,CAMA,iB,CALI,Q,CACA,c,CACA,kB,CAGJ,iB,CAII,yB,CAGJ,Q,CAAU,M,CAAQ,kB,CACd,uB,CACA,kB,CAGJ,c,CACI,c,CACA,oB,CACA,e,CAGJ,c,CAAgB,Y,CAAc,uB,CAA0B,wB,CACpD,gC,CACA,c,CAG+B,c,CAAnC,e,CAAiB,iB,CACb,kB,CACA,mB,CACA,sB,CAGwB,W,CAA5B,Y,CAAa,c,CACT,6B,CAGJ,M,CAAS,gB,CAAmB,qB,CAE5B,M,CAAO,Q,CACH,oB,CACA,S,CACA,qB,CACA,a,CACA,U,CAGA,oB,CACA,2B,CACA,qB,CAiBA,6B,CAIA,e,CA/BJ,M,CAWI,c,CAIA,mC,CAEA,uC,CACA,e,CACA,mB,CACA,6B,CACA,qK,CArBG,Q,CAyBH,a,CACA,e,CAEA,6B,CACA,qC,CACA,W,CAIkB,Q,CAAtB,S,CAAgC,mB,CAIhC,G,CAEI,6B,CACA,qB,CACA,oC,CAGJ,M,CAAsB,oB,CACtB,M,CAAQ,iB,CACR,K,CAAO,oB,CAEP,U,CACI,Y,CACA,uB,CAFJ,U,CAMA,Y,CAAc,kB,CAId,Y,CACI,W,CAGJ,M,CACI,6B,CACA,8D,CACA,2B,CACA,a,CAKJ,K,CACI,Y,CACA,U,CACA,oD,CAGJ,M,CAxCA,G,CAOA,M,CAiCQ,Y,CACR,M,CAAQ,W,CACR,K,CAAO,U,CACP,O,CAAS,iB,CACT,M,CAAQ,U,CAAW,a,CAAe,U","file":"src/stylelite.css","sourcesContent":["/*! Stylelite v:0.8.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */\r\n:root {\r\n --size: 1rem;\r\n --radius: 0rem;\r\n --fg: #17202A;\r\n --bg: #FDFEFE;\r\n --mg: #99A3A4;\r\n\r\n --white: #FFF;\r\n --black: #000;\r\n --gray: #777;\r\n\r\n --light: #EEE;\r\n --dark: #222;\r\n\r\n --theme: steelblue;\r\n}\r\n\r\n[data-theme=dark] {\r\n --mg: #99A3A4;;\r\n --bg: #17202A;\r\n --fg: #EAECEE;\r\n}\r\n\r\n* {margin:0}\r\n\r\n*,*::before,*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nhtml,body {\r\n background: var(--bg);\r\n color: var(--fg);\r\n accent-color: var(--theme);\r\n font-family: system-ui, sans-serif;\r\n font-size: 16px;\r\n letter-spacing: 0.0125em;\r\n line-height: 1.5rem;\r\n}\r\n\r\ndiv, label, input, button, textarea, select {margin-bottom: .25rem;}\r\n\r\np {margin: 1rem 0}\r\n\r\nimg,embed,iframe,object,audio,video {\r\n height: auto;\r\n max-width: 100%;\r\n border: none;\r\n}\r\n\r\nol, ul {margin-left: 1rem}\r\n\r\nli {margin-left: 1rem}\r\n\r\nlabel {\r\n display: inline-block;\r\n font-weight: 600;\r\n color: var(--dark);\r\n white-space: nowrap;\r\n vertical-align: top;\r\n}\r\n\r\nlabel.addon {\r\n max-height: 2.5rem;\r\n background: var(--light);\r\n padding: .5rem 1rem;\r\n text-align: center;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\ncode {\r\n background: var(--light);\r\n padding: .25rem\r\n}\r\n\r\nmain {\r\n margin: 0 auto;\r\n padding: var(--size);\r\n max-width: 1140px;\r\n}\r\n\r\ntable {\r\n background: var(--bg);\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n}\r\n\r\ntable>thead>tr>th {\r\n border-bottom: 2px solid var(--theme);\r\n}\r\n\r\nth {\r\n text-align: left;\r\n}\r\n\r\nth,td {\r\n padding: .5rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\ntable.striped tbody>:nth-child(2n-1) {\r\n background: #f5f5f5;\r\n}\r\n\r\ntable.condensed * {padding:0}\r\n\r\nfieldset {\r\n background: var(--bg);\r\n padding: 1rem;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nlegend {\r\n font-size: larger;\r\n font-weight: 600;\r\n color: var(--theme);\r\n background: var(--bg);\r\n display: block;\r\n width: fit-content;\r\n padding: .25rem .5rem;\r\n margin: 0;\r\n line-height: inherit;\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nblockquote {\r\n margin: var(--size) 0;\r\n color: var(--black);\r\n background: var(--light);\r\n padding: var(--size);\r\n border-left: 8px solid var(--theme);\r\n border-radius: var(--radius);\r\n}\r\n\r\nhr {\r\n color: var(--theme);\r\n border: 1px solid;\r\n}\r\n\r\nh1,h2,h3,h4,h5,h6 {\r\n color: var(--theme);\r\n margin: var(--size) 0;\r\n padding-bottom: calc(var(--size) / 2);\r\n text-transform: capitalize;\r\n}\r\n\r\nh1 {font-size: 2.2rem}\r\nh2 {font-size: 1.8rem}\r\nh3 {font-size: 1.4rem}\r\nh4 {font-size: 1.2rem}\r\nh5 {font-size: 1.1rem}\r\nh6 {font-size: 1rem}\r\n\r\na {color: var(--theme)}\r\na:hover {color: var(--dark);}\r\n\r\nsection, article {\r\n margin-bottom: 2rem;\r\n}\r\n\r\narticle {\r\n border: 1px solid rgba(0,0,0,.125);\r\n background: var(--light);\r\n color: var(--dark);\r\n}\r\n\r\n/* Forms */\r\n\r\ndetails {\r\n margin: var(--size) 0;\r\n color: var(--fg);\r\n cursor: pointer;\r\n}\r\n\r\ndetails[open] {\r\n background-color: var(--bg);\r\n margin-bottom: var(--size);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\ndetails>* {\r\n box-sizing: border-box;\r\n padding: .5rem 1rem;\r\n}\r\n\r\nsummary {\r\n color: var(--theme);\r\n height: 40px;\r\n background-color: var(--bg);\r\n border: 1px solid var(--theme);\r\n}\r\n\r\nsummary:hover {cursor: pointer;}\r\ndetails:not(summary):hover {cursor: default}\r\n\r\na.button, button, input {\r\n display: inline-block;\r\n outline: none;\r\n box-sizing: border-box;\r\n font-size: 1rem;\r\n background: var(--bg);\r\n color: var(--fg);\r\n min-width: fit-content;\r\n width: 100%;\r\n height: 2.5rem;\r\n border: 1px solid var(--theme);\r\n border-radius: var(--radius);\r\n padding: .5rem 1rem;\r\n}\r\n\r\ninput[type=color] {padding: .25rem}\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"]{\r\n padding: 0;\r\n\twidth: 1.1rem;\r\n\theight: 1.1rem;\r\n\tmargin-right: .5rem;\r\n margin-top: .25rem;\r\n}\r\n\r\nbutton, input[type=\"reset\"],input[type=\"submit\"] {\r\n display: inline-block;\r\n border-radius: var(--radius);\r\n width: initial;\r\n}\r\n\r\nbutton[disabled], button[disabled]:hover {\r\n color: var(--gray);\r\n background-color: var(--light);\r\n border: 1px solid var(--gray);\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n}\r\n\r\nbutton.link {\r\n border: none;\r\n background: none;\r\n color: var(--theme)\r\n}\r\n\r\nbutton.link:hover {\r\n background: none;\r\n border: none;\r\n color: var(--theme);\r\n text-decoration: underline;\r\n}\r\n\r\na.button, button, input[type=\"submit\"] {\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nbutton.outline {\r\n background: none;\r\n outline: var(--theme);\r\n color: var(--fg);\r\n}\r\n\r\na.button:hover, button:hover, input[type=\"reset\"]:hover,input[type=\"submit\"]:hover {\r\n filter:brightness(90%) !important;\r\n cursor: pointer;\r\n}\r\n\r\nselect:disabled, textarea:disabled,input:disabled {\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n border-color: var(--mg);\r\n}\r\n\r\nselect:focus,textarea:focus,input:focus {\r\n border: 2px solid var(--theme);\r\n}\r\n\r\noption { line-height: 1rem; vertical-align: center;}\r\n\r\nselect,textarea {\r\n display: inline-block;\r\n outline: none;\r\n font-size: var(--size);\r\n height: 2.5rem;\r\n width: 100%;\r\n border: 1px solid var(--theme);\r\n color: var(--fg);\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 0 var(--size);\r\n cursor: pointer;\r\n}\r\n\r\nselect {\r\n background: var(--bg) no-repeat 100%;\r\n color: var(--fg);\r\n padding: 0 clamp(.5rem, var(--size), 2rem);\r\n appearance: none;\r\n background-size: 1ex;\r\n background-origin: content-box;\r\n background-image: url(\"data:image/svg+xml;utf8,\");\r\n}\r\n\r\ntextarea {\r\n overflow: auto;\r\n resize: vertical;\r\n border: 1px solid var(--theme);\r\n height: calc(var(--size) * 6rem);;\r\n padding: clamp(.5rem, var(--size), 2rem);\r\n cursor: text;\r\n color: var(--fg);\r\n}\r\n\r\n*:disabled, .disable, .disable {pointer-events: none;}\r\n\r\n/* Navigation */\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n padding-bottom: .25rem;\r\n border-bottom: 1px solid var(--theme);\r\n}\r\n\r\nnav ul {display: flex;list-style-type: none;}\r\nnav li {padding-left: 1rem;}\r\nnav a {text-decoration: none;}\r\n\r\nnav.navbar {\r\n padding: 1rem;\r\n background: var(--theme);\r\n color: var(--white);\r\n}\r\n\r\nnav.navbar a {color: var(--white)}\r\n\r\n/* Dialog */\r\n\r\ndialog[open] {\r\n margin: auto;\r\n}\r\n\r\ndialog {\r\n border: 1px solid var(--theme);\r\n box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);\r\n padding: calc(var(--size) * 2);\r\n max-width: 85%;\r\n}\r\n\r\n/* Layout Utilities */\r\n\r\n.grid {\r\n display: grid;\r\n gap: .25rem;\r\n grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));\r\n}\r\n\r\n.group {display: flex;}\r\n.right {float:right}\r\n.left {float:left}\r\n.center {text-align: center;}\r\n.clear {content:'';display: table;clear:both}\r\n"]} \ No newline at end of file diff --git a/dist/stylelite.min.css b/dist/stylelite.min.css index a6837f2..17da3b5 100644 --- a/dist/stylelite.min.css +++ b/dist/stylelite.min.css @@ -1,3 +1,3 @@ -/*! Stylelite v:0.7.1 | MIT LICENSE | https://github.com/n2geoff/stylelite */ -:root{--size:1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#99A3A4;--white:#FFF;--black:#000;--gray:#777;--light:#EEE;--dark:#222;--theme:steelblue;--warning:#B7950B;--danger:#C0392B;--success:#1E8449}[data-theme=dark]{--mg:#99A3A4;--bg:#17202A;--fg:#EAECEE}*{margin:0}*,::after,::before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);accent-color:var(--theme);font-family:system-ui,sans-serif;font-size:16px;letter-spacing:.0125em;line-height:1.5rem}button,div,input,label,select,textarea{margin-bottom:.25rem}p{margin:1rem 0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}li,ol,ul{margin-left:1rem}label{display:inline-block;font-weight:600;color:var(--dark);white-space:nowrap;vertical-align:top}label.addon{max-height:2.5rem;background:var(--light);padding:.5rem 1rem;text-align:center;border:1px solid var(--theme)}main{margin:0 auto;padding:var(--size);max-width:1140px}table{border-collapse:collapse;border-spacing:0;width:100%}table>thead>tr>th{border-bottom:2px solid var(--theme)}th{text-align:left}td,th{padding:.5rem;border-bottom:1px solid var(--theme)}table.striped tbody>:nth-child(2n-1){background:#f5f5f5}table.condensed *{padding:0}fieldset{padding:1rem;border:1px solid var(--theme)}blockquote.primary,legend{color:var(--theme);border:1px solid var(--theme)}fieldset,legend{background:var(--bg)}legend{font-size:larger;font-weight:600;display:block;width:fit-content;padding:.25rem .5rem;margin:0;line-height:inherit}blockquote{margin:var(--size)0;color:var(--black);background:var(--light);padding:var(--size)}blockquote.primary{background:#ebf5fb}blockquote.danger{background:#fdedec;color:var(--danger);border:1px solid var(--danger)}blockquote.warn{background:#fef9e7;color:var(--warning);border:1px solid var(--warning)}blockquote.success{background:#eafaf1;color:var(--success);border:1px solid var(--success)}blockquote.default{background:#eee;color:var(--dark);border:1px solid var(--dark)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{color:var(--theme);margin:var(--size)0;padding-bottom:calc(var(--size)/2);text-transform:capitalize}h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.4rem}h4{font-size:1.2rem}h5{font-size:1.1rem}h6{font-size:1rem}a,hr{color:var(--theme)}a:hover{color:var(--dark)}article,section{margin-bottom:2rem}article{border:1px solid rgba(0,0,0,.125);background:var(--light);padding:var(--size)}details{margin:var(--size)0;color:var(--fg)}details[open],summary{background-color:var(--bg);border:1px solid var(--theme)}details[open]{margin-bottom:var(--size)}details>*{box-sizing:border-box;padding:.5rem 1rem}summary{color:var(--theme);height:40px}details,summary:hover{cursor:pointer}details:not(summary):hover{cursor:default}a.button,button,input{outline:0;box-sizing:border-box;font-size:1rem;background:var(--bg);min-width:fit-content;height:2.5rem;border:1px solid var(--theme);padding:.5rem 1rem}a.button,input{display:inline-block;width:100%;border-radius:var(--radius)}input{color:var(--fg)}input[type=color]{padding:.25rem}input[type=checkbox],input[type=radio]{padding:0;width:1.1rem;height:1.1rem;margin-right:.5rem;margin-top:.25rem}button,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius);width:initial}button[disabled],button[disabled]:hover{color:var(--gray);background-color:var(--light);border:1px solid var(--gray);cursor:not-allowed;pointer-events:none}button.link,button.link:hover{border:0;background:0 0;color:var(--theme)}button.link:hover{text-decoration:underline}button.default{background:var(--light);color:var(--black)}a.button,button,button.primary{background:var(--theme);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)}a.button:hover,button:hover,input[type=reset]:hover,input[type=submit]:hover{background:var(--dark);border:2px solid var(--theme);color:var(--light);cursor:pointer}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;pointer-events:none;border-color:var(--mg)}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}option{line-height:1rem;vertical-align:center}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:2.5rem;width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--size);border:1px solid var(--theme);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--size),2rem);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}textarea{overflow:auto;resize:vertical;height:calc(var(--size)*6rem);padding:clamp(.5rem,var(--size),2rem);cursor:text}.disable,:disabled{pointer-events:none}nav{justify-content:space-between;padding-bottom:.25rem;border-bottom:1px solid var(--theme)}nav ul{list-style-type:none}nav li{padding-left:1rem}nav a{text-decoration:none}nav.navbar{padding:1rem;background:var(--theme)}nav.navbar,nav.navbar a{color:var(--white)}dialog[open]{margin:auto}dialog{border:1px solid var(--theme);box-shadow:0 0#0000,0 0#0000,0 25px 50px -12px rgba(0,0,0,.25);padding:calc(var(--size)*2);max-width:85%}.grid{display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.row,nav,nav ul{display:flex}.row{flex:0 1 auto;flex-direction:row;flex-wrap:wrap;column-gap:.5rem;margin:0;padding:.25rem 0}.col,.row>*{flex:1}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.row>*{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;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}.group{display:flex}.right{float:right}.left{float:left}.center{text-align:center}.clear{content:"";display:table;clear:both}.rounded{border-radius:calc(var(--size)/4)}.border{border:1px solid var(--theme)}.no-border{border:0}.no-space{margin:0;padding:0}.no-theme{--theme:var(--fg)} +/*! Stylelite v:0.8.0 | MIT LICENSE | https://github.com/n2geoff/stylelite */ +:root{--size:1rem;--radius:0rem;--fg:#17202A;--bg:#FDFEFE;--mg:#99A3A4;--white:#FFF;--black:#000;--gray:#777;--light:#EEE;--dark:#222;--theme:steelblue}[data-theme=dark]{--mg:#99A3A4;--bg:#17202A;--fg:#EAECEE}*{margin:0}*,::after,::before{box-sizing:border-box}body,html,table{background:var(--bg)}body,html{color:var(--fg);accent-color:var(--theme);font-family:system-ui,sans-serif;font-size:16px;letter-spacing:.0125em;line-height:1.5rem}button,div,input,label,select,textarea{margin-bottom:.25rem}p{margin:1rem 0}audio,embed,iframe,img,object,video{height:auto;max-width:100%;border:0}li,ol,ul{margin-left:1rem}label{display:inline-block;font-weight:600;color:var(--dark);white-space:nowrap;vertical-align:top}code,label.addon{background:var(--light)}label.addon{max-height:2.5rem;padding:.5rem 1rem;text-align:center;border:1px solid var(--theme)}code{padding:.25rem}main{margin:0 auto;padding:var(--size);max-width:1140px}table{border-collapse:collapse;border-spacing:0;width:100%}table>thead>tr>th{border-bottom:2px solid var(--theme)}th{text-align:left}td,th{padding:.5rem;border-bottom:1px solid var(--theme)}table.striped tbody>:nth-child(2n-1){background:#f5f5f5}table.condensed *{padding:0}fieldset,legend{background:var(--bg);padding:1rem;border:1px solid var(--theme)}legend{font-size:larger;font-weight:600;display:block;width:fit-content;padding:.25rem .5rem;margin:0;line-height:inherit}blockquote{margin:var(--size)0;color:var(--black);background:var(--light);padding:var(--size);border-left:8px solid var(--theme);border-radius:var(--radius)}hr{border:1px solid}h1,h2,h3,h4,h5,h6{color:var(--theme);margin:var(--size)0;padding-bottom:calc(var(--size)/2);text-transform:capitalize}h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.4rem}h4{font-size:1.2rem}h5{font-size:1.1rem}h6{font-size:1rem}a,hr,legend{color:var(--theme)}a:hover{color:var(--dark)}article,section{margin-bottom:2rem}article{border:1px solid rgba(0,0,0,.125);background:var(--light);color:var(--dark)}details{margin:var(--size)0;color:var(--fg)}details[open],summary{background-color:var(--bg);border:1px solid var(--theme)}details[open]{margin-bottom:var(--size)}details>*{box-sizing:border-box;padding:.5rem 1rem}summary{color:var(--theme);height:40px}details,summary:hover{cursor:pointer}details:not(summary):hover{cursor:default}a.button,button,input{outline:0;box-sizing:border-box;font-size:1rem;background:var(--bg);min-width:fit-content;height:2.5rem;border:1px solid var(--theme);padding:.5rem 1rem}a.button,input{display:inline-block;width:100%;border-radius:var(--radius)}input{color:var(--fg)}input[type=color]{padding:.25rem}input[type=checkbox],input[type=radio]{padding:0;width:1.1rem;height:1.1rem;margin-right:.5rem;margin-top:.25rem}button,input[type=reset],input[type=submit]{display:inline-block;border-radius:var(--radius);width:initial}button[disabled],button[disabled]:hover{color:var(--gray);background-color:var(--light);border:1px solid var(--gray);cursor:not-allowed;pointer-events:none}button.link,button.link:hover{border:0;background:0 0;color:var(--theme)}button.link:hover{text-decoration:underline}a.button,button,input[type=submit]{background:var(--theme);color:var(--white)}button.outline{background:0 0;outline:var(--theme);color:var(--fg)}a.button:hover,button:hover,input[type=reset]:hover,input[type=submit]:hover{filter:brightness(90%)!important;cursor:pointer}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;pointer-events:none;border-color:var(--mg)}input:focus,select:focus,textarea:focus{border:2px solid var(--theme)}option{line-height:1rem;vertical-align:center}select,textarea{display:inline-block;outline:0;font-size:var(--size);height:2.5rem;width:100%;background:var(--bg);border-radius:var(--radius);padding:0 var(--size);border:1px solid var(--theme);color:var(--fg)}select{cursor:pointer;background:var(--bg) no-repeat 100%;padding:0 clamp(.5rem,var(--size),2rem);appearance:none;background-size:1ex;background-origin:content-box;background-image:url("data:image/svg+xml;utf8,")}textarea{overflow:auto;resize:vertical;height:calc(var(--size)*6rem);padding:clamp(.5rem,var(--size),2rem);cursor:text}.disable,:disabled{pointer-events:none}nav{justify-content:space-between;padding-bottom:.25rem;border-bottom:1px solid var(--theme)}nav ul{list-style-type:none}nav li{padding-left:1rem}nav a{text-decoration:none}nav.navbar{padding:1rem;background:var(--theme)}nav.navbar,nav.navbar a{color:var(--white)}dialog[open]{margin:auto}dialog{border:1px solid var(--theme);box-shadow:0 0#0000,0 0#0000,0 25px 50px -12px rgba(0,0,0,.25);padding:calc(var(--size)*2);max-width:85%}.grid{display:grid;gap:.25rem;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.group,nav,nav ul{display:flex}.right{float:right}.left{float:left}.center{text-align:center}.clear{content:"";display:table;clear:both} /*# sourceMappingURL=stylelite.map */ \ No newline at end of file diff --git a/examples/overview.html b/examples/overview.html index 657a15e..fb3877f 100644 --- a/examples/overview.html +++ b/examples/overview.html @@ -5,15 +5,17 @@ Stylelite - + - +
@@ -41,14 +43,20 @@
-

Overview

+

Overview

- DIV is not the only tag available 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. +

+ DIV is not the only tag available to your designs. + Mimic traditional .container class by just using a MAIN tag, + which by default centers your content to an 1140 width. +

+

+ Need to divide major sections of your code, eh...use SECTION tag. + Need little extra content flair, wrap in an ARTICLE tag. +

+

+ Use AS-IS or Customize +

@@ -199,13 +207,6 @@ - -
- - - - -
@@ -240,7 +241,12 @@
-

Components

+

Components

+ +

+ These are native UI components that typically do not have any + style +

@@ -248,11 +254,16 @@ Dialogs
- The native dialog - element is supported + A native modal UI element exists as dialog + and is supported with a little javascript. +

+ SEE: + MDN Documentation + +

- +
@@ -274,120 +285,95 @@
-
- -

Layout Systems

-
- The flex-based grid system dynamically 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

+

Misc Utility Classes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
.griddynamic grid layout helper
.grouptreats content as flex
.leftfloat content left
.rightfloat content right
.centertext aligns content center
.no-spaceremoves padding & margin
.no-borderremoves borders
.no-theme - removes theme flair + a display:grid layout helper, that acts a lot like + .row but without the column control
.clear clear float fix.group + really just display:flex however used on + input groups provides form element designs +
+ +
+ +
+

Customize

+
+

+ /extras provides some useful styles that complement + Stylelite and have been removed to keep it focused + closer to a classless css solution -- and smaller. +

+
+ NOTE: Some extras exist in Stylelite, + but are also useful in isolation +
+
+ +
+

CSS Variables

+ + + + + + + + + + + + + + + + + + + + + + + +
VariableDescriptionDefault
--theme (color)Designing a site around a theme color, set heresteelblue
--radiusPrefer rounded-corners, try .4rem0rem
There are 11 variables, 8 are neutral color variations
+
+ +
+

Dark Mode

+ Add data-theme="dark" to your html tag +
+ +
+

Colors

+

+ Customize with your own styles or some examples available extras like +

+ +
+ Bootstrap-inspired color classes found + in extras/colors.css +
+ +
+ + + + +
+
+