Skip to main content

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

222
GitHub Stars
352
Curated Resources
37
Categories
4 hours ago
Last Refreshed
WikiFrameworksMobile Web apps frameworksFront-end componentsHTML5 themesHTML preprocessorCSS preprocessorJavaScript preprocessorSass frameworksNode.js feature module and bundlerJavaScript libraryVanilla JavaScript pluginsjQuery pluginsJavaScript compressor toolkitCSS librarySVG, PNG, and Font icons libraryPNG, JPEG, GIF compressor toolkitHTML formsWeb toolsCDN libraryBrowser compatibility wikiResponsiveness testing toolsPerformance testing toolsPlaceholderMockup placeholderWebsite icons for browsersFree inspirational snippets and tutorialsCSS referenceCSS tutorialsInfographicsDesign inspirationThe type systemWebmaster toolsPackage managerJamstackCheatSheet😎List of lists of lists

Use this list with your AI agent

Add the Context Awesome MCP server to Claude, Cursor, or any MCP client, then ask:

"Show me list of lists of lists resources from web-development-resources"

Installation instructions →

What's inside

List of lists of lists

Web tools

  • Abstract API's

    A suite of simple yet powerful utility API's for developers, such as email validation, user avatar generator, image compression, and more. All API's have a free version.

  • AutoDraw

    Fast drawing for everyone. AutoDraw pairs machine learning with drawings from talented artists to help you draw stuff fast.

  • Base16

    An architecture for building themes based on carefully chosen syntax highlighting using a base of sixteen colors.

  • Binary Translator

    Free binary code translator, translate binary code to text.

  • Bootstrap 5 Cheat Sheet

    An interactive list of Bootstrap 5 classes, variables, and mixins.

  • Color Hex Color Codes

    Color-hex gives information about colors including color models (RGB,HSL,HSV and CMYK), Triadic colors, monochromatic colors and analogous colors calculated in color page.

Vanilla JavaScript plugins

  • (a) Darkmode.jsDark Mode Switch

    🌓 Add a dark-mode / night-mode to your website in a few seconds

  • Anchor.js

    Add deep anchor links to your docs.

  • Anime.js

    Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

  • Chartist.js

    Simple responsive charts.

  • Chart.js

    Simple, clean and engaging charts for designers and developers.

  • Favico.js

    Make use of your favicon with badges, images or videos.

SVG, PNG, and Font icons library

Responsiveness testing tools

  • 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.

CSS library

  • Animate.css

    A cross-browser library of CSS animations.

  • Box-shadows.css

    Mianly based on box shadows

  • CSS Filters Playground

    Play with the new CSS3 Filter Effects.

  • CSSgram

    A tiny library for recreating Instagram filters with CSS filters and blend modes.

  • CSSWand

    It’s really just a handful of simple, pure CSS-based animation library

  • EQCSS

    A spec for a container-style element query syntax in CSS.

Showing a sample of 352 resources. View the full list on GitHub →