Behind the Framework
Reduce Complexities & Improve Performance
UI Accelerators
Sample scripts shared, showcase lesser known and emerging native capabilities of HTML CSS & JavaScript.
Expandable Content
Multiline overflow, adding text that fades away when too long or a read more button that only appears when needed are perfect examples of this complex situation.
Learn moreSnackbar / Toast
This pattern shows how to build an adaptive and accessible toast component with a few lines of JS.
Learn moreStar Rating
Using CSS Background values to limit DOM count and complexity, we render a dynamic star rating view.
Learn moreStepper Bar
A custom step progress bar with CSS, which can be easily integrated into every application.
Learn moreCSS Image Compare
Using CSS grid, masks and an input type range to create a comparison component.
Learn morePopover Hamburger Menu
Using the Popover API you can build out this simple hamburger menu with no javascript.
Learn morea11y tabs - progressively enhanced
Accessible tabs with progressive enhancement JS pattern.
Learn moreUsing a live code editor, users can view and interact with the showcased sample code (like codepen). With this hands-on experience you can test the capabilities and limitation of the code showcased, then use it for your own purposes.
Note: Editors on this site use localstorage to save your edits and retain state automatically.