From d1aa8f232d59c12656073b0e583afcb75eccbfc3 Mon Sep 17 00:00:00 2001 From: yukseltron Date: Tue, 1 Nov 2022 14:41:52 -0400 Subject: [PATCH] add new border-image for default button, replace old button.png with button.svg --- docs/index.html.ejs | 295 ++++++++++++++++++++-------------------- icon/button-default.svg | 3 + icon/button.svg | 3 + style.css | 11 +- 4 files changed, 164 insertions(+), 148 deletions(-) create mode 100644 icon/button-default.svg create mode 100644 icon/button.svg diff --git a/docs/index.html.ejs b/docs/index.html.ejs index edb9db5..dd45139 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -18,7 +18,7 @@

- +

System.css

A design system for building retro -inspired interfaces

- +

Intro

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.

- +

Components

- +

Buttons

@@ -74,49 +74,54 @@ A button is a rounded rectangle that is named with text. Clicking a button performs the action described by the button's name.
— Apple HI Guidelines, p. 204
- +

A standard button measures 59px wide and 20px tall. We use the .btn class for these buttons

- + <%- example(` - - + + `)%> - +

When pressed, buttons invert. The button below is stimulated to be in the active state.

- + <%- example(` - + `)%> - +

Buttons can also have dynamic widths.

- + <%- example(` - + `)%> - + + <%- example(` + + + `)%> +

Disabled buttons look the same as standard buttons, but with grey button text. Add the disabled attribute to use it.

- + <%- example(` - + `)%> - - + +
- - + +
- +

Radio Buttons

@@ -124,9 +129,9 @@ 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.
— Apple HI Guidelines, p. 210
- +

Radio Buttons can be rendered by specifying a radio type on an input tag and assigning it a name.

- + <%- example(`
@@ -140,13 +145,13 @@
- + `)%> - - + +
- +

Checkboxes

@@ -155,9 +160,9 @@ checkbox is a square with label text next to it
— Apple HI Guidelines, p. 211
- +

Checkboxes can be rendered by specifying a checkbox type on an input tag and assigning it a name.

- + <%- example(`
@@ -171,14 +176,14 @@
- + `)%> - - + +
- - + +
@@ -187,11 +192,11 @@ icons that serve as the title of each menu
— Apple HI Guidelines, p. 52
- +

A menu bar consists of menu elements that name menu items and they typically have a dropdown menu associated with them.

- +

To create a menu bar we will use the .menu-bar class.

- + <%- example(`
  • @@ -230,9 +235,9 @@
`)%> - +

We can also manipulate a menu bar into a standard dropdown.

- + <%- example(`
  • @@ -248,17 +253,17 @@ `)%>
- - + +

Select Menu

A select menu can be used to create a drop-down list, typically used in forms.
- +

Select menus can be rendered using the select and option elements.

- + <%- example(` `)%> - +

By default the first option will be selected, but you can change that by adding the selected attribute to an option

- + <%- example(` `)%> - +

Other types of text are also supported

- + <%- example(`





-
+ `)%> - - + +
- - + +

Windows

Standard document windows have standard structural components. These components include the title bar, size box, close box, zoom box, - and scroll bars. Windows are designed for visual consistency across all monitors + and scroll bars. Windows are designed for visual consistency across all monitors
— Apple HI Guidelines, p. 134, 159
- - - + + +

Title Bar

- +
A standard title bar is at least 19px tall, has a close button, caption, and racing stripes.
- +

They're usually a part of a window. Title bars use the Chicago 12pt font.

- + <%- example(` - +
-
+

A Title Bar

- + `)%> - +

Title bars can look different depending on what they're intended for.

- + <%- example(` - +
-
+

Also a Title Bar

-
+

Dialog Title

- + `)%> - +

You can also set a title bar to be inactive by applying the .inactive-title-bar class

- + <%- example(` - +
-
- +
+

Inactive Title Bar

- +
- + `)%> - +
- - - + + +

Window Contents

- +
Document windows present a view into the content that people create and store.
— Apple HI Guidelines, p. 134
- +

This is a window (without stuff in it). To create a basic window, we simply use the .window class.

- + <%- example(` - +
-
+

Window Without Stuff

- + `)%> - - + +

This is a window with stuff in it. We can achieve this by simply adding a div with the .window-pane below the title bar.

- + <%- example(` - +
-
+

Window With Stuff

- +
Woo I got stuff in me!
- + `)%> - - - + + +

You can also add a details bar to a window by adding.details-bar below the title bar.

- + <%- example(` - +
-
+

Window With Details

@@ -443,19 +448,19 @@ more details
- +
Woo I got a details bar.
- + `)%> - +

You can also create an inactive window using an inactive title bar.

- + <%- example(`
-
+

Inactive Window

@@ -463,17 +468,17 @@ more details
- +
not active :(
`)%> - - + +
- +

Dialogs

@@ -482,35 +487,35 @@ computer can present alternatives from which the user can choose.
— Apple HI Guidelines, p. 176
- +

A basic dialog is just a box with text in it. We use the .standard-dialog class here.

- + <%- example(` - +

The Macintosh Finder, Version 1.0 (18 Jan 84)

© 1984 Apple Computer

- - + + `)%> - +

A modeless dialog box looks like a window without a size box, zoom box, or scroll bars.

- + <%- example(`
-
+

Modeless Dialog

- +
@@ -523,11 +528,11 @@
`)%> - +

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 for the inner div.

- + <%- example(`
@@ -546,20 +551,20 @@
- +
- +
- +
`)%> - - + +
Alert boxes appear when the system software or an application needs to communicate information to the user. Alert boxes provide messages about @@ -567,52 +572,52 @@ actions
— Apple HI Guidelines, p. 176
- +

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 a standard alert box. The text would be placed here. This is where more text appears

- +
- +
`)%>
- +

Contributing, Credits, etc.

- +

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

- +

System.css is still in beta! There's a few things that are currently missing that I incline on adding pretty soon. 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 :)

- +

Sponsors

- +

CSS Scan: The fastest and easiest way to check, copy and edit CSS

- + - -

+ +

diff --git a/icon/button-default.svg b/icon/button-default.svg new file mode 100644 index 0000000..d5aaad6 --- /dev/null +++ b/icon/button-default.svg @@ -0,0 +1,3 @@ + + + diff --git a/icon/button.svg b/icon/button.svg new file mode 100644 index 0000000..8979a48 --- /dev/null +++ b/icon/button.svg @@ -0,0 +1,3 @@ + + + diff --git a/style.css b/style.css index 1e5177f..626e558 100644 --- a/style.css +++ b/style.css @@ -374,7 +374,7 @@ h2 { /* buttons */ -.btn { +.btn, .btn-default { min-height: 20px; min-width: 59px; padding: 0 20px; @@ -382,7 +382,7 @@ h2 { background: var(--primary); border-style: solid; border-width: 5.5px; - border-image: url("./icon/button.png") 30 stretch; + border-image: url("./icon/button.svg") 30 stretch; color: var(--secondary); text-align: center; text-decoration: none; @@ -391,6 +391,11 @@ h2 { cursor: pointer; } +.btn-default { + border-image: url("./icon/button-default.svg") 60 stretch; + border-width: 0.7em; +} + .btn:active { background: var(--secondary); border-radius:6px; @@ -405,7 +410,7 @@ h2 { background: var(--primary); border-style: solid; border-width: 5.5px; - border-image: url("./icon/button.png") 30 stretch; + border-image: url("./icon/button.svg") 30 stretch; color: var(--disabled); text-align: center; text-decoration: none;