A list of open source front-end tools and resources for web designers and developers.
- Frameworks
- Themes
- HTML preprocessor
- CSS preprocessor
- JavaScript preprocessor
- Sass framework
- JavaScript library
- Node.js feature module
- Vanilla JavaScript plugins
- jQuery plugins
- CSS
- 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
- 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. |
| 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. |
| 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. |
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. |
| 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. |
| 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. |
jQuery plugins
| Name | Description |
|---|---|
| Formstone - Background | A jQuery plugin for full-frame image and video backgrounds. |
| Bigfoot.js | A jQuery plugin for empowering footnotes. |
| 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. |
| Name | Description |
|---|---|
| Animate.css | A cross-browser library of CSS animations. |
| 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 |
| 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. |
| 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 |
|---|---|
| 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. |
| 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. |
| 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. |
| 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. |
| Name | Description |
|---|---|
| Can I Use | Check the browser compatibility of CSS3 and HTML5 properties. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| Name | Description |
|---|---|
| Awesome | A curated list of awesome lists. |
| Bootstrap Resources | A comprehensive list of Bootstrap and related resources. |
| 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. |
| 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. |