web-design
Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers.
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, SASS, and LESS.
BLOKK font gives you a nice fill text for mock-ups and wireframing without the lorem ipsum. The new and better wireframing font. BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.
Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN.
Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
In CSS we already have the selector ::first-line to apply style on the first line of element. But there is no selector like ::nth-line(), ::nth-last-line() or even ::last-line. Then I read an article A Call for ::nth-everything from CSS tricks. ::nth-line() is actually really useful in some situation.
The coveted CSS3 Gradient Generator has undergone a redesign and moved to its new home within the CSS3 Factory. It has maintained all of it's tools and functions but looks even better now. The redesign enhances the generator's usability and I will be adding even more advanced functions soon.
csstyle is a modern approach for crafting beautifully maintainable stylesheets. The csstyle method is implemented using a set of SASS mixins that make your CSS readable and semantic, generate your selectors for you, and automatically handle things like specificity and nesting.
A Grunt workflow for designing and testing HTML email templates with SCSS.
Pleeease is the best toolchain for your CSS. Just write DRY, future-proof CSS and Pleeease does the job for you*.
The Bootstrap Filestyle is a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.
A collection of patterns & modules for responsive emails
This native application (available for both Windows and Mac) allows you to evaluate the color visibility and contrast of foreground/background color combinations. It provides an initial pass/fail assessment against WCAG 2.0 color contrast success criteria.
Dribbbox displays your work in a clean, easy-to-browse gallery, avoiding the noise of Dribbble's comments, rebounds, ads, … It’s your portfolio, not your social network profile.
Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
Webplate is a free UX project bringing the best of the web together into one great package. Download the zip file below, or if you really want to get into the nuts and bolts then fork the project on github.
Foggy is a jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome.
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
DOM + jQuery for Canvas CutJS is a minimal JavaScript library for composing high-performance, dynamic and interactable 2D HTML5 graphics. It is inspired by DOM and jQuery with a new concept called pinning introduced instead of styling.
CSS.coloratum is a nifty little tool that helps you:
Share colors with friends and colleagues (never have to go through describing a shade again, just give them the link!)
Check out what RGB & HSL values correspond to that color keyword you keep using
Covert HSL to RGB, because you're done with your prototype and now it has to work in IE8 too
...and much more!
rowGrid.js is a small, lightweight (~800 bytes gzipped) jQuery plugin for placing images (or other items) in straight rows.
The grid is similar to grids on Google Image Search, flickr, shutterstock and Google+ images.
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a progress bar.
A lightweight jQuery plugin for creating table of contents navigation menu.
A set of simple stack effects for inspiration. The main idea is to have one item shown initially and then, on some trigger, more items are revealed as decoration. As seen in image grids or on scroll websites as creative effect.
Tired of BORING number inputs that are hard to see when the numbers are too long? Tired of numbers that are too small inside the box? Add some POWER to your inputs with POWER [input] RANGER! Works great for max/min number inputs, part of the SWEET html5 spec.
EyeWitness is designed to take screenshots of websites, provide some server header info, and identify default credentials if possible.
Immybox is a jQuery plugin to transform regular text boxes into autocompleting input boxes that act like select boxes.
Zoom inline page images to and from their original location.
Multi level grouping indicators for tables.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Create a world of alphabetical navigation filters one list at a time!
All Animation.css is a set of animations, fun to let your sexiest design. Are cross-browser animations that will give emphasis to your pages but as sliders,’s 3D effects ..
A Bootstrap-themed kickstart for jQuery UI widgets (v0.5).
croppic is an image cropping jquery plugin that allow users to resize and crop they uploaded pictures.
Themeable progress bar library. Allow to show image loading progress when using lazyload
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
A simple jQuery plugin to allow users to create equal height containers and grids using JavaScript where CSS2 cannot.
Visual Event is a Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements. Visual Event shows:
Which elements have events attached to them
The type of events attached to an element
The code that will be run with the event is triggered
The source file and line number for where the attached function was defined (Webkit browsers and Opera only)
In addition to being useful for debugging your own code, Visual Event can be used as an educational tool, showing how many web-sites have been authored.
Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
I've always wondered if there's a better way of doing transitions and, rather than hard coding positions, delegate layout to the browser. Inspired by Keynote's Magic Move effect, I've made a little jQuery library to do transitions between DOM states.
Just a simply easy way to label each element you want!
Side Navigation Menu
CSS3 transition property & without JS.
3Dbop est une visionneuse d'objets 3D pour le web basé sur le moteur Open Source CubicVR. Elle est conçu pour afficher plus facilement des objets 3D créé avec votre logiciel favori (SketchUp, Blender...) dans les navigateurs web compatibles avec la technologie WebGL.
This project extends from the work done with Reactive Pixels and looks at how an image can be projected seemlessly across many elements. Currently the script is written in the form of a jQuery plugin.
Bootstrap Button Generator will helps you in creating intractive and eyecatching twitter bootstrap buttons for your websites. You can use the available options on the website to create the button then click on "Click here to copy HTML" to get the code.
Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homepage to see it in action.
A jQuery plugin that makes content flow up as you scroll down. This plugin is based on Eric Wenn’s implementation but it has important fixes and improvements.