Responsive Retina-Ready Menu
By Stéphanie Walter 39 Comments
A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. ... read more
responsive
Fullscreen Layout with Page Transitions
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for ... read more
Responsive Multi-Level Menu
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. ... read more
Creating Nestable Dynamic Grids
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. ... read more
UI Design Guidelines for Responsive Design
Some UI guidelines and tips to consider when designing a website to make it cross-device friendly and responsive. ... read more
Putting CSS Clip to Work: Expanding Overlay Effect
A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. ... read more
Responsive & Touch-Friendly Audio Player
By Osvaldas Valutis 52 Comments
A jQuery audio player plugin that is responsive and touch-friendly. The UI is css-only, no images used. ... read more
Calendario: A Flexible Calendar Plugin
A jQuery calendar plugin for creating flexible calendars. ... read more
Gamma Gallery: A Responsive Image Gallery Experiment
Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slide ... read more
Becoming Device-Agnostic
Responsive Web Design is more than just adjusting a web experience to different screen sizes. Becoming device-agnostic is an important step for creating future-proof ... read more
Elastislide Revised
Elastislide, the responsive image carousel, has been updated and improved. It can be used vertically or horizontally and a minimun number of visible images can be sp ... read more
Vertical Showcase Slider with jQuery and CSS Transitions
A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS Transitions and media ... read more
3D Restaurant Menu Concept
A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. ... read more
Tips & Tools for Grid-based Layouts
Developing a vertical (and responsive) grid can help maintain consistency in website design and ease the creation of responsive layouts. ... read more
Responsive 3D Panel Layout
A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects. ... read more
Experimental Page Layout Inspired by Flipboard
An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard. ... read more
Slideshow with jmpress.js
Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. ... read more
Responsive Horizontal Layout
In this tutorial we'll create a horizontal website layout with individually scrollable content panels. We'll change the layout for smaller screens, making it respons ... read more
Responsive Content Navigator with CSS3
Today we want to show you how to create a responsive, css-only content navigator. ... read more
Elastic Image Slideshow with Thumbnail Preview
Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and ... read more
Architecture in Web Design: Applying Vitruvius’ Principles
Let's make a real world comparison: buildings are very much like web sites. So are we (web designers and developers) essentially just architects? When you compare we ... read more
Flexible Slide-to-top Accordion
In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. ... read more
Responsive Image Gallery with Thumbnail Carousel
A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show a ... read more
Elastislide – A Responsive jQuery Carousel Plugin
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defi ... read more