X.css

A CSS library that makes web pages look like Mac OS X Lion: glossy traffic lights, aqua buttons, gradient title bars, and blue source lists.

No JavaScript. Works with any framework. See the docs

Install

CDN: add this to your <head>:

<link rel="stylesheet" href="https://unpkg.com/@vstyler96/x.css" />

npm:

npm i @vstyler96/x.css

Dist files

| File | What it is | |---|---| | dist/x.css | Everything. CSS variables (--osx-*) stay live so you can theme at runtime. | | dist/x.scoped.css | Same, but every selector is scoped under .osx. Only elements inside class="osx" are styled. | | dist/x.inline.css | Variables resolved to plain values, for old browsers. | | dist/gui/<component>.css | One file per component (e.g. dist/gui/button.css), variables inlined. |

Prefixes: the scope class is .osx; CSS variables are --osx-*; keyframes are osx-*.

Example

<div class="window active" style="width: 30rem">
  <div class="title-bar">
    <div class="title-bar-text">Hello</div>
    <div class="title-bar-controls">
      <button aria-label="Close"></button>
      <button aria-label="Minimize"></button>
      <button aria-label="Maximize"></button>
      <button aria-label="Fullscreen"></button>
    </div>
  </div>
  <div class="window-body has-space">
    Hello world!
    <button>Cancel</button>
    <button class="default">OK</button>
  </div>
</div>

The markup is the same as 7.css (and 98.css, XP.css, system.css): only the look changes. The traffic lights always render on the left and the title is centred, whatever the order of the buttons in the HTML.

Components

| Component | Markup | |---|---| | Window | .window (.active, .is-bright) > .title-bar + .window-body (.has-space, .has-scrollbar), .window-footer / footer, .status-bar > .status-bar-field | | Title bar | .title-bar-text + .title-bar-controls > button[aria-label=Close\|Minimize\|Maximize\|Restore\|Help\|Fullscreen] or .is-close / .is-minimize / .is-maximize / .is-restore / .is-help / .is-fullscreen | | Dialog | .window[role=dialog], opens on :target; .is-sheet for a Lion sheet | | Button | button, .default (pulsing aqua), .active, .focused, :disabled, label[role=button], file input; .is-textured, .is-gradient | | Checkbox / radio | input[type=checkbox\|radio] + label | | TextBox | input[type=text\|email\|password\|number\|url], textarea | | SearchBox | input[type=search], .searchbox > input[type=search] + button[aria-label=search] | | Combobox | .combobox > input[type=text] + button | | Dropdown | select | | ListBox | [role=listbox] > [role=option][aria-selected], select[multiple]; .has-hover, .has-shadow | | ListView | table; .has-shadow, .is-striped, .has-hover, .is-full, th.highlighted, .indicator, .indicator.up, tr.highlighted, th.is-center / td.is-center | | GroupBox | fieldset > legend; .field-row, .field-row-stacked, .group | | Tabs | menu[role=tablist] (.justified) > button[role=tab][aria-selected=true] + [role=tabpanel] | | TreeView | ul.tree-view (.has-container, .has-collapse-button, .has-connector) with details / summary | | Collapse | details > summary | | Menu | ul[role=menubar] (.can-hover) > li[role=menuitem] > ul[role=menu]; .has-divider, [aria-haspopup], [aria-disabled], .is-apple | | ProgressBar | [role=progressbar] > div (width = value); .animate, .paused, .error, .marquee (barber pole) | | Slider | input[type=range], .has-box-indicator, .is-vertical wrapper | | Spinner | .spinner / .loader, .animate | | Balloon | [role=tooltip], .is-top, .is-left | | Start button | button.start-button: the Apple menu, blue while [aria-expanded="true"] | | Scrollbar | .has-scrollbar (opt-in) | | Typography | .instruction, .instruction-primary, .header-document, .header-group |

Extras (Lion only)

