STYLE SWITCHER

HTML 5

Table Dragger – Create ReOrderable Drag & Drop Table with Javascript

Table Dragger – Create ReOrderable Drag & Drop Table with Javascript

Table Dragger is a minimalist plain Table-dragger is a minimalist plain Javascript library for building reorderable drag-and-drop table.
Website
More
Huebee – One-Click Color Picker with Javascript

Huebee – One-Click Color Picker with Javascript

huebee-brand
Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click. Huebee has open-source license for personal usage.
Website
More
Uppy – Open Source File Uploader for Web Browsers

Uppy – Open Source File Uploader for Web Browsers

uppy
Uppy is (going to be) a JavaScript file uploader that fetches files from Dropbox, Instagram, local disk, remote URLs, and other exciting locations. It has a plugin-based architecture, first-class support for resumable uploads according to the open standard: tus, and custom encoding backends, making it extensible and robust.
Website More Info
More
Tilt Hover Effects with CSS and Javascript

Tilt Hover Effects with CSS and Javascript

tilt-hover-effects-codrops
Some ideas for hover animations with a fancy tilt effect by using CSS and javascript. In this idea you can animate an image with a tilt effect on its parts. Having several elements in the item, you can achieve a variety of effects that look very interesting.
Website
More
KUTE.js – Javascript Animation Engine

KUTE.js – Javascript Animation Engine

kute-js-javascript-animation-engine
KUTE.js is a minimal native Javascript animation engine with jQuery plugin and with most essential features for web developers, designers and animators, delivering easy to use methods to set up high performance, cross-browser animations. The focus is flexibility, performance and size.
Website
More
TableExport.js

TableExport.js

screenshot-www-travismclarke-com-2016-12-05-22-42-19
The simple, easy-to-implement jQuery plugin that allows you to quickly and dynamically convert HTML tables to Excel spreadsheets .xls .xlsx, comma separated values .csv, and plain text .txt in only one line of code.
Website
More
Milligram – A minimalist CSS framework

Milligram – A minimalist CSS framework

screenshot-milligram-github-io-2016-11-17-22-38-13
Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!
Website
More
Weather Map – Beautiful, Dynamically-Updated, Searchable Maps with Javascript

Weather Map – Beautiful, Dynamically-Updated, Searchable Maps with Javascript

weather-forecast-amcharts
Weather Map is a JavaScript library that helps your create beautiful, dynamically-updated, searchable maps and charts with all kinds of weather-related information.
Website Example
More
Gradientify – jQuery Plugin to Provide CSS Gradient Transitions

Gradientify – jQuery Plugin to Provide CSS Gradient Transitions

jquery-gradientify-plugin-demo
Gradientify is a simple jQuery plugin that provides CSS gradient transitions.
Website
More
Controlling color with Sass color functions

Controlling color with Sass color functions

sass-logo-new
Sass comes with functions that can easily be applied to colors in your CSS properties. These functions, when used correctly, can be incredibly powerful. They take some of the sting out of choosing and manipulating colors. When used with variables, they can speed up development drastically.
creating variable for the color that we’re going to manipulate:
$base-color: #AD141E;

Darken & Lighten

These two adjust the Lightness of the color’s HSL values. Sass will parse our hex color variable to hsl, then make the adjustments. You call them on the color with a percentage value between 0 and 100. I usually stay in the range of 3-20%.
darken( $base-color, 10% )
lighten( $base-color, 10% )

Saturate, & Desaturate

These will will adjust the Saturation of the colors HSL values, much like Darken and Lighten adjusted the Lightness. Again, you need to give a percentage value to saturate and desaturate.
saturate( $base-color, 20% )
desaturate( $base-color, 20% )

Adjust-hue

This adjusts the hue value of HSL the same way all of the others do. Again, it takes a percentage value for the change.
adjust-hue( $base-color, 20% )

Adding Alpha Transparency

Using our hex color we can do a few things to get it to be a little transparent. We can call hsla, rgba, opacify, and transparentize. All of them accomplish the same thing, just in different ways. I stick to rgba as it comes most naturally to me which takes a color and a value from 0 to 1 for the alpha.
rgba( $base-color, .7 )

Tint & Shade

Our very own Phil LaPier has added to those base color functions. Both of these are accessible in Bourbon. They mix your color with a value of white (tint) and black (shade) and are similar to Darken and Lighten. They take the color and a % value for the change.
tint( $base-color, 10% )
shade( $base-color, 10% )
More