diff --git a/docs/docs.css b/docs/docs.css index acc1abc..85442c2 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -18,17 +18,15 @@ body { padding: 0; } -main { - width: 90rem; - margin-left: 240px; - margin-bottom: 60px; - margin-top: 25px; -} +/* Layout: */ -.container{ - width: 80%; -} +.col-main { + flex: 1; +} +.col-complementary { + flex: 1; +} aside { width: 200px; @@ -146,4 +144,33 @@ pre { .menu-items { padding: 0; font-size: 14px; +} + +/* responsive shiz */ +@media only screen and (min-width: 640px) { + .layout { + display: flex; + justify-content: space-between; + } + .standard-dialog { + margin-right: 20px; + margin-top: 18px; + } + .sidebar { + z-index: 1; + } +} +@media only screen and (max-width: 600px) { + .sidebar { + display: none !important; + } + .example { + margin: 0px; + } + .component { + display: contents; + } + .scale-down { + transform: scale(0.8); + } } \ No newline at end of file diff --git a/docs/index.html.ejs b/docs/index.html.ejs index 3abd7bc..168747a 100644 --- a/docs/index.html.ejs +++ b/docs/index.html.ejs @@ -4,7 +4,7 @@ system.css | A design system for building retro Apple-inspired interfaces - + @@ -14,621 +14,606 @@ - - - -
-
-

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

-
-
- 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(` - - - - `)%> - -

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

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

+

+
+ +

Docs

+
- - -
- -
-

Radio 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. -
— 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(` -
- - -
-
- - -
-
- - -
- - `)%> - - -
-
- -
-

Checkboxes

-
-
- Checkboxes, like radio buttons, provide alternative choices for users. A - 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(` -
- - -
-
- - -
-
- - -
- - `)%> - - -
-
- - -
- -
-
- The menu bar extends across the top of the screen and contains words and - 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(` - -
- - -
-

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(` - - `)%> -
-
+
-
-

Text Box

-
-
- The place or places in a dialog box where information can be typed. Also called text entry field. -
— Apple HI Guidelines, p. 372
-
- -

Text Boxes can be rendered by specifying a text type on an input tag

- - <%- 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 -
— 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(` - -
-
+

+
+

System.css

+

A design system for building retro -inspired interfaces

-

Inactive Title Bar

- +

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

+
+
+ 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(` + + + `)%> + +

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

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

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

- -
-
- some - more - details -
- -
- Woo I got a details bar. -
-
- - `)%> - -

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

- - <%- example(` -
-
-

Inactive Window

-
-
- some - more - details + + +
+ +
+

Radio 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. +
— 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(` +
+ + +
+
+ + +
+
+ +
-
- not active :( + `)%> + + +
+
+ +
+

Checkboxes

+
+
+ Checkboxes, like radio buttons, provide alternative choices for users. A + 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(` +
+ + +
+
+ + +
+
+ +
+ + `)%> + +
- `)%> - - -
- - -
-

Dialogs

-
-
- Dialog boxes are windows that provide a standard framework in which the - 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

- +
+ + +
+ +
+
+ The menu bar extends across the top of the screen and contains words and + 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(` + + `)%> + +

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

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

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(` + + `)%> +
+
+ +
+

Text Box

+
+
+ The place or places in a dialog box where information can be typed. Also called text entry field. +
— Apple HI Guidelines, p. 372
+
+ +

Text Boxes can be rendered by specifying a text type on an input tag

+ + <%- 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 +
— 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

+ +
+
+ some + more + details +
+ +
+ Woo I got a details bar. +
+
+ + `)%> + +

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

+ + <%- example(` +
+
+

Inactive Window

+
+
+ some + more + details +
+ +
+ not active :( +
+
+ `)%> + +
-
- `)%> - -

- 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(` -
-
- -
-

Modal Dialog

-
-
- - -
-
- - -
-
- - +
+ +
+

Dialogs

+
+
+ Dialog boxes are windows that provide a standard framework in which the + 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

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

+ 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(` +
+
+
+

Modal Dialog

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
- -
- - -
-
- - -
- - `)%> - - -
- Alert boxes appear when the system software or an application needs to - communicate information to the user. Alert boxes provide messages about - error conditions and warn users about potentially hazardous situations or - 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 where more text appears

-
- -
- - -
- + `)%> + + +
+ Alert boxes appear when the system software or an application needs to + communicate information to the user. Alert boxes provide messages about + error conditions and warn users about potentially hazardous situations or + 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 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

- - - + + +

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/style.css b/style.css index 08a66f1..4851976 100644 --- a/style.css +++ b/style.css @@ -136,12 +136,12 @@ hr { border-top: 0.15em solid #000; } -.container { +/*.container { width: 50%; margin: 0 auto; display: block; } - +*/ h1, .heading { font-family: Chicago; @@ -171,6 +171,7 @@ h2 { .modal-dialog, .alert-box { width: auto; padding: 13px; + background: #fff; } .modal-contents, .alert-contents { @@ -550,7 +551,7 @@ form { select { border: 1.5px solid; height: auto; - min-width: 25%; + width: 10rem; font-family: Chicago_12; font-size: 18px; background-image: svg-load("./icon/select-button.svg");