System.css
A design system for building retro inspired interfaces
System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.
Fortunately, this library does not use any JavaScript and is compatible with any front-end framework of your choice. Most styles can also be overwritten to allow for deeper customization.
-A standard button measures 59px wide and 20px tall. We use the btn class for these buttons
A standard button measures 59px wide and 20px tall. We use the .btn class for these buttons
A radio button is a Macintosh control that displays a setting, either on or off, and is part of a group in which only one button can be on at a time. @@ -134,6 +145,37 @@
+ Checkboxes, like radio buttons, provide alternative choices for users. A + checkbox is a square with label text next to it + ++ +
Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.
- A basic dialog is just a box with text in it.
+ A basic dialog is just a box with text in it. We use the .standard-dialog class here.
The Macintosh Finder, Version 1.0 (18 Jan 84)
© 1984 Apple Computer
- We can also have a modal dialog box, which typically has some interactive component within it. -
- - <%- example(` -A modeless dialog box looks like a window without a size box, zoom box, or scroll bars. @@ -223,6 +227,44 @@
+ We can also have a modal dialog box, which typically has some interactive component within it. It has a double-outline border. We achieve this by using a nested div. The outer div uses the .outer-border class and the .inner-border
+
@@ -233,16 +275,17 @@-
Alert boxes also have a double-outline frame. T
+Like modal dialogs, alert boxes also have a double-outline frame. The empty square is where you'd place an icon.
<%- example(`This is a standard alert box. The text would be placed here. This is where more text appears
+This is a standard alert box. The text would be placed here. + This is where more text appears
The place or places in a dialog box where information can be typed. Also called text entry field. @@ -460,7 +503,7 @@- Window Contents
+Window Contents
diff --git a/icon/checkmark.svg b/icon/checkmark.svg new file mode 100644 index 0000000..c682cd4 --- /dev/null +++ b/icon/checkmark.svg @@ -0,0 +1,22 @@ + diff --git a/package.json b/package.json index ed3fecb..2e0e26f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sakun/system.css", - "version": "0.1.0", + "version": "0.1.1", "description": "A design system for building retro Apple interfaces", "main": "dist/system.css", "directories": { diff --git a/style.css b/style.css index 560ef7c..72c7d26 100644 --- a/style.css +++ b/style.css @@ -32,9 +32,9 @@ var(--radio-label-spacing); --checkbox-total-width: calc(var(--checkbox-total-width-precalc)); --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc)); - --checkmark-width: 7px; - --checkmark-top: 3px; - --checkmark-left: 3px; + --checkmark-width: 13px; + --checkmark-top: 1.5px; + --checkmark-left: 1.5px; } @font-face { @@ -417,6 +417,12 @@ input[type="radio"] + label::before { height: 20px; } +input[type="checkbox"] + label::before { + border: 1.5px solid black; + width: 20px; + height: 20px; +} + input[type="radio"], input[type="checkbox"] { appearance: none; @@ -432,6 +438,7 @@ input[type="checkbox"] { input[type="radio"] + label, input[type="checkbox"] + label { line-height: 13px; + padding-left: 5px; } input[type="radio"] + label { @@ -451,9 +458,6 @@ input[type="radio"] + label::before { background: svg-load("./icon/radio-border.svg"); } -input[type="radio"]:active + label::before { - background: svg-load("./icon/radio-border-disabled.svg"); -} input[type="radio"]:checked + label::after { content: ""; @@ -466,19 +470,6 @@ input[type="radio"]:checked + label::after { background: svg-load("./icon/radio-dot.svg"); } -input[type="radio"]:focus + label, -input[type="checkbox"]:focus + label { - outline: 1px dotted #000000; -} - -input[type="radio"][disabled] + label::before { - background: svg-load("./icon/radio-border-disabled.svg"); -} - -input[type="radio"][disabled]:checked + label::after { - background: svg-load("./icon/radio-dot-disabled.svg"); -} - input[type="checkbox"] + label { position: relative; margin-left: var(--checkbox-total-width); @@ -496,10 +487,6 @@ input[type="checkbox"] + label::before { margin-right: var(--radio-label-spacing); } -input[type="checkbox"]:active + label::before { - background: var(--surface); -} - input[type="checkbox"]:checked + label::after { content: ""; display: block; @@ -511,8 +498,10 @@ input[type="checkbox"]:checked + label::after { -1 * (var(--checkbox-total-width-precalc)) + var(--checkmark-left) ); background: svg-load("./icon/checkmark.svg"); + background-repeat: no-repeat; } + input[type="checkbox"][disabled] + label::before { background: var(--surface); }@@ -468,7 +511,7 @@-This is a window (without stuff in it)
+This is a window (without stuff in it). To create a basic window, we simply use the
<%- example(` @@ -554,14 +597,14 @@.windowclass.Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css.
+Thanks for checking this project out! This library was made in good fun and was largely inspired by 98.css. The Chicago 12pt and Geneva 9pt fonts are recreations by @blogmywiki
-It's also still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.
+System.css is still in beta! I recreated components based on Apple's Human Interface Guidelines. However, there's still a pretty good chance that I've might've missed/overlooked something essential. I've also had to recreate most of the assets, which can also be found here.
If you find a bug, consider opening an issue here. If there's something that you'd like to add, please feel free to create a PR!
-If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)
+If you'd like to see what else I'm up to, consider following me on Twitter or checking out my personal site :)