In this overview you will find the most useful resources and tutorials on modern web development. Check them out!
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.
The most advanced responsive front-end framework in the world.
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
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.
A fully responsive grid boilerplate.
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 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.
inimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.
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).
Built for all devices big and small, base has got you covered.
Tutorials and techniques
RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.
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 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 is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite.
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).
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.
Visualize SASS color functions in real-time without compiling.
It Beautifies your css automatically so that it is consistent and easy to read.