On-Scroll Animated Header
A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition. ... read more
layout
Responsive Multi-Column Form
A responsive multi-column form with example media queries for a flexible layout. ... read more
Product Grid Layout
A responsive product grid layout with some UI details for inspiration. ... read more
Fixed Background Scrolling Layout
A fixed background image scrolling layout with 100% height panels and smooth scrolling. ... read more
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 Full Width Grid
A responsive grid layout for multiple items in a row that fill all the available width. ... 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
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
Designing the Dreaded Form
As much as they are dreaded, forms play an important role in many websites and designing them should involve careful planning of their layout. ... 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
CSS-Only Responsive Layout with Smooth Transitions
A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger tr ... read more
Successful Web Design: It’s All About The Details
Pay attention to alignment, contrast, type effects and color because these items can make or break your website design. ... read more