Summary

This page has examples of responsive HTML, CSS and JavaScript interface elements. I rely heavily on open source resources and modify them to suit the project at hand. In most cases, there is no need to re-invent the interface from scratch.

Vertical Menu for Mobile First

See the Pen Vertical Icon Menu by Reece George (@reecegeorge) on CodePen.

Switch Button

See the Pen Switch Button #3 by Reece George (@reecegeorge) on CodePen.

It just looks cool.

Responsive Image Replacement

See the Pen AuyxH by Reece George (@reecegeorge) on CodePen.

Resize the page in the browser and the large image will be replaced by the small image. This allows the interface to send a smaller image to mobile devices to reduce download time.

Flat Web Colors

See the Pen Flat UI Colors by Reece George (@reecegeorge) on CodePen.

The original flatuicolors.com interface was developed using Flash, to enable an automated 'copy' function. The CSS version above is more cross-platform compatible and in my opinion, slightly more usable. However, the hex values need to be copied manually.

Subtle CSS3 Heartbeat

See the Pen Subtle CSS3 Heart Beat by Reece George (@reecegeorge) on CodePen.

This element uses a custom icon font and CSS3 animation to achieve a very subtle heart beat, often used in the the footer of a website.

Flat Text with Long Shadow

See the Pen Flat design shadow with LESS by Reece George (@reecegeorge) on CodePen.

Further flat design elements. This is an example of using CSS3 to manipulate text and add a long shadow

Responsive Table Turns Into List

See the Pen Responsive Table by Reece George (@reecegeorge) on CodePen.

Table collapses into a "list" on small screens. Headers are pulled from data attributes.

Forms for Latest Browsers

See the Pen WTF Forms by Reece George (@reecegeorge) on CodePen.

Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

Big, Bold and Responsive Headlines

See the Pen slabText by Reece George (@reecegeorge) on CodePen.

This script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the pixel font-size. The script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.