| Component | Markup | |---|---| | Toolbar | .toolbar right after .title-bar (unified title bar); .is-spacer, .is-flexible | | Segmented control | .segmented (.is-textured, .is-gradient) > input + label pairs, or button[aria-pressed] | | Scope bar | .scope-bar > radio + label, button, select, input | | Source list | .splitview > .sourcelist > details (summary = heading) > radio + label, .badge, .icon |

Migrating from 1.0.0

2.0.0 is a clean break: none of the old class names are kept as aliases.

| 1.0.0 | 2.0.0 | |---|---| | <h1 class="title"> | <div class="title-bar-text"> | | button.close / .minimize / .maximize directly in .title-bar | wrap them in .title-bar-controls; use aria-label="Close\|Minimize\|Maximize" or .is-close / .is-minimize / .is-maximize | | button.resize | button[aria-label=Fullscreen] or .is-fullscreen | | button.hidden | leave the button out | | .inactive-title-bar | .title-bar (title bars are inactive by default); add .active to .window or .title-bar for the focused look | | .window-pane | .window-body.has-space.has-scrollbar | | .details-bar | .status-bar > .status-bar-field (now at the bottom) | | .separator | removed; the title bar has its own border | | .btn, .push, .standard-button, .button | button | | .btn-default | button.default | | .textured, .gradient | button.is-textured, button.is-gradient | | div.gradient (button bar) | .segmented.is-gradient | | label.push / label.textured in .segmented | plain label in .segmented / .segmented.is-textured | | .standard-dialog, .modeless-dialog | .window (add role="dialog" for a modal that opens on :target) | | .modal-dialog, .alert-box, .outer-border, .inner-border, .modal-contents, .alert-contents | .window[role=dialog].is-sheet > .window-body.has-space | | role="menu-bar" / role="menu-item" | role="menubar" / role="menuitem" | | .divider (menu item) | .has-divider | | .apple | li[role=menuitem].is-apple | | div.scope.bar, .scope on children | .scope-bar, no class on children | | .sourcelist .section-title + input.disclosure + .section | .sourcelist > details > summary | | .sourcelist .item | label after a radio | | .view, .space, .flexible, .disabled | removed; use .window-body, .toolbar > .is-spacer, .toolbar > .is-flexible, :disabled / aria-disabled | | input.disclosure | details > summary | | --font, --radius, --aqua, … | --osx-font, --osx-el-bdr, --osx-el-grad-a, … (see gui/_variables.scss) |

What else changed:

• x.css no longer styles body: no wallpaper, font or min-height. Set your own page background.
• Scrollbars are no longer global. Add .has-scrollbar to the elements that should get them.
• h1, h2 and hr are no longer styled.
• Tables no longer have zebra rows by default. Add .is-striped.
• select is now a plain Lion pop-up button with dark up/down arrows; the aqua cap is gone.
• To keep x.css from leaking into the rest of your page, use dist/x.scoped.css and wrap your UI in class="osx".

Develop

make preview   # build + live reload on http://localhost:3000
make build     # build dist/ (4 CSS outputs) and the docs
make publish   # publish to npm
make deploy    # publish the docs to GitHub Pages
make clean     # delete dist/

make build runs npm install first when package-lock.json is newer than node_modules.

The styles live in gui/, one partial per component (gui/_button.scss, …), imported by gui/index.scss. They are plain CSS with nesting and @import, processed by PostCSS (not Sass). Icons are in gui/icon/ and are inlined as base64 at build time.

Credits

X.css is built on the work of:

• system.css by Sakun Acharige: the original fork.
• 7.css by khang-nd: the architecture, build and markup API.
• Lion CSS UI Kit by Ville V. Vanninen (@sakamies): buttons, segmented controls, scope bar, and source list.
• Mac OS X Lion on CodePen by rapttor: window chrome, traffic lights, and menu bar.

Maintained by Vincent GS (@vstyler96). Bugs and PRs are welcome on GitHub.

License

MIT