Web development resources
A list of open source front-end tools and resources for web designers and developers.
Frameworks
Mobile Web apps frameworks
Front-end components
Themes
HTML preprocessor
CSS preprocessor
JavaScript preprocessor
Sass framework
JavaScript library
Node.js feature module
Vanilla JavaScript plugins
jQuery plugins
CSS
SVG, PNG, or Font icons
HTML forms
Web tools
CDN library
Browser compatibility wiki
Responsiveness testing tools
Performance testing tools
Image placeholder
Mockup placeholder
Website icons for browsers
Free inspirational snippets and tutorials
CSS tutorials
Infographics
Design inspiration
List of lists of lists
Name
Description
Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Foundation
The most advanced responsive front-end framework in the world.
-
-
Base
A Rock Solid, Responsive HTML/CSS Framework.
Basscss
Low-level CSS toolkit.
Bulma
A modern CSS framework based on Flexbox.
Concise Framework
A lightweight front-end framework that provides a number of great features without the bloat.
Cardinal
Cardinal is a modular, "mobile-first" CSS framework built with performance and scalability in mind.
Furtive CSS
A forward-thinking, CSS micro-framework.
HTML5 Boilerplate
The web's most popular front-end template.
Juiced
a Flexbox CSS Framework.
Material Design Lite
An implementation of Material Design components in vanilla CSS, JS, and HTML
Materialize
A modern responsive front-end framework based on Material Design.
Photon
The fastest way to build beautiful Electron apps using simple HTML and CSS.
Pure
A set of small, responsive CSS modules that you can use in every web project.
Responsive
A powerful, accessible, developer friendly framework for building responsive websites.
Semantic UI
A development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Skel
A lightweight responsive framework for the www .
Skeleton
A dead simple, responsive boilerplate.
UIkit
A lightweight and modular front-end framework for developing fast and powerful web interfaces.
Mobile Web apps frameworks
Name
Description
Onsen UI
The most beautiful and efficient way to develop HTML5 hybrid and mobile web apps.
Name
Description
HTML5 Blank WordPress Theme
The best HTML5 WordPress boilerplate theme, noted by Adobe, Smashing Mag, .NET mag.
HTML5 UP!
Responsive HTML5 and CSS3 site templates.
Start Bootstrap
A library of free to download Bootstrap themes and templates.
Name
Description
Haml
HTML abstraction markup language
Markdown
A text-to-HTML conversion tool for web writers.
Slim
A lightweight templating engine.
Jade
Node template engine.
Name
Description
LESS
Node CSS pre-processor
SCSS / Sass
The most mature, stable, and powerful professional grade CSS extension language in the world.
Stylus
Expressive, dynamic, robust, feature-rich CSS preprocessor.
PostCSS
A tool for transforming CSS with JavaScript.
Name
Description
CoffeeScript
A little language that compiles into JavaScript.
LiveScript
A language which compiles to JavaScript.
TypeScript
JavaScript that scales.
Babel
The compiler for writing next generation JavaScript.
Name
Description
Bourbon
A simple and lightweight mixin library for Sass.
Compass
An open-source CSS Authoring Framework.
Susy
Custom layout engine for Sass.
Name
Description
jQuery
The write less, do more, JavaScript library.
Modernizr
Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
Name
Description
Bower
A package manager for the web
Browserify
browser-side require()
the node way
Grunt
The JavaScript task runner
Gulp
The streaming build system
npm
The package manager for JavaScript.
Webpack
Packs CommonJs/AMD modules for the browser.
Name
Description
Anchor.js
Add deep anchor links to your docs.
Chart.js
Simple, clean and engaging charts for designers and developers.
Chartist.js
Simple responsive charts.
Velocity.js
Accelerated JavaScript animation.
Favico.js
Make use of your favicon with badges, images or videos.
FluidVids.js
Fluid width (responsive) videos module, 1KB, custom players, dynamic elements/XHR support.
Headroom.js
Hide your header until you need it.
Holder.js
Client side image placeholders.
lazysizes.js
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more.
lunr.js
Simple full-text search in your browser.
NProgress.js
A nanoscopic progress bar.
react-burger-menu
An off-canvas sidebar React component with a collection of effects and styles using CSS transitions and SVG path animations.
Responsive nav
Responsive navigation plugin without library dependencies and with fast touch screen support.
Slideout.js
A touch slideout navigation menu for your mobile web apps.
Smartcrop.js
Content aware image cropping.
Tabella.js
Responsive table.
Tether
A JavaScript library for efficiently making an absolutely positioned element stay next to another element on the page.
Tippy.js
A lightweight, vanilla JavaScript tooltip library.
Tooltip.js
Tooltip.js is a Javascript and CSS library for creating styleable tooltips.
Typeset
A typographic pre-processor for your HTML which uses zero client-side JavaScript.
ZeroClipboard.js
An easy way to copy text to the clipboard.
Name
Description
Formstone - Background
A jQuery plugin for full-frame image and video backgrounds.
Bigfoot.js
A jQuery plugin for empowering footnotes.
bigSlide.js
A tiny slide panel navigation jQuery plugin with big dreams.
FitVids.js
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
fullPage.js
One page scroll sections site plugin.
Lazy Load
Lazy Load is delays loading of images in long web pages.
Lity
A ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box.
Name
Description
Animate.css
A cross-browser library of CSS animations.
CSSgram
A tiny (<1kb gzipped!)
library for recreating Instagram filters with CSS filters and blend modes.
CSS Filters Playground
Play with the new CSS3 Filter Effects.
EQCSS
A spec for a container-style element query syntax in CSS.
Flex Grid
A grid system based on the flex display property.
Mastering the :nth-child
CSS3 pseudo classes and :nth-child ranges.
Eric Meyer CSS reset
Eric Meyer CSS reset
Graaf
Pure CSS grid overlays for designing.
Hamburgers
Tasty CSS-animated Hamburgers.
Mueller Grid System
A modular grid system for responsive/adaptive and non–responsive layouts, based on Compass.
Normalize.css
A modern, HTML5-ready alternative to CSS resets.
RTLCSS
Framework for converting Left-To-Right (LTR) Cascading Style Sheets(CSS) to Right-To-Left (RTL).
Toast
Insane, no-nonsense CSS grid.
Name
Description
Chartspree
Make charts in seconds.
Formspree
Functional HTML forms for static sites.
Gridspree
Display your spreadsheet data however you like right on your static site with Google Spreadsheet.
JotForm
Form builder
WTF, forms?
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.
Wufoo
Online form builder with cloud storage database.
Name
Description
AutoDraw
Fast drawing for everyone. AutoDraw pairs machine learning with drawings from talented artists to help you draw stuff fast.
Binary Translator
Free binary code translator, translate binary code to text.
Color Hunt
Curated collection of beautiful colors, updated daily.
CSS3 Generator
CSS3 classics
CSSmatic
The ultimate CSS tools for web designers.
Flat Colors
Browse over 11,000 flat colors in over 2,300 flat color palettes. Copy them or download the .ACO
file for use in Photoshop.
SRI Hash Generator
Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.
Superdomain
Check domain availability.
Create LaTeX tables online
Quickly create even complex LaTeX tables with online generator - cells merging is supported together with borders editing.
uiGradients
A handpicked collection of beautiful colour gradients for designers and developers.
Unminify
Free online tool to unminify (unpack, deobfuscate) JavaScript, CSS and HTML code, making it readable and pretty.
Web Code Tools
CSS3, HTML5, Microdata, Open Graph and Twitter Card Generators
What's My Screen Resolution
An Online tool to check screen resolution of any display device.
WebGradients
Free collection of background gradients that you can use as content backdrops in any part of your website.
Name
Description
BootstrapCDN
The recommended CDN for Bootstrap, Font Awesome and Bootswatch.
cdnjs
The free and open source CDN for web related libraries to speed up your website!
CoralCDN
A free and open content distribution network based around peer-to-peer technologies, comprised of a world-wide network of web proxies and nameservers.
FontCDN
A search tool for Google web fonts.
Google Fonts
Hundreds of free, open-source fonts optimized for the web.
Google Hosted Libraries
A stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.
jsDelivr
A free super-fast CDN for developers and webmasters.
Microsoft Ajax CDN
Popular third party JavaScript libraries such as jQuery and enables you to easily add them to your Web applications.
Open Source Software CDN
Open source software CDN by MaxCDN.
Yandex CDN
Service hosts JavaScript libraries that provides site developers with access to the Yandex content delivery (CDN) and can handle a variety of open source JavaScript-frameworks and libraries from Yandex servers.
Browser compatibility wiki
Name
Description
Can I Use
Check the browser compatibility of CSS3 and HTML5 properties.
Responsiveness testing tools
Name
Description
Am I Responsive?
See how your site looks on desktop, laptop, ipad & iphone.
BrowserStack
Use the browser device tester and download Internet Explorer images for your VM.
Deviceponsive
Show a quick preview of your website's responsive to different device resolutions like Macbook, iPad, or iPhone. share this preview with your client.
Performance testing tools
Name
Description
Google PageSpeed Tools
The PageSpeed tools analyze and optimize your site following web best practices.
WebPagetest
Run a free website speed test from multiple locations around the globe using real browsers and at real consumer connection speeds.
Website speed test
Use this free Website Speed Test to analyze the load speed of your websites, and learn how to make them faster.
Name
Description
lorempixel
Placeholder images for every case.
Placehold.it
A quick and simple image placeholder service.
Name
Description
Placeit
The best one to drop your project in any device context.
Website icons for browsers
Free inspirational snippets and tutorials
Name
Description
CodeMyUI
Handpicked code snippets you can use in your web projects. Find web design inspiration with code samples.
CodyHouse
A free library of HTML, CSS, JS nuggets.
Codrops
Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities.
Moving to HTTPS
Migrate from HTTP to HTTPS with ease.
NavNav
A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web.
Papersizes.io - The best resource for Paper Sizes
A simple, free resource for finding the international standards for paper sizes in metric and imperial.
Scotch
A web development blog discussing all things programming, development, web and life.
Smashing Magazine
An online magazine for professional Web designers and developers, with a focus on useful techniques, best practices and valuable resources.
W3Schools Online Web Tutorials
The world's largest web developer site.
Name
Description
Home Office Posters
Home Office repository of posters covering different topics - research, access needs, accessibility, design.