commit 16973b7c855f33fbf615c9b4b37587b1281a06d8 Author: Geoff Doty Date: Wed Oct 13 17:29:04 2021 -0500 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..3879e39 --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ +# Scales CSS + +> A Minimalist Dream of CSS + +Scales CSS provides a minimalist approach to styling, placing layout in the fore-front, removing excess distractions, allowing developers to prototype designs rapidly -- add flair later. + +Use at of the box or set a single custom `theme` color and watch the styles change dynamically. + +Extend with minimal styles to create your final theme/design. + +All-in, this package is **only TBD!** + + + +## Check it Out + +- TBD + + + +### Features + +- Tiny +- Classless, include and go +- Single `.grid` class utility helper for auto-adjusting layout solution +- Customizable: theme, font, border-radius, line-height, element spacing +- Extendable, its classless -- add your own classes! +- Pure CSS3 + +> WARNING: only supports CSS3 ever-green browsers, no IE here ;) + + + +## Getting Started + +Latest minified build is available in the `dist`/ folder. or you can + +- TBD + +To see what it looks like, see + +- TBD + + + +## Develop + +clone repository and... TBD + + + +## TODOs + +- Get Download to work with custom dist download + +- clamp themes, saturation and lightness above 70, or below 30 just wont work + +- add theme to parts, checkbox, radio button, range sliders ect... + +- styles for `details` & `summary` + +- add accent color (auto or manual) + +- Tweak `code`, `pre`, `kbd` + +- input highlight on focus + +- muted color -- might be ok + +- documentation around `main` , `article`, `section` tags + diff --git a/example/example.html b/example/example.html new file mode 100644 index 0000000..c5a7414 --- /dev/null +++ b/example/example.html @@ -0,0 +1,214 @@ + + + + + + + Scales CSS + + + + +
+
+
+
+
 
+
 
+
 
+
 
+
 
+
+
+
+ SCALES +
+
CSS
+
+
+ A Minimalist Dream of CSS +
+
+
+
+

Customize CSS

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

Element examples

+

+ This is supposed to be a demo page so we need more elements! +

+ +

Form elements

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

Code

+

+ Below is some code, you can copy it with Ctrl-C. + Did you know, alert(1) can show an alert in JavaScript! +

+ 
// This logs a message to the console
console.log('Hello, world!')
+ +

Other

+

Here's a horizontal rule and image because I don't know where else to put them.

+ Example image +
+ +

And here's a nicely marked up table!

+ + + + + + + + + + + + + + + + + + + + + + + + + +
NameQuantityPrice
Godzilla2$299.99
Mozilla10$100,000.00
Quesadilla1$2.22
+ +

Typography

+
+ This is a blockquote. Maecenas blandit, quam vel sodales facilisis, urna erat fringilla sem, sed + egestas quam erat a ipsum. Morbi fermentum odio felis, ultricies faucibus purus mattis tristique. +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis + ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare + accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius natoque penatibus + et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu + mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non + fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, + per inceptos himenaeos. + This is strong, this is normal, this is just bold, and this is + emphasized! And heck, here's a link. +

+
    +
  • Unordered list item 1
    • +
  • Unordered list item 2
    • +
  • Unordered list item 3
    • +
