Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
HTML5 window chroming
JavaScript
Branch: master

Demo link

latest commit ba53c5eb0f
@rauchg authored
Failed to load latest commit information.
css Initial release
demo Initial release
img
js Initial release
README.md
TODO
index.html Initial release

README.md

ChromeKit

ChromeKit is a toolkit engineered to deliver a desktop-like experience in a web browser, with CSS3 and HTML5, and some healthy bits of JavaScript.

Check out the demo here.

Screenshot

Project Goals

  • Deliver a rich, desktop-like experience without a performance overhead

  • Take advantage of the most modern technologies available today (HTML5, CSS3), specially those seen in the Webkit engine.

  • Null (or next to null) image usage

  • JavaScript framework agnosticism

  • Incorporate behaviors and utilities observed in other desktop environments.

  • Optimize for the most common functions:

    • Dragging

    • Minimize and maximize

  • Deliver additional components that alter the behavior of windows or presentation of the content

    • Stylized buttons, inputs.

    • Tabs

    • Status bars

  • Flexibility in design

    • Windows support scrolling or can grow to accommodate the content size. The chroming strategy adapts to the content and is selected by the developer, instead of the developer having to work around the chrome limitations by altering the content user experience and interaction.

    • No inherited styling for the content. This allows for fast iteration and the possibility of different people working on different widgets that then become windows, but could be available otherwise. For example, it wouldn't make sense to deliver desktop chrome in a mobile device, but the content style can remain consistent.

  • Intelligent degradation strategy for cross-browser, cross-platform compatibility:

    • Deliver the content to all browsers and platforms. Out-of-the-box, effortless mobile support.

    • Only replicate visual effects or eye candy when the performance is not compromised. Tradeoffs are evaluated based on the impact on usability.

How it's done

  • Graceful degradation / Optimization mode:

    Standard, solid borders and backgrounds are used in the CSS files, and chrome.css applies advanced CSS techniques.

  • Window close / minimize / maximize buttons:

    border-radius + background with radial gradient() function + text-shadow (for labels)

  • Tabs

    border-radius + background with radial gradient() function

  • Resize gripper

    delivered through data: uri, or degrades to an image for IE6/7 with CSS that validates

  • Window shadow

    box-shadow

  • Expose (experimental)

    Based on the work by Jens England (C++ Windows Expose implementation) and the paper Guided Local Search for the Three-Dimensional Bin-Packing Problem

  • Vista-like 3D flip (using CSS3 3d transforms)

    Screenshot

  • Toolbar

    border-radius + opacity (hover effect)

Credits

Guillermo Rauch (http://devthought.com guillermo@learnboost.com)

Nathan White (http://nwhite.net nathan@learnboost.com)

Something went wrong with that request. Please try again.