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
Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.
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.
