Web Design 2

[decodering]

How to build a responsive grid system

Zell Liew:

There are eight steps to building your grid system. Here are the steps in summary:

Choose a spec to create your grid with

Set box-sizing to border-box

Create a grid container

Calculate column-width

Determine gutter positions

Create a debug grid

Make layout variations

Make your layouts responsive

Most of these eight steps are relatively straightforward once you go through them. I’ll spell out everything you need to know as we walk through each step.

[inspirationmobile]

Everything is designed. Few things are designed well.

Brian Reed (via inspirationmobile)

[inspirationmobile]

Weather App by Ryan Duffy

— The Best iPhone Mockups for Your Next Product: store.ramotion.com/product/iphone-6-mockups

[inspirationmobile]

Circle Game Menu — Ramotion.com

[uiuxart]

Expense Input Interaction by Apurva Chakke.

[inspirationmobile]

Liquid Pull Down by Ramotion

[appuid]

TaskManagerUI

[smiling-interfaces]

[codemyui]

Multiple Hamburger Menu Animations

Hover over the hamburger menu to transform it into X, forward, back and minus. Designed by tonkec_palonkec.

Keep reading

[codemyui]

Slide Out Scrolling Gallery

An image gallery with slide out cards on scroll. Perfect for any image heavy website. Designed by teeganlincoln.

Keep reading

[codemyui]

Expanding Card Using Material Design

A simple expanding card transition using material design that can use in your web design project which is best for “contact me” form. Designed by Joe Harry.

Keep reading

[codemyui]

SVG Elastic Progress Bars

If you are looking for some fancy progress bar for your website, this might be a good option.

Keep reading

[codemyui]

Color Changing Background on Scroll

This amazing color changing background of the whole page is done using jQuery based on the position of the page. Designed by  Jack Harner

Keep reading

[cssparadiseblog-deactivated2016]

Expanding Contact Form

HTML (Haml) + CSS (SCSS) + JavaScript/jQuery A functional (front end only) expanding contact form with jQuery validation.Based on my other pen Expanding Card | Material Design. I might end up using this, so write a comment if you find any bugs.Font icons from Font Awesome http://codepen.io/woodwork/pen/pgLvEr

[cssparadiseblog-deactivated2016]

Prompt Dialog With Background Blur

HTML + CSS + JavaScript/jQuery Purely css-driven popup dialog with a soothing transition animation and background blur. http://codepen.io/ndne/pen/NGbgYE

[cssparadiseblog-deactivated2016]

Crazy Pie Chart With CSS3 and JavaScript

HTML + CSS (SCSS) + JavaScript (Babel) Fun with D3 animation. http://codepen.io/Siddharth11/pen/LVQmjN

[cssparadiseblog-deactivated2016]

CSS3 Paper Folding Effect

HTML + CSS CSS3 paper folding effect made using css animation. Inspired by Dribbble shot of Supratim Nayak (https://dribbble.com/shots/324781-Photofold) http://codepen.io/nDav/pen/YyJvNN