Archive for the ‘layout’ Category

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 ...

Things I’ve Learned About CSS Grid Layout

Posted on: No Comments
The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he's going to hop around to different concepts that he's learned on that journey. I like this idea...

Line Maker: Animated Decorative Lines

View demo Download source Today we’d love to share a little library with you that allows to add decorative lines to a webpage. The inspiration for this plugin comes from various designs that contain the line as a focal part of their layout. Exam...