Archive for the ‘layout’ Category

Expanding Grid Item Animation

Today we’d like to share a simple implementation of a grid animation with you that is based on the Dribbble shot Surf Project by Filip Slováček. When a grid item is clicked, the background and the thumbnail are scaled up and moved to th...

Sliced Dual Image Layout

Posted on: No Comments
Today we’d like to share some layouts with a sliced image look with you. The idea is to show some text elements in a grid layout and change the content and images in a slideshow fashion. For the background image slices, we created a little plugin...

Developer/Designer Page Layout Concept

View demo Download source Today we’d like to share a simple page layout concept with you. The theme of the page is a developer/designer portfolio where we add a special effect for revealing the “other” quality of the designer. When y...

Experimental 3D Room Exhibition Layout

View demo Download source Today we’d like to share an experimental 3D layout with you. The idea is to show some information about a gallery’s exhibition in an interesting way. Each artist has a “room” in the gallery which shows...

Getting Started with CSS Grid

Posted on: No Comments
This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That's right: we can now go and play with Grid in two of the most popular browsers right away. But why is CSS G...

The Media Object, A Bunch of Ways

Posted on: No Comments
The Media Object pattern is: image thingy on the left, heading and text on the right. That's what Nicole Sullivan called it and the name stuck. It's a pretty simple pattern, but like all things web design, it can be done many ways. Bootstrap's versi...

Mirror Effect

View demo Download source Today we’d like to share a little effect with you that you might have already stumbled upon on the Web. It’s a kind of a mirror effect as seen on sites like Corentin Fardeau and Method. They are really interesting...

Learning from Lego: A Step Forward in Modular Web Design

Posted on: No Comments
Samantha Zhang: When web components are modular like Lego bricks down to the elements level, they become more versatile and easier to maintain. We believe it’s the next step to take in modular web design. It's a clever system: put a half-gutter arou...

Surf Report Template

Posted on: No Comments
View demo Download source Today we’d like to share a little template with you. This flexbox-based layout represents a weekly (5-day) surf report which shows some data of the day, like temperatures and information on waves. It is accompanied by a...

Cubes Advent Calendar

View demo Download source Today we’d like to share a fun little Advent calendar with you. The idea is mainly inspired by the Singles 2016 page of Adult Swim. When hovering over the boxes, they rotate in a fun way and when we click on a box, all ...