geoff
/
grayscale
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

This commit is contained in:
Geoff Doty 2021-10-13 17:29:04 -05:00
commit 16973b7c85
4 changed files with 614 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
README.md Normal file
View File

@ -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

214
example/example.html Normal file
View File

@ -0,0 +1,214 @@
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scales CSS</title>
<link rel="stylesheet" href="../src/scales.css" />
<style>
.box {
height: 1.5em;
min-width: 1.5em;
line-height: 1.5em;
margin: 1px;
display: inline-block;
font-weight: bold;
letter-spacing: .2em;
color: #FAFAFA;
}
</style>
</head>
<body>
<main>
<section>
<section class="grid">
<div>
<div class="box" style="background: var(--foreground);">&nbsp;</div>
<div class="box" style="background: var(--theme-dark);">&nbsp;</div>
<div class="box" style="background: var(--theme);">&nbsp;</div>
<div class="box" style="background: var(--theme-light);">&nbsp;</div>
<div class="box" style="background: var(--muted);">&nbsp;</div>
</div>
<div style="text-align: center;">
<div class="box" style="background: var(--background); color: var(--theme)">
SCALES
</div>
<div class="box" style="background:var(--muted); padding: 0 .5em 0 .5em;">CSS</div>
</div>
<div style="text-align: right;">
<em>A Minimalist Dream of CSS</em>
</div>
</section>
<article>
<section>
<h2>Customize CSS</h2>
<form id="settings" name="settings" style="background: var(--background); padding: var(--spacing);">
<div>
<label for="theme">Theme Color <small>(default: steelblue)</small></label>
<span style="float: right">
<input type="checkbox" name="mode" id="mode" checked>
<label for="mode">
Dark Mode
</label>
</span>
<input type="color" id="theme" name="theme" value="#4086bf">
</div>
<div class="grid">
<div>
<label for="font">Font Family</label>
<input type="text" id="font" name="font" value="sans-sarif, Roboto">
</div>
</div>
<div class="grid">
<div>
<label for="size">Font Size</label>
<input type="number" id="size" name="size" value="20" min="8" max="40">
</div>
<div>
<label for="line">Line Height</label>
<input type="range" id="line" name="line" value="1.5" min="0" max="4" step="0.5">
</div>
</div>
<div class="grid">
<div>
<label for="radius">Border Radius</label>
<input type="range" name="radius" id="radius" min="0" max="1" step="0.05" value="0" list="tickmarks">
</div>
<div>
<label for="spacing">Element Spacing</label>
<input type="range" id="spacing" name="spacing" min="0" max="4" step="0.05" value="1.5" list="tickmarks">
</div>
</div>
<div>
<div>
<input type="submit" value="Download">
</div>
</div>
</form>
</section>
<h2>Element examples</h2>
<p>
This is supposed to be a demo page so we need more elements!
</p>
<h3>Form elements</h3>
<form>
<div>
<label for='email'>Email</label>
<input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
</div>
<div>
<label for='id'>User id (read only)</label>
<input readonly name='id' id='id' value='04D6H89Z'>
</div>
<div>
<label for='disabled'>Random disabled input</label>
<input disabled name='disabled' id='disabled' placeholder='Because why not?'>
</div>
<div>
<label for='selected'>Select Item</label>
<select name="selected" id="">
<option value="">Choose One</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div>
<label for='about'>About me</label>
<textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
</div>
<div>
<input type='checkbox' name='remember' id='remember' checked>
<label for='remember'>Remember me</label>
</div>
<button>Cancel</button>
<input type='submit'>
</form>
<h3>Code</h3>
<p>
Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
Did you know, <code>alert(1)</code> can show an alert in JavaScript!
</p>
<pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
<h3>Other</h3>
<p>Here's a horizontal rule and image because I don't know where else to put them.</p>
<img src='http://via.placeholder.com/408x287' alt='Example image'>
<hr>
<p>And here's a nicely marked up table!</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Godzilla</td>
<td>2</td>
<td>$299.99</td>
</tr>
<tr>
<td>Mozilla</td>
<td>10</td>
<td>$100,000.00</td>
</tr>
<tr>
<td>Quesadilla</td>
<td>1</td>
<td>$2.22</td>
</tr>
</tbody>
</table>
<h3>Typography</h3>
<blockquote>
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.
</blockquote>
<p>
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.
<strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is
emphasized!</em> And heck, <a href='/'>here</a>'s a link.
</p>
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</article>
</section>
</main>
<script src="js/example.js"></script>
</body>
</html>

109
example/js/example.js Normal file
View File

@ -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);

220
src/scales.css Normal file
View File

@ -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,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='%23555'><polygon points='0,0 60,0 30,40'/></svg>");
}
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));
}