CLOSE
CLOSE
    • Web Development Tools (134 submissions)

      Multiple purpose web development tools, ideal for improving daily workflow and adding extra functions to your projects.

      • Modaal: Accessible Modal Plugin

        Modaal is a plugin to create accessible dialog windows that aims a mix of quality, flexibility, and accessibility that can be used in a wide range of projects.

      • Jam API: Websites API Access

        Jam API is a service to generate JSON accessible data using CSS selectors from any website, creating extra options for developers who want to interact with your site.

      • Vue.js: Web App JavaScript Framework

        A JavaScript web application framework that helps you compose your applications with decoupled and reusable components perfect for modern web interfaces, easy to install via NPM or Bower.

      • Google Chrome Web Development Tools

        A set of web developer tools for authoring and debugging into Google Chrome, providing to developers access into the internals of the browser and their web app, making it perfect for testing and solving issues that will help with obtaining the best code.

      • Caddy: Lightweight HTTP Web Server

        An alternative web server easy to configure and use, supporting http/2, IPv6, markdown, web sockets, fastCGI, templates and more, it is available for multiple platforms, Mac, Linux, BSD, and Android among them.

      • Atomic Docs: Front-end Component Manager Tool...

        Atomic Docs is a fantastic front-end toolkit and a SASS component manager, built in PHP, and ready to add to your local environment, it will let you manage all your components in an easy way using a clean GUI interface.

      • React: JavaScript UI Library

        React is a flexible JavaScript library for building user interfaces and is often used as the V in the MVC model, it can render on the server using Node, and can also power native apps using a new feature called React Native.

      • Polymer: JavaScript Web Components Library

        Polymer is a JavaScript software library used to define and style web components, implementing modern design principles to create custom HTML elements, it has reached version 1.0, and has begun to gain increasing recognition from the web development community.

      • DeckHub: GitHub Desktop Client

        A desktop client for GitHub with a stunning TweetDeck style, keeping you up-to-date with notifications, featuring a multi-user platform, custom columns, and mixing of different repos, users and organizations.

      • Codetasty: Powerful Cloud IDE

        An IDE in the cloud that includes all the features of a desktop one, it comprises several language tools, a file explorer, a terminal, and extensions. It is perfect for collaboration, sharing code with friends or colleagues.

      • Kite: Productive Development Environment Plug...

        An amazing code editors plugin which provides you with a floating dock-sidebar that aids your coding at all times by showcasing suggestions of functions and methods as you type organized by popularity. You can also see documentation on-the-go, examples, and even highlights syntax errors thus boosting your workflow.

      • Jsmp.io: Browser Package Management

        A JavaScript package manager that supports installing any module format from any registry, with GitHub and npm currently provided with flat versioned dependency management.

      • Popper.js: Useful Web Tooltips Javascript Lib...

        Popper.js is a useful library that aids in creating poppers in web development. Some featuring custom boundaries, GPU acceleration, offsets, and modifiers make of it an ideal tool.

      • WPDK: WordPress Development Kit PHP Framework

        A WordPress PHP framework aimed to make productive, solid and easy to maintain the creation of plugins and themes. This Development Kit includes downloadable several samples on their website.

      • Herbert: WordPress Plugin Framework

        Herbert is an effort to standardise and structure the process of building WordPress plugins, instead of the unorganised current approach, saving time to developers and making work in teams easier.

      • Stellar: Easy Scaffolding LESS Library

        A LESS library for easy and fast web app scaffolding, arranging in rows and columns, responsive design, and few lines of code. Learn how to use it with samples and tasks in their own website.

      • Superplaceholder.js: Input Placeholders Libra...

        A JavaScript library to carry your input placeholders to life showcasing multiple instructions in a single input placeholder, animating, providing extra information, and examples to fill them.

      • Mercury: Modular Front-end JavaScript Framewo...

        A Javascript front-end framework which aims to be modular, making it possible to combine along with other frameworks, written by Raynos who has created several other useful libraries and it seems to have got lots of interest from the community.

      • DesktopServer: Local WordPress Projects

        Create a locally installed WordPress site in seconds on Windows or Mac. Easy custom configuration with blueprints and tools to import or deploy your live website.

      • Rikulo: Web & Mobile HTML5 UI Framework

        Rikulo is a UI Framework in Dart language which allows code to be run at the client and server into the UI, is aimed to provide a structured model for cross-platform web and mobile programming using HTML5. Also provides capabilities to build native mobile applications.

      • Substance: Web Based Content Editing

        Substance is a JavaScript Library for web-based content editing platform, also can be used to build a sheets editor, web content, a notepad application and many more. Document authoring can be done in the browser, in a simpler and more collaborative way.

      • Awesome MongoDB Resources Collection

        A complete list of MongoDB resources with full documentation, libraries for several programming languages, many tools like Big data and Deployment, among others including some examples of applications ready to be used.

      • GitHub Importer: Migrate Your Code

        Github Importer allows you to migrate your code and repositories from Subversion, Mercurial, Team Foundation Server, or any other Git repository directly into GitHub.

      • Phoenix: Productivity Web Framework

        Phoenix is a productive web framework that does not compromise speed and maintainability by implementing the server-side MVC pattern and many of its components and concepts similar to the ones in other web frameworks like Ruby on Rails or Python's Django.

      • Visual Studio Code: Microsoft Debugging Code ...

        An open source code editor developed by Microsoft for Windows, Linux and OS X, it's redefined and optimized for building and debugging modern web and cloud applications. VS Code combines the streamlined UI of a modern editor with rich code assistance and navigation, and an integrated debugging experience, and has hundreds of extensions.

      • Bootstrap Boutique: Bootsrap Framework Librar...

        Hand picked controls, design elements and widgets for Bootstrap framework. Each element comes with a clear example for easy copy and use. Visit their GitHub profile for repositories.

      • Simulacra.js: One-way Data Binding

        Simulacra.js makes the DOM react to changes in data so as to map those changes to the DOM by adding and removing elements after invoking mutator functions, which by default, assign plain text and form input values.

      • GrapesJS: Online Web Template Editor

        GrapeJS is an open source online tool that allows you to edit your website templates counting on a neatly crafted minimal UI toolkit for style, layers, code, and asset management, as well as local and remote storage, and default built-in commands.

      • imba: JavaScript Compiled Language

        Imba is a programming language development for the web that compiles to highly performant and readable JavaScript supports for defining, extending, subclassing, instantiating and rendering DOM nodes.

      • Touch Pressure Intensity Interactions

        Pressure is a JavaScript library that allows you to handle certain parameters on the web which values vary depending on the pressure you apply on the touch screen on new Mac and iPhone devices.

      • JavaScript list: one JS tip every day!

        Enjoy this short and useful resource to find JavaScript tips every day in order to improve your code writing. If you want to enrich the list you can also make your own suggestions!

      • Ally.js: Simpler Accessibility JavaScript Lib...

        A JavaScript library that simplifies certain accessibility features, functions, and behaviors by providing certain standard functions that the web platform should've provided itself for JavaScript applications to be made accessible more easily.

      • OS.js : JavaScript Cloud & Web Desktop P...

        OS.js is a completely free and open-source JavaScript web desktop implementation for your browser with a fully-fledged window manager, Application APIs, GUI toolkits and filesystem abstraction. Works in any modern browser and can be deployed on any platform using Node or PHP.

      • Codepad: Social Ranked Snippets Site

        Codepad is a website for social ranked snippets developed in plenty of languages with which you can create collections, do version control, hire or be hired, search and follow, and more.

      • Appolo: Jekyll Plugins & Themes

        Appolo is a set of plugins and themes for Jekyll to create a static portfolio website for app developers to showcase their work. It has a minimalistic style and responsive design.

      • Iceberg: Front-End Boilerplate

        Iceberg is a front-end boilerplate to help you start your web projects from scratch in an easier way, so you don´t need to re-create everything every time.You can download it or install it via Bower.

      • CLImate: PHP Terminal Customizer

        CLImate allows you to easily output colored text, special formatting, and even animations. It makes output to the terminal clearer and debugging a lot simpler.

      • Awesome Development Interviews Collection

        An awesome collection of interviews about development regarding topics of several programming languages, databases technologies, operative systems, algorithms, coding exercises, and more.

      • OpenCampus: Professional Certifications Resou...

        OpenCampus is the biggest resource library regarding professional certifications for PMP, CAMP, ITIL Foundation, Big Data Developer, Hadoop Administrator, Six Sigma belts, Microsoft Excel, and more.

      • Lineman: Client-Side-Focused Utility

        Lineman is a command line utility that allows you to focus in the client-side part of applications development and also provides you with the most relevant server-side application development features.

      • JSONView: Mozilla’s On-browser JSON Vie...

        A Mozilla extension for visualizing JSON files directly on the browser nicely formatted instead of prompting to download it or rendering it as text featuring collapsible array and object sections.

      • Auth0: Angular 2 Authentication Library

        A service that abstracts how users authenticate to applications which can be using custom credentials, social network logins, enterprise directories or password-less systems.

      • Curated UI Design & Development Feed

        A curated feed of articles and resources regarding web applications UI design, and front-end, back-end and full-stack development. You'll find tutorials, tools, inspiration, and more.

      • BackstopJS: CSS Responsive Debugger

        BackstopJS takes screenshots of your website or web app in several sizes in order to find unwanted CSS regressions by reporting which and how many screen sizes failed.

      • Scrapy: A Powerful Web Crawling Framework

        Scrapy is a cross-platform and collaborative framework open-source developed in Python for extracting relevant data from websites.

      • Flask Micro: IDE Code-editor WordPress Plugin

        Flask micro is a WordPress plugin that implements CodeFlask.js as a shortcode for IDE code edition.

      • Telepat: Real-time Back-end Data Sync

        Telepat is an open source back-end stack that allows you to provide your clients in real-time with information and updates as well as flexible deployment and simple scaling.

      • Real-time Web Communication Demos

        WebRTC is an open source repository that consists of demos and experiments on real-time communication for web technologies.

      • Documentation-focused Curated Resources

        The Web Field Manual is an online curated list of resources focused on documenting only the best knowledge for designing experiences and interfaces on the web.

      • Fly: New Generator Build System

        Fly is a modern co-routines, generators and promises based built system for Node.js. It features concurrent tasks, robust error handling, cascading tasks and a simple API.

      • Lattice: Server Workload Manager

        Lattice manages containerized workloads on clusters which consist of a number of virtual machines that run containers, and a brain that monitors the cells.

      • UnCSS: Unused Styles Remover

        UnCSS is a tool for removing unused CSS code from your stylesheets that works across multiple files supporting JavaScript injected CSS.

      • Awesome Ruby Gems Collections

        A huge collection of ruby on rails gems classified by category and listed in GitHub by its author hothero.

      • Flarum: Modern Forum Software

        Flarum is a next-generation forum software that offers several UX features such as real-time discussions, moderation tools, touch optimization, and much more.

      • VueStrap: JavaScript-built Bootstrap Componen...

        VueStrap is a kit of Bootstrap components built with Vue.js completely independent of jQuery, bootstrap.js, or any other 3rd party plugin.

      • HTML5Sites: Curated HTML5 Sites Gallery

        A curated gallery that contains a collection of websites regarding HTML5. They are social ranked and allows submissions of new sites.

      • cssnano: A PostCSS-based Modular Minifier

        CSSnano is a modular minifier based on PostCSS plugins. It takes formatted CSS and optimizes it, ensuring that the final result is as small as possible for a production environment.

      • Bonsai: Freelancers Contracts Management

        Bonsai is an online web tool for freelancers to be able to generate secure contracts that feature eSignatures and integrated escrow.

      • Otto: Cloud Platform Web Development Environm...

        Otto is a cloud platform that automatically builds a development environment tailored specifically for your application and allows you to control it with a single consistent workflow in order to maximize the development productivity.

      • GoTTY: Terminal As Web Application

        GoTTY is a simple command line tool that turns your Command Line Interface tools into web applications. This tool was developed by Iwasaki Yudai and is available as an open-source project.

      • CSSfmt: A CSS Formatting Tool

        CSSfmt is a tool that automatically formats CSS and SCSS source code. It can format Vanilla CSS, SCSS syntax, and nested selectors syntax like SCSS, Less, Stylus and processor using post CSS-nested.

      • Eager.io: CSS & JavaScript Web App Store

        Eager is an open source built web app store initiated by Adam Schwartz and Zack Bloom that allows you adding to your website several web apps in CSS and JavaScript only by indicating where you want it. Some of the most used apps are photo galleries, latest tweets section, add a comment section and fancy underliner.

      • Device Metrics: Devices Screen Sizes Online T...

        A nice collection made by Google with every device's metrics like screen size, the aspect ratio, width, height and pixel density. It's a great tool for designers and developers to know the dimensions of the most relevant devices. This is a public list that can be used freely.

      • Kirki: WordPress Websites Customizing Toolkit

        Kirki is a website customizing toolkit for WordPress. It extends the customizer functionality. It makes it easier for everyone to create beautiful and meaningful websites. It is licensed under the GNU General Public License.

      • Nuclide: Unified Web & App Development I...

        Nuclide is an open source IDE for React for creating native, web, and mobile apps, made as a suite of packages on that based on Atom to provide hackability and the increasing support. It provides auto-completion and inline error highlighting, a JavaScript type checker and more. It was made by Facebook.

      • reactCSS: CSS Classes into React.js JavaScrip...

        A JavaScript tool that allows the inclusion of CSS classes into ReactJS. It allows class-based data, you can keep HTML and components styles together and easily attach the classes to the code.

      • Sublime Text 3 Material Design Theme

        A beautiful theme for Sublime Text 3 that has considerable improvements regarding functionality and also design. It brings the Material Design visual language into Sublime, being really easy to install. You can also change from dark to white and use visual cues to save time. It was created by Mattia Astorino.

      • Scut: Frontend Sass Utilities Pack

        Scut is a set of Sass utilities for improving the implementations of common style-code patterns. It takes away the pain of repeating code across a website; it makes things easy, helping you organizing your rules, and implementing best practices.

      • Vorlon.JS: JavaScript Debugging and Testing T...

        Vorlon is an open source, extensible, platform-agnostic tool for debugging and testing your JavaScript remotely. It was created with the help of node.js and socket.io. It is easy to setup even as a desktop software for Windows and Mac, and it is extensible

      • xto6: Next-generation JavaScript Modernizer

        xto6 is a nice library made in JavaScript that keeps your JavaScript code clean and readable. Among its features, you can find function/prototype to class, string concatenation to template string and anonymous callbacks to arrow functions.

      • lightgl.js: WebGL Apps Prototyping JavaScript...

        A library to quickly prototype WebGL applications made in JavaScript. It re-implements OpenGL's modelview/projection matrix stack for similar functionality, making it perfect for creating cool 3D data showcases and visually appealing components.

      • CSS Dig: CSS Cheking Chrome Extension

        CSS Dig is an extension for Google Chrome that helps you analysing the CSS on your website. It shows you the CSS properties of your site, their frequency of use and variation. Also, it shows you the inconsistencies so the end user doesn't get confused.

      • Marx: Multipurpose CSS Stylesheet

        Marx is a CSS Stylesheet for developing simple web projects. It is not a framework, but a set of rules in CSS for easy styling. With it, all browsers render consistently thanks to Sanitize.css, was built with SASS, it's responsive and mobile friendly, has clean and beautiful photography and more features.

      • HTML Symbols, Entities and Codes

        A cool online collection of arrows and other symbols available as code. You can select among many types of arrows, and symbols like copyright, at, registered trademark and many more. After you're done, you can copy the Hex code, HTML ​or Unicode to use it on your projects.

      • Radium: Component Styling React Library

        Radium is a collection of tools for React elements' inline styles management. With it, you have powerful styling capabilities without needing to use CSS. It allows you to browse state styles to support and use media queries as well. It is a creation from Formidable Labs.

      • Browser Typeface Rendering JavaScript Engine

        Since fonts will look heavier on OS X and iOS than on other platforms, this useful JavaScript engine makes a specific typeface look nice in mobile devices, just as they look cool in desktop computers.

      • Predawn: Sublime and Atom Interface & Sy...

        Predawn is a set of styling features added to the Sublime code editor and also for Atom. The theme adds several improvements, like folder navigation and improved color distinction among elements, and more.

      • Apple Watch Online App Creator

        Thinkapps is an online tool for creating Apple Watch prototypes without the need of code. It helps you setting up the elements necessary to deliver a complete app, so the developers in your team have a clearer picture of what to do.

      • url.js: URL Manipulation JavaScript Library

        url.js is a lightweight library built with JavaScript to manipulate the page URL. It uses various parameters to find the name and encoding results, it can parse a string as querystring, stringifies a query object, and more. This library is licensed under the MIT license.

      • Cayley: Open Source Graph Database

        Cayley is an open-source graph database inspired by Freebase, using Google's Knowledge Graph. The idea of this is to help developers analysing Linked Data and graph-shaped data in semantic websites, social networks and more. It was written in Go, and it has a complete API, a built-in query editor and visualizer, modular design and it's fast. It was created by Google.

      • Google Prediction API: Predictive Analysis Bu...

        A tool for analysing data and make predictions based on Google's algorithms. It uses a very nice interface, helping you predict future trends using historical data, detect spam and recommend products. It is fast and reliable, has cloud integration, powerful development tools, and more. You can use it for free for a limited time.

      • cmder: Portable Console Windows Emulator

        cmder is a portable console emulator for Windows. It has a Monokai color scheme and a custom prompt layout, and it's a complete package that you can carry anywhere, in a USB drive or in the cloud, so you don't lose your settings and overall progress. It was developed by Samuel Vasko.

      • Online Microdata Snippets Generator

        An online microdata generator that helps generating rich snippets and graphs supported by Google. It supports a full list of structured data schemes, and it lets you aggregate offers, reviews, articles, business, events and contact info, software apps and more.

      • CSS Div & Text Centering Tool

        A simple online tool for centering divs and texts with CSS. You just need to select the content you wanna center, modify the container's size, its alignment and that's it. Finally, download the CSS and include it on your template. It was created by Oliver Zheng.

      • .resizr: CSS Media Queries Testing Online Too...

        .resizr is an online tool for testing any website's media queries to check if it is completely responsive. With it, you just add the URL of the site you wanna test and select the device, mode and other features. There are almost 30 devices to test your site on, and you can use it for free.

      • Open Source Large Files Versioning Github Ext...

        Git Large File Storage is an open source extension that allows you versioning large files. It replaces these large files (like audio and video), including text pointers inside Git, and at the same time stores the contents on remote servers. With it you have more repository space, faster cloning and fetching, access controls and permissions.

      • SaaS, PaaS and IaaS Free Software List

        A list of SaaS, PaaS and IaaS software and offerings with free tiers for developers. It will be a really useful for infrastructure developers, like System Administrators, DevOps Practitioners, and more. The repository grows daily and it's carefully curated. It was created by R.I.Pienaar.

      • APIembed: Multipurpose Code Snippets Generato...

        An online tool for creating auto-generated code snippets in many programming languages for your website, blog or API documentation. With it you can embed your API request, customize your widget, generate the code and then grab the generated result to use it on your website.

      • WPSpeedster: Website Speed Testing Online Too...

        A website with Google PageSpeed test scores for 2500 free themes from the official WordPress theme repository. The tests were executed on the blogs sample page and the home page, both in mobile and desktop environments.

      • Nines: Web Development Performance Tool

        Nines is a web tool that helps developers find critical performance issues while developing. It intends to show developers and designers the impact their changes have on the performance of the site. It shows a bar at the bottom with the page speed, the median, and you can click on them and check more data.

      • Prepros: Multilanguage Programming Compiler

        Prepros is a compelling tool for developers that allows them to compile LESS, Sass, Compass, Stylus, Jade and many more languages thanks to CSS prefixing. You can download it for free and use it on Mac, Windows or Linux machines.

      • osquery: SQL-powered Analytics, Monitoring &#...

        osquery is a complete tool for operating systems made in C++, JavaScript and powered by SQL. It was created by Facebook and its goal is to provide strong and accurate analytics, monitoring and instrumentation. It can be downloaded for free and implemented in any web project.

      • Dust-Me Selectors: Firefox & Opera Code ...

        Dust-Me Selectors is a development tool for Firefox and Opera that scans the CSS code on your website and tells you which selectors are unused. Among its features you can scan any HTML page, add an XML or HTML sitemap and scan pages automatically (Firefox version only).

      • APIs.io: Online API Search Engine

        APIs.io is an experiment that allows you to search APIs on the web. You can implement the search engine, which is also open source, and run it in your own projects. It crawls known APIS.json files, top domains on Alexa and follows include links.

      • Online UX Project Checklist

        The UX Project Checklist is an online tool that helps developers check their process while creating a website, helping them to create a user-friendly and goal-focused website. The tool helps you check if you have accomplished the research, plan, explore, communicate, create, feedback and more stages of the UX process. This tool is free and you can connect it with Google+ to save your progress.

      • Scala: Object Oriented Programming Language

        Scala is a scalable language for creating apps, it is Object-Oriented, supporting advanced component architectures through classes and traits; functional, efficient, integrated seamlessly with Java, future proof and more. It is open source and ready to implement in any project.

      • Screen Sizes: Complete Devices Charactistics ...

        Screen Sizes is a complete table of sizes for every mobile device known. It includes information about the operating system of the device, the physical size, its width, height, the pixel density, aspect ratio, and more. This table is a starter point for any type of design, if you want to implement a creation that reaches more people.

      • Nitrous: Multilanguage Browser IDE

        Nitrous is a complete IDE for your browser that lets you program in Ruby, PHP, Python, Go, NodeJS and other languages. You can synch it with your favorite code editor such as Atom, Sublime Text or Textmate, allowing you to work from anywhere in a shared or private workspace and do it fastly.

      • Tweene: JavaScript Animation Proxy

        Tweene is a JavaScript library proxy that allows you to control and switch between several types of different JS libraries, created for multiple purposes. It is a great way for avoiding so much coding, providing flexibility and stability in the process. It works with GSAP, Velocity.js, Transit (CSS transitions) and jQuery.

      • ngrok: Localhost Secure Tunneling Multiplatfo...

        A tool that creates a tunnel from the public internet to a port on your local machine with download available for several OS platforms. It is useful in the case you are developing a website, and you want someone outside to see how's it going without deploying it. You just pass the URL and grant access. ngrok also captures all traffic through the tunnel.

      • Frontend: Web Development Boilerplate

        The Front-end Boilerplate is an easy to use development tool for creating attractive and useful web projects. It has a tasks manager, you can use your dependencies, you can choose what preprocessor to use, and it includes many features that can make your development a great experience. You must have Node and npm installed to use it.

      • Subtext: Web and Desktop Code Editor

        Subtext is a code editor for Chrome browser and Chrome OS; an offline tool that you can use on your browser and desktop. It lets you edit local files thanks to a simple user interface. Among its features you can find: - Project management - Fuzzy search for opening files - Versatile layout - Fullscreen mode It supports several types of syntax, including HTML, CSS, Javascript, PHP, LESS, Stylus, Coffee, Ruby, Python, Markdown, Mustache, and many more. You can download it for free.

      • Webplate: Website Building Front-end Framewor...

        Webplate is a useful front-end framework that allows you to focus your attention exclusively on building your website or mobile app. It is a UX experiment that you can download and use for free, or improve since it is open source. Inside you can find: - A robust and responsive layout engine - Global buttons and elements - Customizable forms - Simple modals - Icon fonts support Also, it includes two types of "starter kits": the Quill UI and the Stripe UI. The first one created for writers and the other one for quick creations. This framework was created by Chris Humboldt and was uploaded …

      • Website Development Starter Kit

        This is a web starter kit that will help you not only create a compelling and useful website that can be viewed in any desktop or mobile device, but to know how you can improve it at all levels. Among its features you can find: - A responsive boilerplate. - An up-to-date style guide. - Cross-device synch. - Live browser reloading. - Performance optimization. - Insight reporting. - SASS Support.

      • Plugin for Bringing Youtube Feed into WordPre...

        This plugin for WordPress lets you import youtube individual videos or feed from videos, and convert the result in a post. Even though it is in its first version, it's stable, and videos can be searched and manageable, easing its use in any WordPress blog.

      • Scotch: Off Canvas Menus & Panels jQuery...

        Scotch Panels is a jQuery plugin for easily creating off canvas menus, navigation, and other panel types such as images, videos, and iframes. They have lots of features and different options for every skill-level to tweak and implement into almost any project. They work from any container so you can put your side navigation on any element you want. It even provides excellent browser support via a JavaScript fallback.

      • Omega: Python Web Platform

        Omega is an attempt to bring back innovation to Python web frameworks. Its goal is to be more than a web framework since it aims to be a platform on which any type of web application can be built, batteries included. That means  this tool ships with support for creating ORM-backed CRUD applications, NoSQL REST APIs, real-time applications using Websockets, and simple, mostly static page applications.

      • ScrollAdvance: Scrollable Backgrounds jQuery ...

        This jQuery plugin allows the user to move the background in any cardinal direction thanks to values that can be changed, adding useful functions for the scroll position as scrollBottom() or scrollTop(). It is published under the MIT License.

      • heatmap.js: Dynamic Web Heatmaps

        A JavaScript library will help you make three-dimensional data speak up. Heatmap.js v2.0 adds new value to your project, and you can build a business based on it, study and visualize user behaviour, and much more. Whether you want to have an aggregated overview of your users behaviour or look at thousands of events distributed on a map, this tool covers all your heat map visualization needs.

      • CSS Layout Generator

        This is a supremely useful tool that will generate column layouts including footer, header and menu. You can set the measurements by either pixels or percentages. The inclusion of sidebars can also be controlled. Take a look and create the right foundation for your project. It was created by Generate It!

      • Online CSS Validator

        ​This online tool created by the guys at CSS Portal helps you validate your CSS files with a simple form. Validating your CSS is the first step (before optimizing it) since it allows you to find errors in your CSS that can make your page display incorrectly. After that, a good optimization is required and can help you website load faster and smoother than ever.

      • CSS Code Optimizer

        ​Optimizing your CSS code is crucial if you are running a large site. CSS has a tendency to get cluttered, just like HTML does. This generator will format and optimize your CSS code using a variety of different compression settings. Once you're done with your CSS codes just upload them to your web hosting service provider and see the results of your CSS design online.

      • Online Password Generator

        ​This online password generator will allow you to create a range of strong and secure passwords using a combination of uppercase letters, lowercase letters, numbers and punctuation symbols. Within you can select the password length, lowercase letters, capital letters, numbers, punctuation, and avoid similar characters to create a powerful password. Then just click on generate, and you are done.

      • Orson: Online Tool for Creating Themes

        Orson is a great tool for creating your own Bootstrap theme. And after all, you can save it. It takes advantage of the latest version of Bootstrap; you can preview your work, import variables, pick colors easily, choose from lots of Google Fonts and many more features.

      • -prefix-free: Use Only Unprefixed CSS Propert...

        -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Among its features: - Processes every stylesheet in or elements and adds a vendor prefix where needed. - Processes elements with a style attribute and adds a vendor prefix where needed. - Takes care of new or elements, style attribute changes and CSSOM changes (requires plugin). - Lets jQuery’s .css() method get and set unprefixed properties (requires plugin).

      • Typecast: Create Better Web Typography

        ​Use Typecast to create visual and semantic designs. This online tool allows you to arrange the texts of any website, modify the typeface, weight, color, size, spacing and more. You can also create various instances of the same page; for instance, you can set up different configurations for different screen resolutions.

      • Bonfire: Easy PHP Web Applications

        Bonfire helps you build CodeIgniter-based PHP web applications even faster than ever by providing powerful tools and a beautiful interface you won’t be ashamed to show your client. With it you have built in users, enhanced debugging and a significant set of developer tools.

      • Screenhero: Easily Review your Code

        Screenhero is awesome for code review and pair programming. With simultaneous control, both sides can switch seamlessly between driving and navigating, with zero overhead. Works with every IDE. Instantly present your ideas to your clients, without having to send multiple files back and forth.

      • sachet: Handcraft your Own Development Enviro...

        sachet allows you to handcraft your development environment. By allowing you to select features and functionality that you are comfortable with, it generates you a small package with the appropriate configuration files, plugins, and theme so you can leverage the potential of your Vim editor.

      • Chronos: Fault-tolerant Schedule

        Chronos is airbnb's replacement for cron. It is a distributed and fault-tolerant scheduler which runs on top of mesos. It's a framework that supports custom mesos executors as well as the default command executor, thus executing SH (on most systems BASH) scripts.

      • Scriptular: JavaScript Regular Expression Edi...

        Scriptular is a JavaScript regular expression editor. Inspired by Rubular, it gives you a simple way to test JavaScript regular expressions as you write them.

      • js-sequence-diagrams: Turn Text into UML Diag...

        Here we have a simple JavaScript library to turn text into vector UML sequence diagrams. This tool was heavily inspired by the website websequencediagrams.com, which offer a serverside solution. You can use Jison to parse the text, and Raphaël to draw the image.

      • Log: Console with Style

        Log is a simple utility to add style to the browser’s console output. It makes developing for the web and debugging easier by adding colors, ordering content, and more.

      • VisualOps: Cloud Management for AWS

        Here we have a drag and drop real AWS resources to a canvas to quickly design your application architecture. It features several improvements like: - Drag-n-drop to build. - Built-in modules to configure instances. - One click to launch. - Easy exporting. - Realtime cost estimation.

      • TogetherJS: Collaborate in Real Time

        TogetherJS (formerly know as TowTruck) lets users communicate, co-author, co-browse and guide each other. It’s is implemented in Javascript; no software or plugins to install, and it’s friendly with existing web pages, while still letting developers customize the experience.

      • csxs: App Development Tool

        csxs is a command line tool written in node.js for creating, compiling, packaging, debugging, and deploying extensions for Adobe Creative Suite. It’s easy to use and it is powerful.

      • xctool: Easy App Creation

        xctool is a replacement for Apple's xcodebuild that makes it easier to build and test iOS and Mac products. It's especially helpful for continuous integration. It runs the same tests as Xcode.app, and provides a structured output of build and test results, human-friendly, ANSI-colored output, and faster & parallelized test runs.

      • Yeoman: Web Tool For Building Apps

        Yeoman helps you kickstart new projects, taking into account the best practices and tools to help you stay productive. It provides a generator ecosystem, which is  a plugin that can be run with commands to scaffold complete projects or useful parts.

      • Brunch: Lightweight HTML5 Application

        Brunch is a lightweight approach to building HTML5 applications with an emphasis on elegance and simplicity. This builder is not a generic task runner, but a specialized tool focusing on the production of a small number of deployment-ready files from a large number of heterogenous development files or trees.

      • Deployd: Build APIs Easily

        Deployd is an open source platform that allows you design, build, and scale APIs for web and mobile apps in minutes instead of days. After you've set it up, you can deploy to a high-performance cloud, or host it yourself. You have an API just with one click, manage its resources through a web-based platform.

      • Viewport Resizer: a Responsive Bookmarklet

        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. It features full customization, add & customize sizes on the fly, manual orientation toggle by click, automatically device window orientation in "Auto Size" mode, media query support, viewport animation, adapt meta viewport tag from the current page.

      • Emmet: Optimized Snippets for the Web

        Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and SSC, but can be used with programming languages too.

      • Vagrant: Development Environments Creator

        Vagrant allows you creating and configuring lightweight and portable development environments. It is a tool you can install on Mac OS X, Windows, or a popular Linux distribution. After that, create a single file to describe the type of machine. It creates identical development environments for everyone involved in the project.

      • Adobe Edge Animate CC: HTML Animation Authori...

        ​The Adobe Edge Animate CC is a great tool for creating animated, interactive content for the web. It allows web designers create HTML for web and digital publications, as well as sophisticated ads for media that can be viewed on any device.

      • Collapse Expand List View all items Download Collection Submit
    • CSS Frameworks (43 submissions)

      An extensive compilation of CSS frameworks for web development, so you can choose the right foundation to begin new designing endeavors.

      • Grd: Flexbox CSS grid framework

        A CSS grid framework using Flexbox, it contains easy to use Flexbox features, provides just 2 base classes Grid, Cell and some other modifiers. It is included in a lightweight file.

      • Min: CSS Smallest Framework

        A tiny framework written in LESS and Sass, and compiled to CSS to make pretty websites, it includes buttons, inputs, navbars, tables, icons, grids, headings, and standardization of these elements across the "Big 5" browsers (Chrome, Firefox, Opera, Safari, and Internet Explorer).

      • Bulma: Flexbox CSS Framework

        Bulma is a modern CSS framework based on Flexbox with several features such as a simple grid system, flexible navbar that will remain vertically align no matter what, versatile media objects, easy vertically align in fullscreen and you can compose your elements with modifier classes.

      • Feather: Minimal CSS Framework

        Minimal CSS framework that is as light as a feather. Comes with a simple grid system, buttons, components, animations, AND some minimal styles and typography.

      • Milligram: Minimalist CSS Framework

        Milligram is a CSS framework featuring a minimal setup of styles for a fast and clean start, specially designed for better performance and higher productivity with fewer properties to reset. Milligram is available to install using Bower and npm.

      • Office UI Fabric

        Office UI Fabric makes easy to create a new app or updating an existing one. You can apply the Office Design Language this responsive, mobile-first, front-end framework and it's meant to be consumed as CSS. All JavaScript is presentational.

      • Neutron: Website Lay-outing Sass Framework

        An effortless Sass framework that allows you to create layouts with simple and clean semantic commands reducing to zero the amount of litter in your code.

      • Foundation: Responsive CSS Framework

        Foundation is a CSS framework that provides you with plenty of tools for your website and web application projects including mailing features.

      • Bootstrap CSS Framework

        Bootstrap 4's main updates are the use of Sass instead of Less, improved grid systems to better target mobile devices, Opt-in flexbox support, consolidated reboot function, and plenty more features.

      • Lightning Design System: CSS Framework

        Design System is a CSS framework which you can build custom applications with. It features several sorts of layouts, spinners, stencils, tabs, trees, modals, plenty of motion effects and a huge collection of components and utilities.

      • Outline: Clean and Simple CSS Framework

        Outline is quite a complete, clean and simple CSS framework which features Sasy grid add-on, Font Awesome, several mixins, media embedding among other features.

      • Material Design Lite Web Component Kit

        Google's very complete kit provides you with web components to put together in your website, such as templates, menus, loading bars, tables, among many more fully guided, stylable, customizable elements in CSS, HTML and JavaScript.

      • CSSPlus: A Flexbox-based CSS Framework

        cssPlus is a CSS framework that provides you with a way to make a flexible layout based on flexbox modeling. It features extensiveness, table approach, alignments and overflow designation.

      • Thao: Powerful Responsive CSS Framework

        Thao is a lightweight, powerful and simple CSS framework which features grids, layouts, lists, menus, tables and several sorts and styles of callouts, buttons and inputs. This framework was released under the Apache 2.0 license.

      • Baseguide: Lightweight CSS Framework

        Baseguide is a lightweight and robust CSS framework powered by Sass. It basically gathers components such as list types, forms, buttons, embedded media, among others into a small package.

      • Scally: Sass, BEM, and OOCSS Framework

        Scally is a CSS framework that uses Sass, BEM, and OOCSS. It allows responsive layouts, and you can build solid, stable and reusable user interfaces fastly. It is licensed under the Apache v2.0 license.

      • Penguin: Lightweight & Extensible Sass F...

        Penguin is a lightweight and extensible framework made out of Sass for beautiful front end development. It is focused on developers, including a small Gruntfile for compiling SCSS easily and several Sass mixins.

      • Primer: CSS Web Development Framework

        Primer is a CSS toolkit for creating websites and platforms. It is the base of Github itself, including several tools, elements and guidelines for easy web development and scalability.

      • Blackhole: Minimalistic & Powerful SCSS ...

        Blackhole is a minimal SCSS framework that focuses on semantics and intends to provide a clean way of writing code. It is modular, flexible, scalable, responsive and lightweight.

      • Ratchet: Mobile App Web Development Framework

        Ratchet is a minimal framework for crafting mobile apps using CSS, HTML, and JavaScript components. Its ease to use allows you to compile websites in no time.

      • Turret: Semantic Front-end CSS Framework

        Turret is a front-end framework that helps you create beautiful websites that are accessible, semantic, and responsive. It features browser behaviour normalisation, giving the possibility to accessible websites rapidly.

      • Papier: Responsive Web Elements CSS Library

        Papier is a responsive and semantic library made in CSS for styling web elements. It is lightweight, non-intrusive, and it uses normalize.css. Moreover, it has rapid prototyping and has no custom styles for elements.

      • Materialize: Material Design Front-end Framew...

        Materialize is a Material Design front-end framework that's also responsive. It helps accelerating the development of websites, it is focused on usability, it's really easy to implement and use, and it is constantly updated.

      • Skyline: CSS Frameworks Building Starter Kit

        Skyline is a compelling kit for starters that helps you in the process of creating CSS frameworks. It allows and maintains a robust CSS architecture that can be used as a base of your newly created designs. It is written in SCSS using the BEM notation, and it’s object-oriented. It is licensed under MIT.

      • Bootflat: Bootstrap-based CSS UI Framework

        Bootflat is an open source project UI kit CSS package in a flat, simple design. It is based on Bootstrap, offering support for Sketch users since the original comes in PSD formats only.

      • UIkit: Modular Front-end Framework

        UIkit is a modular front-end framework that allows easy use and implementation of elements. It is written in LESS featuring small and responsive components to fit across multiple devices screens.

      • Material UI: Material Design CSS Framework

        A CSS framework inspired in Google's Material Design and React that allows you to add custom styling to your elements for resembling the Material Design appearance.

      • Semantic UI: Frontend Development Framework

        Semantic UI is a development framework that uses Less and jQuery to create, style, animate and manipulate user interface elements that focus on visual interaction to achieve results.

      • One Nexus CSS Framework

        Nexus One is a front-end development framework that allows you to create modern and responsive websites created for developers who want to make simple websites, providing the most commonly used features.

      • Kickstart: CSS Framework

        A cool CSS library that uses semantic CSS mixins or CSS classes for styling. It is an extendable library that comes with basic functionality, but can be improved via the Kickstart Store, and it can be used along with popular technologies like Rails, NodeJS, HTML5 and others.

      • Schema UI Frontend Framework

        Schema is a lightweight and responsive modular front-end framework that allows you to build complex web interfaces. Schema gives you the foundation and components to design a responsive web project quickly.

      • Kouto Swiss: Stylus CSS Framework

        Kouto Swiss is a CSS framework for stylus that provides lots of mixins, utilities and functions so anyone can develop projects faster. It includes Grunt and third-party tools like CodeKit or Prepros.

      • Pure: Responsive CSS Modules Set

        Pure is a set of CSS modules that are responsive and lightweight, fitting any web project with neat design elements. It also has mobile devices in mind, letting you create responsive environments quickly and effortlessly.

      • CSS Library for Stylizing Web Elements

        Picnic CSS is a library for creating HTML5 and CSS3 elements by integrating semantic code. This library was built in pure CSS featuring the usage of Normalize.css and UI elements as plugins.

      • Gumby: Flexible and Responsive CSS Framework

        Gumby is a flexible, responsive CSS framework built with Sass which gives you new tools to customize quickly and build on top of the Gumby Framework. It is flexible and simple to use and up to date since changing the entire design of our UI kit is as simple as adding a few Sass variables and assigning the appropriate classes to your markup structure.

      • HTML KickStart

        An open source framework that enables you to quickly build templates and web designs putting performance as the main objective. It supports HTML, CSS and jQuery elements that allow countless possibilities with little customization.

      • Topcoat: Clean and Fast CSS Apps

        With Topcoat, you can design clean and quick CSS web application. Performance is the key, so every component has been benchmarked in order to achieve the best results. Among it's many options, we can highlight the possibility to customize the theme, the inclusion of a PSD file with all its components, open source fonts and much more.

      • Almost Flat UI

        Almost Flat UI is based on the Foundation framework containing tons of design elements for websites and apps, that feature a nice minimal stylized design.

      • Metro UI CSS

        Metro UI CSS is a group of styles that will help you develop projects with an interface that resembles the one seen in Windows 8, the now-famous Metro style that bases itself on the global flat design trend that's taking over the modern web.

      • Kube CSS Framework

        Kube is a CSS framework that lets you focus on your creations with a great capability for customization​ and control in order to make the projects as functional and beautiful as possible.

      • Fbootstrapp Toolkit

        If you are a Facebook developer, this toolkit will help you with the creation of iFrame application for multiple devices, in the classic Facebook look and feel. Fbootstrapp offers base CSS and HTML for buttons, navigation, tables, grids and many more elements.

      • BootMetro Framework

        BootMetro is a framework that allows you to develop web projects in a stripped-down and intuitive way, using the clean look and feel of Windows 8's Metro design style, including the flat grids and one-color icons.

      • InK: Quick Development of Web Interfaces

        Ink is an interface kit for quick development of web interfaces, simple to use and expand. It is used for building layouts that are content-focused and user-friendly.

      • Collapse Expand List View all items Download Collection Submit
    • Useful CSS and JavaScript Snippets (75 submissions)

      Snippets from around the web that might come in handy.

      • 3D CSS Dynamic Shadow Snippet

        A fantastic snippet featuring a 3D dynamic shadow which changes with a light bulb that we can move with the mouse, creating different perspectives using CSS and Javascript.

      • Datepicker jQuery UI Material Design

        A snippet that comprises jQuery featuring a beautiful date picker, using a fantastic combination of colors, effects, and round numbers within blue circles.

      • Snapback Cache: Client Side jQuery Page Cache

        Snapback Cache is a client-side plugin for jQuery that allows you to cache the position of the infinite scrolling page you navigate so that you can come back to the exact same spot once you've clicked on something and come back.

      • Qlocktwo: Multilanguage Snippet

        A very creative CSS, Javascript and HTML 5 snippet that allows showcasing time and seconds with a clock-like animation, it supports multiple languages and it comes in various colors.

      • JavaScript Tearable Cloth Simulation

        A fantastic and interactive simulation where a cloth can be torn apart with the mouse pointer. Crafted in JavaScript.

      • Mix-Blend: Code Snippet for White Background ...

        Mix-Blend is an useful snippet that allows white backgrounds on images to blend with the total background where the picture is inserted. An ideal resource for web designers when dealing with images of this kind.

      • CSS Polaroid Images Gallery

        A good-looking vintage snippet that allows showcasing images with a polaroid-like frame. It features a hovering animation when selecting pictures that increase the image sizes and their colors.

      • CSS Minimal & Clean Bootstrap Date Picke...

        A significant bootstrap date picker made in pure CSS, HTML and Javascript. The date picker was designed with bootstrap elements and the getDate method. It features a transition animation when selecting the calendar and dates autocompletion.

      • Gradients: Beautiful Gradient Colors Snippet

        A simple and yet creative code snippet created to change gradients with different random colors by pressing the space key on your keyboard. Wrote in pure CSS and JavaScript.

      • Rollerblade.js: JavaScript Image Rotator

        A useful JavaScript snippet that allows image rotation in a smart and creative way. An ideal choice to showcase projects from a 360° view, works perfectly fine on IE9+

      • Cl.js: Speed-up Console Logging

        Cl.js is an useful snippet that helps to speed up console logging in code writing by minimizing the syntax, it simplifies an specific function and aids in saving time.

      • Phone Styled iFrame

        An amazing concept of iFrame that allows you to feature in a live mode your website on a virtual phone from 3 different perspectives: front, leaning, and horizontally tilted.

      • Credit Card Checkout Form

        A cool credit card mockup developed in CSS and jQuery that updates automatically as you fill the checkout payment form.

      • Wavescroll: Draggable Backgrounds

        Wavescroll is a new concept of screen-size pages presentation which background you can drag or scroll as they get split into strips which smoothly slide outwards.

      • How to: Pure CSS Masonry Layouts

        An useful article about the best and more practical coding methods to achieve the known and trending masonry layout. It explains how to build the layout withou using anything else but CSS, specifically Flexbox.

      • css-protips: CSS Tips Collection

        Github repository consisting of a collection of fifteen tips and tricks, every step explained in detail by examples, to help you improve your CSS coding.

      • Numeral.js: Numbers Formatting JavaScript Lib...

        Numeral.js is a library that provides formatting scripts for numbers to look like currency, percentages, times, or even plain old numbers with decimal places, thousands, and abbreviations. It also has unformat, manipulation, and clone functions between others.

      • Online Tickets Design Concept

        This is a practical and simple design for online tickets made with CSS and JavaScript, it's a highly visual interface with the necessary information like number of tickets left, number of people going and range of prices condensed in a drop down menu.

      • JavaScript list: one JS tip every day!

        Enjoy this short and useful resource to find JavaScript tips every day in order to improve your code writing. If you want to enrich the list you can also make your own suggestions!

      • CSS Ribbon Font

        A beautifully crafted font created out of pure CSS made ribbons featuring smooth shadows that give this font a nice 3D feel.

      • CSS Absolute Centering

        A CSS snippet that allows you to center a box in the viewport both horizontally and vertically being completely responsive to any window size.

      • CSS 3D Solar System Animation

        Beautiful solar system CSS animation in 3D front view and 2D side view, zoom in, switchable between speed, size and distance mode for every planet.

      • Device.js: Conditional CSS Scripts

        Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system, orientation, and type, the script updates thesection with the appropriate classes based on the device's characteristics.

      • colofilter.css: CSS Color Filter

        Colofilter.css is a CSS library to apply color filters to your site, it uses CSS blend modes. To use the filters, use the proper classes on your elements, and that's it!

      • Codepad: Social Ranked Snippets Site

        Codepad is a website for social ranked snippets developed in plenty of languages with which you can create collections, do version control, hire or be hired, search and follow, and more.

      • embed.js: JavaScript Embeding Plugin

        Embed.js is a pure JavaScript plugin to help you embed several features into your website, such as audio and video files, online code editors, social media elements and more analyzing URLs inside a text and embedding them in a new line.

      • Colorify.js: Image Main Color Detector

        A script developed in JavaScript that allows you to detect the main color of an image and then generate gradients for nice and smooth revealing effects.

      • Pure CSS Apple Keyboard

        An on-screen Apple keyboard created out of pure CSS featuring effects for a realistic looking of being pressed and springing back out.

      • Interactive SVG Emoji

        A CSS & jQuery snippet that animates with some gestures a rounded emoji face created out of SVG embedded in HTML code as you click on the button of the gesture you want.

      • Split.js: Adjustable Split Views

        A lightweight JavaScript utility that allows you to create drag-adjustable split views or panes that can be split horizontally or vertically requiring no dependencies or markup, but only two or more elements with a common parent.

      • Jump.js: Dependency Free Scrolling Library

        A small, modern, dependency-free smooth scrolling library by callmecavs. Follow documentation on GitHub.

      • Falling Leafs: JavaScript Particle Animation

        A stunning JavaScript particle animation that represents a scenario featuring pink leafs falling off and being smoothly blown by the wind.

      • Newspaper Style Design

        Minimalistic newspaper style design divided into five columns, several fonts applied. New responsive design with smooth transition avoiding gaps. Editable HTML, CSS and JS, free download. A PEN by Silke V

      • Responsive Fonts CSS Snippet

        A CSS snippet that makes fonts responsive to keep the paragraph and text size ratio as the screen size changes.

      • Web Chat Widget

        A chat widget that features group chat and allows file and image sharing. It was inspired in Appon Chat widget on Dribble.

      • Nipple.js: Touch Screen Joystick

        Nipple.js is a virtual joystick developed for touch-capable devices. It retrieves useful data for UX controlling.

      • Interactive Panel Elements

        A snippet that provides you with panel elements that slide aside as you click on them in order to show like and dislike hover buttons.

      • UnCSS: Unused Styles Remover

        UnCSS is a tool for removing unused CSS code from your stylesheets that works across multiple files supporting JavaScript injected CSS.

      • FormFiller: Form Auto Filling JavaScript Book...

        FormFiller is a JavaScript Bookmarklet that allows you to save the content of forms you often fill out, in order to re-populate them instead, which would save a bit of time for you.

      • Elastic Pull To Refresh Concept

        An elastic pull effect for reloading feed in mobiles or touch-capable device interfaces.

      • Random JavaScript Color Generator

        A plugin for JavaScript that generates random nice looking colors, giving you the option of generating the colors under certain parameters such as luminosity, hue (e.g. green, orange, red, etc.), number, and more.

      • EnquireJS: JavaScript Media Queries

        A lightweight JavaScript library that features a clean and intuitive API and JavaScript callbacks for media query matching and unmatching and which main purpose is to respond to CSS3 Media Queries.

      • UpUp: Offline Navigation JavaScript Snippet

        UpUp is a snipped coded in JavaScript which main goal is to feature offline navigation for when mobile devices are not under coverage. It would be quite useful for customers to stay connected to your websites at all times.

      • Flip Menu Tiles CSS

        A CSS snippet that features tile-like containers that hold a feature image (in this case of a dish) that flips over on its back when you click on it transforming the image to grayscale and showing you the text information over the image.

      • GSAP Animated SVG Clock

        An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

      • HTML, CSS & JS Context Menu Snippet

        A fully customizable and appealing gradient context menu to add to your websites taking the most out of its dark icons, smooth selected item highlight and sub-menus. This context menu was created by Ryan Morr.

      • JavaScript Animated Stickers Library

        A JavaScript library which allows you to animate images when hovering over them giving them a really cool sticker-like removing effect. It can only animate horizontally and vertically, not diagonally. The library was created by Jongmin Kim under the MIT License.

      • PubCSS: Academic Publications Formating CSS S...

        A library of CSS stylesheets and HTML templates for formatting academic publications for print and web environments. The formats supported are ACM SIG Proceedings, ACM SIGCHI Conference Papers, ACM SIGCHI Extended Abstracts and IEEE Conference Proceedings. The library is free and it was made by Thomas Park.

      • Mobile-friendly Online Social Buttons Generat...

        A cool online tool for generating social buttons to add to your website. They can be created step by step selecting the style, the networks you want to be featured and your website's information. After that, you can preview the code and grab it.

      • Draggable CSS and JavaScript Chatbox

        A chat box made in CSS and JS that has cool features besides the fact that it is draggable, like the search box, the avatars taking the initials of the username, and some cool hover effects. It was created by Andy Tran and it's available to be edited and implemented in any website.

      • CSS-only Coffee App Concept

        A snippet with a concept for a mobile app about coffee. It consists of a list of different styles of coffee like Macchiatto, Cappuccino, Americano, Mocca, Latte and others. It works best in Chrome, Safari, and Firefox and the original design was made by David Khourshid.

      • Centered Content Slider’s Code Experime...

        SNÖGRAFX, from Codepen, has created a friendly slider called Owl Carousel. Its primary purpose is to deliver a simple way of passing slides smoothly, as well as integrating easily with any project. Among its features we can find: - Control points for smooth slide swapping. - Previous and Next controls. - You can swap between slides with the mouse (or your finger) just like you would do on a mobile device. - Has responsive capabilities. It is really simple to integrate into any website. You don't need more than a few lines of JavaScript, CSS and HTML to make it run, and then you just …

      • Scotch: Off Canvas Menus & Panels jQuery...

        Scotch Panels is a jQuery plugin for easily creating off canvas menus, navigation, and other panel types such as images, videos, and iframes. They have lots of features and different options for every skill-level to tweak and implement into almost any project. They work from any container so you can put your side navigation on any element you want. It even provides excellent browser support via a JavaScript fallback.

      • Flat CSS Menu Toggle Button

        Inspired by Loredonut’s Pen from Codepen (a simple unicolor menu), this is a beautiful menu with CSS animations, for the button to activate and close, as well as the actual items in the list. Elements have rounded corners, unlike the original, and the effects were made based on Todd Motto functions. Geoffrey Crofte made this development and uploaded it to Codepen.

      • Animated and Styled Radio Buttons in CSS

        Here we have some simple animations applied to radio buttons. When you click one of them, the one that was previously activated banishes while the selected radio button appears smoothly. It gives websites and mobile apps a better appearance just by adding a few lines of code. This snippet was created by Tobias Harison-Denby.

      • Flexbox: Compelling Pricing Table

        Thanks to the power of CSS, this code snippet generates an excellent pricing table allowing you to show your product's price ranges in a compelling and informative way. It has pastel colors and four prices by default, although you can change them and add more. This pen was created and uploaded by Codepen's user adamnemecek.

      • bricklr: Create Brick-walls with JavaScript

        bricklr is a JavaScript code snippet that lets you create brick-wall effects in different styles. You can build regular blocks with random colors, pattern repetition, circular bricks, particular and multicolor color, big and small, and many more. You can modify whatever you want by typing different values to the code.

      • CSS Mask-Image & Text

        I’ve implemented a subtle grey flecked texture effect over the white text. Hover over the box to see how it will degrade in non-supporting browsers.

      • Stereoscopic CSS3 3D Text Effect

        A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset and the trick is to use “em"s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

      • Shading with CSS text-shadows

        During the workshop I picked up a few sign painting terms that were new to me, and relevant to web designers as browser support for CSS text-shadows becomes more widespread. Check out these various shading techniques on the demo page I made to accompany this post. Each of my examples uses multiple text-shadow values, which is pretty well supported (and even possible in Internet Explorer), but I encourage you to design with progressive enhancement in mind.

      • Using CSS Text-Shadow to Create Cool Text Eff...

        The CSS3 text-shadow property has been around for some time now and is commonly used to recreate Photoshop’s Drop Shadow type shading to add subtle shadows which help add depth, dimension and to lift an element from the page. This isn’t all the text-shadow property is capable of though, by getting creative and playing around with the colours, offset and blurring we can create some clever and pretty cool text effects!

      • Selectable Text CSS Transition

        After creating an amazing transition effect starting from an image, Trent Walton was challenged by a user to repeat the result, but this time allowing visitors to highlight the text. Happy to comply, here we have his finished work, now with the aforementioned selectable text. Bear in mind it only works with WebKit browsers.

      • Quick Tip: Pure CSS Text Gradients Tutorial

        This is a 4 minute video tutorial in which the author explains how to add simple gradients to text using CSS3. This tutorial was created by Jeffrey Way. It shows step by step how to create the gradient, and he also gives you the code, in case you just want to implement it quickly.

      • Adding Stroke to Web Text

        Fonts on the web are essentially vector based graphics. That's why you can display them at 12px or 120px and they remain crisp and relatively sharp-edged. Vector means that their shape is determined by points and mathematics to describe the shape, rather than actual pixel data.

      • CSS3 Background-Clip & @Font-Face

        Here is the webkit happy code for this live example, sparing you all the structural bits from style.css.

      • Create a Letterpress Effect with CSS Text-Sha...

        The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

      • Classy Tabbed Navigation

        A truly beautiful tabbed interface created by Thibaut from CSS Flow. On hover, the tabs have the ability to display more options, allowing it to handle a vast amount of selections with no problem. Additionaly, neat shadows and click effects wrap up this compelling design. Based on an original PSD by Premium Pixels.

      • CSS3 Folder Tabs

        This tutorial from Red Team Design will take us through the creation of a clean set of folder tabs by using pure CSS3, these include excellent hover effects, neat shadows and smooth transitioning animations whenever a different tab is accessed by the user.

      • Centered Tabs with CSS

        Ethan Marcotte provides us with a way to avoid a constant inconvenience found with tabs created using Doug Bowman’s Sliding Doors: The lack of flexibility in the positioning. By modifying the li, we don't only gain the ability to change tab positioning, but also margin, padding and more.

      • Country Lists in Most Popular Languages

        If you are developing a website and you need a select list of countries, here is your ultimate resource: Full country lists in all the most popular languages, in alphabetical order.

      • GitHub-Style Sliding Links

        Hover over the link below to see the awesome sliding link effect.

      • Code Snippets & UI Kits for Web Developer...

        Download a wide variety of web UI elements and complete UI kits coded with HTML5, CSS3, and Sass/SCSS.

      • Bootsnipp: a gallery of free HTML snippets fo...

        Bootsnipp is an element gallery for web designers and web developers created by Maks; anybody using Bootstrap will find this website essential in their craft since it has essential design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework.

      • GAS – Google Analytics on Steroids

        GAS is a wrapper around the Google Analytics Tracking API from Google. It tries to add new functionality while keeping the same API.

      • Browser Awareness Day

        We've developed a code-snippet that you can include in the of your site that will alert users with outdated browsers to upgrade right away.

      • Collapse Expand List View all items Download Collection Submit
This a test message in global notification
Your download will start shortly.

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

|