CSS Layouts

(45 submissions) | Feb 7, 2017

A collection of CSS layouts focused on different purposes, coming from portfolio and Pinterest to Metro and personal blogs.

  • A compelling layout for a microblogging site made in CSS and HTML. This microblog layout can be used in websites and also as a responsive email template. It has a top menu, big transitional slider, favorite and share buttons, and content area.

  • A purely CSS crafted Masonry layout including 3 columns featuring images as well. This CSS layout includes a nice hover-highlighting effect on each title adding great style to them.

  • A material layout built with CSS and JavaScript that resembles the Google Play Music website. It is semi-functional: you’ll find some actionable buttons like the menu on the upper left corner, the tabs, the search and the user options on the upper right. However, you can modify the code to add extra features and improve it.

  • An interesting snippet featuring a CSS masonry layout using flexbox that showcases some effects over some boxes like a pulse, focus, and a box that flips around. Moreover, resizing the window it is shown its responsiveness.

  • A responsive CSS layout that features several columns that seem to shine as you hover over them, and expand to the whole viewport with their respective content as you click on them.

  • An amazing illustration performed in pure CSS featuring a 3D multi-layer composition that is animated and interactive with the mouse as it tilts to always be facing the cursor.

  • Spotify artist page design pretty similar to the original one, in dark tones and a highly visual interface in JavaScript.

  • An useful article about the best and more practical coding methods to achieve the known and trending masonry layout. It explains how to build the layout withou using anything else but CSS, specifically Flexbox.

  • An effortless Sass framework that allows you to create layouts with simple and clean semantic commands reducing to zero the amount of litter in your code.

  • A fully CSS crafted static responsive grid that features native drag-n-drop, resizing, on-the-fly settings, custom columns and sizes, multiple containers, and more.

  • A nice navigation layout displaying a simple menu icon. Once clicked, a side menu with colorful icons appears. The layout also has some effects for screen transition. It was made with CSS and JavaScript by Codepen user Ettrics.

  • A simple snippet with animations showing a mockup of a responsive layout made with LESS. It displays a tablet mockup turning into a smartphone layout. It was created by Nick Eli and can be modified to fit a presentation or showcase.

  • CSStyle is a fashionable way for styling sites with simplicity and usability in mind. You can achieve this by applying a set of SASS mixins making the CSS readable and semantically accurate.

  • Here we have a set of UI elements made in HTML and LESS. This free download includes menus, search bars, login forms, sidebar menus, headings, texts, images (with different styles) and a bunch of buttons. Everything comes in three different colors and with nice hover effects.

  • Pure is a set of CSS modules that are responsive and lightweight, fitting any web project with neat design elements. It also has mobile devices in mind, letting you create responsive environments quickly and effortlessly.

  • This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels or percentages. The inclusion of sidebars can also be controlled. Take a look and create the right foundation for your project. It was created by Generate It!

  • This article will show us a tutorial on how to create a completely responsive layout with super smooth transitions. The idea is to have some buttons on the bottom that will animate the whole page and show different content through a smooth scrolling effect.

  • The uber-famous Pinterest grid layout is recreated using nothing but CSS. Apart from images and text, there are additional elements added such as hover effects, animations and frames. Go ahead and get the code to give your next project a classy, familiar feel.

  • Complete website layouts are not that common when they come coded right away, particularly in this type of platform. However, this code snippet has just that, a full simple website using HTML, CSS and JavaScript to achieve a flat, straight to the point kind of look. Created by Rick Butterfield.

  • Sara Soueidan has recreated these icon animations seen on Windows 8′s dashboard by taking advantage of the CSS3 3D transform property. These animations make tiles slide in various directions, do flips, turns, color variations, half sliding and more. It uses beautiful flat icons and follows the famous Metro style from Microsoft.

  • This is another version of the Windows 8 Metro UI made entirely in CSS and HTML. It has a very nice style, making thorough use of strong colors and icon fonts, with the effects slightly off the mark. Also, it is not yet entirely functional, lacking interactivity. However, it can be added with JavaScript or jQuery.

  • A coded version of the Windows 8 interface using SASS and JavaScript, created by Ashley Taylor. It includes nice animations and hover effects that bring the design to life. Some blocks also serve as mini widgets, offering search and app options right away.

  • A responsive HTML5 and CSS3 design for any blog. It has the regular elements of a website such as a header, menus, featured post frame, content widgets and more. Images and links have nice hover effects. The containers have simple shadows and the layout comes in a minimal style. You can always grab the code and modify it, for free.

  • This design brings us a very common RWD pattern that shows header, image and content just like a simple one-column blog. It’s a clean layout that has been created with a mobile-first approach to ensure the material can be accessed from any device. Written in CSS by Brenna O’Brien.

  • With this useful code snippet, you will be able to create a minimal layout that allows you to show and hide a sidebar at the press of a button, using a smooth animation. You can apply a slightly different background color to the sidebar so it’s easier to identify.

  • A neat HTML and CSS template with a very simple layout. A big image takes over the top of the design while the rest contains nothing but plain text, over a minimal white background. A stripped-down and effective look, ideal to keep content under the spotlight, without any distractions.

  • This is a very useful CSS-only show and hide button created by Gene Locklin. It makes clever use of a checkbox in order to expand and collapse a piece of content, making the design more space-efficient. Created with pure CSS by Gene Locklin from CSS Deck.

  • A complete set of patterns and modules for responsive design projects. There’s a bit of everything here and for any occasion, featuring image grids, tables, elements for video, navigation, layouts and much, much more. You are also able to submit your own patterns to the collection.

  • A clean responsive layout created by CodePen user cirox. It features a cool set of divisors that will look great on any device and will show your information in a clean and professional way. You can put a logo, footer and, of course, the main content right on this layout.

  • This code snippet provides and effective way to display a responsive website that will rearrange content in a way that keeps the most important material on top, gradually putting all the section in their correct order. Less important content also occupies a lower amount of space, letting you display various elements in the same line.

  • This code snippet created with CSS, HTML and JavaScript helps you make a nice lateral menu for your website or blog. It makes clever use of icons in order to fit more options for the user. After clicking a button, an animation will bring another menu with more in-depth selections. The rest of the website is also a nice experiment that you can use as a template.

  • Clément Guillou from Codepen created this interesting concept for a portfolio, displayed in a useful responsive layout, using CSS and JavaScript. It was mostly designed so photographers, illustrators and all kinds of visual artists can showcase their work in a mobile-friendly environment.

  • Here we have a nice flat user interface, mainly developed for mobile platforms. It features four buttons, divided into a full screen checkered pattern with animated icons. It was created with HTML, CSS and JavaScript. You can easily change the colors that conform the grid.

  • This is a simple code snippet made by Chris Coyier, in order to form a basic blog post view. It was created with SCSS and HTML and brings a menu, a post container and the definite highlight: A 3D button that animates quite smoothly when clicked. It can be used for submit forms of blog entries.

  • A beautifully simple navigation concept basing itself on what is basically a vertical, full-page slider. The idea is to have various buttons which display a giant icon when clicked, as well as a different background color. This design is also very fit to work with touch devices.

  • This is an example of how Flexbox could be used for website templates. Small squares fit the screen for the user, regardless its size, which could contain various options. It was developed using HTML and CSS, but there is a small amount of jQuery to allow the navigation to be closed and re-opened. This code snippet was written by Josh Parrett.

  • A simple HTML5 template using LESS. The author, Codepen’s user darylsutor, used it as a playground to test out the code and use an HTML5 layout. It has the regular blog components like a menu, the content container, a sidebar, and a simple footer.

  • The bad-boy is a fluid layout ready for responsive implementations. It contains equal height content and sidebar blocks, making the use of table-based designs a breeze. This code snippet was based on a project the author had developed recently. It contains all the elements you’d expect from a basic layout.

  • A CSS layout system that’s both lightweight and fluid. It aims to reduce the need for classes on individual units, making it a bit less messy and more fun to implement responsive layouts. The tool also offers extensibility options, in order to customize it to fit your own needs.

  • Here’s a cool tutorial on how to create a full screen vertical slider, including some pretty smooth animations and lovely icons which, of course, can be replaced with whatever you need. Article and code written by the skillful Mary Lou for the team of Codrops.

  • A simple responsive layout jQuery plugin with fancy page transitions that show four flexible boxes. When clicking on a box, it will expand to full screen, and the others will scale down and fade out. When closing the current view, it will move back to the initial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

  • This tutorial is about creating a horizontal website layout with individually scrollable content panels, including responsive behaviour for smaller screens. Additionally, we’ll add a content panel that will animate when clicked or selected. The challenge is to deal with different viewport sizes, adapting the layout to the multiple screen sizes.

  • This code snippet is about creating a blog post layout, including the regular sidebar located on the left. Also, we can add a picture and quotation to make the post a little more dynamic. Developed in HTML, CSS and JavaScript, created by Emily Brophy.

  • A code experiment created by Gabe Rose is a basic template with a fixed bar that can work as an option menu. The design is completed with space for texts and different areas for images. It is responsive, and it was built on HTML, CSS and a little JavaScript.

  • A semi-responsive tabbed navigation concept (it has trouble with the smallest sizes) that puts your content right under the spotlight thanks to a very minimal layout. You can place a big image as the header while the body of the text is displayed with just one column. You can use the navigation menu to jump from one part of the website to the other, making this perfect for one-page sites.

Leave a comment

This a test message in global notification
Your download will start shortly.


Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.


Thank You!

Your post has been received, and will be reviewed by a curator