+
    +
  1. Ordered list item 1
    2. +
  2. Ordered list item 2
    3. +
  3. Ordered list item 3
    4. +
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+
+
+ + + + diff --git a/example/js/example.js b/example/js/example.js new file mode 100644 index 0000000..0ed0087 --- /dev/null +++ b/example/js/example.js @@ -0,0 +1,109 @@ +/////////////////////////////////////////////// +// Tweak Example Settings +/////////////////////////////////////////////// + +const $ = document.querySelector.bind(document); + +function HEXToRGB(hex) { + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? { + r: parseInt(result[1], 16), + g: parseInt(result[2], 16), + b: parseInt(result[3], 16) + } : null; +} + +function RGBToHSL(r,g,b) { + // Make r, g, and b fractions of 1 + r /= 255; + g /= 255; + b /= 255; + + // Find greatest and smallest channel values + let cmin = Math.min(r,g,b), + cmax = Math.max(r,g,b), + delta = cmax - cmin, + h = 0, + s = 0, + l = 0; + + // Calculate hue + // No difference + if (delta == 0) + h = 0; + // Red is max + else if (cmax == r) + h = ((g - b) / delta) % 6; + // Green is max + else if (cmax == g) + h = (b - r) / delta + 2; + // Blue is max + else + h = (r - g) / delta + 4; + + h = Math.round(h * 60); + + // Make negative hues positive behind 360° + if (h < 0) + h += 360; + + // Calculate lightness + l = (cmax + cmin) / 2; + + // Calculate saturation + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + + // Multiply l and s by 100 + s = +(s * 100).toFixed(0); + l = +(l * 100).toFixed(0); + + return { + h,s,l + }; +} + +function update() { + const form = $('#settings'); + + const rgb = HEXToRGB(form.elements['theme'].value); + const hsl = RGBToHSL(rgb.r, rgb.g, rgb.b); + + const style = document.createElement('style'); + style.innerHTML = ` + :root { + --theme-h: ${hsl.h}; + --theme-s: ${hsl.s}%; + --theme-l: ${hsl.l}%; + --font-family: ${form.elements['font'].value}; + --font-size: ${form.elements['size'].value}px; + --spacing: ${form.elements['spacing'].value}rem; + --line-height: ${form.elements['line'].value}; + --border-radius: ${form.elements['radius'].value}rem; + } + `; + + $('head').appendChild(style); +} + +$('input[type="submit"]').addEventListener('click', (e) => { + e.preventDefault(); + + alert('Nothing Here Yet!'); +}); + +$('#mode').addEventListener('click', () => { + const attr = $('html').getAttribute('data-theme'); + + if(attr && attr === 'dark') { + $('html').setAttribute('data-theme', 'light'); + } else { + $('html').setAttribute('data-theme', 'dark'); + } +}); + +$('#radius').addEventListener('click', update); +$('#font').addEventListener('click', update); +$('#size').addEventListener('click', update); +$('#spacing').addEventListener('click', update); +$('#line').addEventListener('click', update); +$('#theme').addEventListener('change', update); diff --git a/src/scales.css b/src/scales.css new file mode 100644 index 0000000..183a2fd --- /dev/null +++ b/src/scales.css @@ -0,0 +1,220 @@ +:root { + --theme-h: 207; + --theme-s: 50%; + --theme-l: 50%; + + --theme: hsl(var(--theme-h), var(--theme-s), var(--theme-l)); + --muted: hsl(var(--theme-h), 15%, 15%); + + --font-family: sans-serif, "Roboto"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 20px; + --border-color: var(--theme); + --border-radius: 0rem; + --border-width: 1px; + --spacing: 1rem; +} + +[data-theme="light"], +:root:not([data-theme="dark"]) { + --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); + --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); + + --background: hsl(var(--theme-h), 0%, 95%); + --foreground: hsl(var(--theme-h), 0%, 5%); + + --muted: hsl(var(--theme-h), 15%, 75%); +} + +[data-theme="dark"] { + --theme-light: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) - 35%)); + --theme-dark: hsl(var(--theme-h), var(--theme-s), calc(var(--theme-l) + 35%)); + + --background: hsl(var(--theme-h), 50%, 5%); + --foreground: hsl(var(--theme-h), 20%, 90%); +} + +*, *:before, *:after { box-sizing: border-box; } + +html,body { + background: var(--background); + color: var(--foreground); + margin: 0; + padding: 0; + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); + line-height: var(--line-height); + box-sizing: border-box; + padding: 0; +} + +img,embed,iframe,object,audio,video { + height: auto; + max-width: 100%; + border: none; +} + +main { + margin: calc((100vh / 25) * 1.5) calc((100vw / 25) * 1.5); + padding: var(--spacing); + height:100vh; +} + +table { + background-color: var(--background); + border-collapse: collapse; + border-spacing: 0; + width: 100%; +} + +tbody { + border-top: 2px solid var(--theme); + border-top: 2px solid var(--theme); +} + +th {text-align: left;color: var(--theme-dark)} + +th, td { + padding: calc(var(--spacing) / 2); + border-bottom: 1px solid var(--theme) +} + +a {color: var(--theme)} +a:hover {color: var(--foreground)} + +blockquote { + margin: var(--spacing) 0; + border-left: calc(var(--spacing) / 2) solid var(--theme-dark); + background: hsl(var(--theme-h) var(--theme-s) var(--theme-l)); + color: var(--background); + padding: var(--spacing); +} + +pre, code, kbd { + font-family: monospace; + display: inline-block; + white-space: pre; + margin: 0; + padding: 0; +} + +code { + margin: 0 calc(var(--spacing) / 4); + padding: 0 calc(var(--spacing) / 4); + background: var(--background); +} + +hr { + color: var(--theme); + border: 1px solid; +} + +h1,h2,h3,h4,h5,h6 {text-transform: capitalize;} +h1 {font-size: calc(var(--font-size) * 2); color: var(--theme-dark)} +h2 {color: var(--theme)} +h3 {border-bottom: 1px solid var(--theme);} + +small {color: var(--muted)} + +section { + margin-bottom: var(--spacing); +} + +article { + padding: var(--spacing); + background-color: var(--theme-light); +} + +label { + font-size: var(--font-size); + font-weight: 600; + text-transform: capitalize; + color: var(--foreground); + margin: 0 calc(var(--spacing) / 2); +} + +input { + display: block; + outline: none; + box-sizing: border-box; + font-size: var(--font-size); + background-color: var(--background); + color: var(--foreground); + width: 100%; + height: calc(var(--font-size) * 3); + border: 1px solid var(--theme); + border-radius: var(--border-radius); + padding: var(--spacing); + margin-bottom: var(--spacing); + margin-right: var(--spacing); +} + +input:disabled { + background: var(--muted); + color: var(--background); + cursor:not-allowed; +} + +input[type="checkbox"], +input[type="radio"] { + display: inline-block; + padding: 0; + margin: 0; + width: var(--spacing); + height: var(--spacing); +} + +input[type="submit"] { + font-size: var(--font-size); + height: calc(var(--font-size) * 3); + padding: var(--spacing) calc(var(--spacing) / 2); + margin: var(--spacing) 0; + cursor: pointer; +} + +input[type="submit"] { + background-color: var(--theme); + color: var(--background); +} + +button, select, textarea { + display: inline-block; + outline: none; + font-family: var(--font-family); + font-size: var(--font-size); + height: calc(var(--font-size) * 3); + width: 100%; + border: 1px solid var(--theme); + color: var(--theme); + background-color: var(--background); + border-radius: var(--border-radius); + padding: var(--spacing); + margin-bottom: var(--spacing); + cursor: pointer; +} + +select { + background: var(--background) no-repeat 100%; + color: var(--foreground); + 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(--theme); + height: calc(var(--line-height) * 6rem); + cursor: text; + color: var(--foreground); +} + +.grid { + display: grid; + gap: var(--spacing); + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); +} \ No newline at end of file