Web development resources

A list of open source front-end tools and resources for web designers and developers.

Table of contents

• 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

---

Frameworks

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.

Front-end components

Name	Description
Formstone	Formstone is a collection of front end components.
Le Wagon UI components	-

Themes

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.

HTML preprocessor

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.

CSS preprocessor

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.

JavaScript preprocessor

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.

Sass frameworks

Name	Description
Bourbon	A simple and lightweight mixin library for Sass.
Compass	An open-source CSS Authoring Framework.
Susy	Custom layout engine for Sass.

JavaScript library

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.

Node.js feature module

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.

Vanilla JavaScript plugins

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 ty­po­graphic pre-proces­sor for your HTML which uses zero client-side JavaScript.
ZeroClipboard.js	An easy way to copy text to the clipboard.

jQuery plugins

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.

CSS

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.

SVG, PNG, or Font icons

Name	Description
How to work with SVG icons	-
Align SVG Icons to Text and Say Goodbye to Font Icons	-
Creative Commons license icons	Download SVG, EPS, and PNG Creative Commons license icons to use in your site.
Flaticon	The largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats.
Font Awesome	The iconic font and CSS toolkit.
Font-Awesome-SVG-PNG	Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator.
FontForge	A free and open source font editor brought to you by a community of fellow type lovers.
Fontello	An easy way to create a custom icon font for your site. Select images from our large collection, and make a webfont pack with one click.
IcoMoon	IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.
Ionicons	The premium icon font for Ionic Framework.
Material Design Icons	View all the Material Design icons and more from the community.
The Big List of Flat Icons & Icon Fonts by CSS-Triks	There are many such roundups. This one is mine.
Noun Project - Icons for everything	Nearly a million curated icons, created by a global community.
Octicons	A scalable icon font handcrafted with <3 by GitHub.
Perfect Icons	The easiest way to create resolution independent social icons.
Simple Icons	Free SVG icons for popular brands.
svg-icon	An ultimate SVG icons collection DONE RIGHT.
SVG Icons	Ready to use SVG icons for the web.
Vector Icons Roundup	A side-by-side comparison between popular icon fonts.
We Love Icon Fonts	A free & open source icon fonts hosting service for testing purposes.

HTML forms

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.

Web tools

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.

CDN library

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.

Image placeholder

Name	Description
lorempixel	Placeholder images for every case.
Placehold.it	A quick and simple image placeholder service.

Mockup placeholder

Name	Description
Placeit	The best one to drop your project in any device context.

Website icons for browsers

Name	Description
Favicon Generator	Online Favicon Generator. For real.
Build My Pinned Site	Online tool to create a custom Windows Start Screen tile for your site in less than a minute.
Pinned site enhancements on Windows / Creating custom tiles for IE11 websites	Setting up live tiles and notifications for Windows
Configuring Web Applications for Apple	Conceptual information and techniques on creating effective web content for Safari and WebKit using HTML and CSS.
Installable Web Apps with the Web App Manifest in Chrome for Android / Manifest File Format	Use the web app manifest to control how your web app launches.

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.

CSS tutorials

Name	Description
Browser safe fonts	Common fonts to all versions of Windows & Mac equivalents.
CSS Font Stack	A complete collection of web safe CSS font stacks.
CSS outline property - outline: none and outline: 0	The CSS outline property is an accessibility requirement, yet often abused by many web designers, why do they do it?
CSS Selector Reference	In CSS, selectors are patterns used to select the element(s) you want to style.
CSS Specificity	CSS Specificity. CSS specificity assigns a numerical representation of a selector in order to compare in case there are style conflicts. Web poster displays CSS specificity with icons from Stanley Kubrick's 'The Shining' film.
Grid by Example	Everything you need to learn CSS Grid Layout.
Grid Garden	A game for learning CSS grid.
Griddy	Learn the CSS Grid!
Hash tag links that don't headbutt the browser window	CSS-Tricks post by Chris Coyier.
Learn CSS Grid	A guide to learning CSS grid.
Learn CSS Grid	A lot of fantastic resources out there by Jen Simmons.
Learn CSS Layout	This site teaches the CSS fundamentals that are used in any website's layout.
Overriding the default text selection color with CSS	CSS-Tricks post by Chris Coyier.
Smarter link underlines for every website	Post by Adam Schwartz.
What is the browser-default background color when selecting text?	Answer on Stack Overflow
Why I switched from LESS to Sass?	Post by Hugo Giraudel.

Infographics

Name	Description
Home Office Posters	Home Office repository of posters covering different topics - research, access needs, accessibility, design.

Design inspiration

Name
Admire The Web
Awwwards
Behance
Best Website Gallery
CodePen
CSS Gallery
CSS Winner
Design Fridge
DeviantArt
Dribble
Favourite Website Awards (FWA)
GoodUI
Google Design
html inspiration
Inspiration for Search UI Effects
One Page Love
Nice One I Like
Siiimple
The Best Designs
Very nice sites
Web Design Inspirations
webdesign - Tumblr Search

List of lists of lists

Name	Description
Awesome	A curated list of awesome lists.
Bootstrap Resources	A comprehensive list of Bootstrap and related resources.
GitHub - Open source showcases	Browse popular repositories based on the topic that interests you most.
JavaScript Plugins Repository	Vanilla JS tools for writing powerful web applications without jQuery.
Javascript Territory	JSter Javascript catalog.
JavaScripting	The database of JavaScript libraries, frameworks, and plugins.
Libraries.io	The Open Source Discovery Service.
List of HTTP status codes	A list of Hypertext Transfer Protocol (HTTP) response status codes.
Stock photos that don't suck	A list of places to find the best free stock photos.
StaticGen	Top open-source static site generators list.
Unheap	A tidy repository of jQuery plugins classified in categories.