In this overview you will find the most useful resources and tutorials on modern web development. Check them out!

CSS Frameworks

Skeleton

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Foundation

The most advanced responsive front-end framework in the world.

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

SUSY

The web is a responsive place, from your lithe and lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive. You can quickly add media-query breakpoints for new layouts with at-breakpoint, or create your own math using Susy’s array of grid helpers. Build a one-off site in minutes, or create your own scalable grid library for large projects.

Gridiculous

A fully responsive grid boilerplate.

Responsive Grid System

Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn’t hard, you’ve just never used responsive.gs.

Unsemantic

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

Professional CSS-framework

inimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

One% CSS Grid

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you. One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens).

BASE

Built for all devices big and small, base has got you covered.

Tutorials and techniques

Developing a responsive, Retina-friendly site

Adaptive Blog Theme: From Photoshop to WordPress

Perfecting the Stylesheet: Common Errors Made by CSS Beginners

Build a Responsive, Filterable Portfolio, with CSS3 Twists

Building A Better Responsive Website

CSS Media Queries & Using Available Space

Convert a Menu to a Dropdown for Small Screens

How To Create A Responsive Navigation

Responsive Design in 3 Steps

How to Create a Responsive Website in About 15 Minutes

Scalable Navigation Patterns in Responsive Web Design

Tools

THE RESPONSIVE CALCULATOR

RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.

Responsivepx

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

VIEWPORT RESIZER

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Graphene

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite.

Paperkit

With Paperkit you can easily generate online the exact type of graph paper (grid paper) that you need. Use the toolbar to adjust the settings. You have full control over spacing between grid lines, margin size, stroke color and width as well as paper size. A live preview will help you evaluate your design. There are five formats available: A4, A3, legal, tabloid and letter. You can use units that you are comfortable with (millimeters or inches).

Web Development Project Estimator

The Web Development Project Estimator is a simple tool that allows web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project.

SassMe

Visualize SASS color functions in real-time without compiling.

CSS BEAUTIFIER

It Beautifies your css automatically so that it is consistent and easy to read.

BROWSERHACKS

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.