Markdown.css - A CSS Stylesheet To Make HTML Look Like Plain-Text Markdown

Markdown.css is a CSS stylesheet which allows you to display your normally rendered HTML text in Markdown syntax.

Markdown.css also comes in as a bookmarklet which enables you to apply it on any webpage so as to generate markdown code from it.

This might be useful if you need to copy and paste some text with formatting in a Markdown editor (like at StackOverflow). You can check out Markdown.css below.

Requirements: None
Demo: http://mrcoles.com/demo/markdown-css/
License: Free

Bourbon - A Simple And Lightweight Mixin Library For Sass

Bourbon is a simple library which provides support for mixins for Sass. It allows you to write CSS faster and easier by taking care of vendor prefixes for you.

It not only contains great vendor-prefixes support but also other functions and addons to help you build web projects faster.

Requirements: Sass 3.2+
Website: http://thoughtbot.github.com/bourbon/
License: MIT License

Roole - A CSS Preprocessor With Built-In Vendor Prefixing

Roole is a CSS preprocessor which allows you to write code which compiles down to CSS. Roole is inspired from other preprocessor language like SASS, LESS and Stylus.

Roole however has the standout feature of having vendor prefixing built-in. This allows you to write your styling code in Roole which compiles down to proper CSS, with vendor prefixes auto-generated.

The Roole preprocessor is written in JavaScript and can be used as a Node.js module as well.

Requirements: None
Website: http://roole.org/
License: MIT License

Hint.css - A Tooltip Library In CSS

Hint.css is a tooltip library written completely in CSS. It’s originally written in SASS and uses only HTML/CSS to implement simple tooltips.

There is no JavaScript needed whatsoever to make the tooltips work. Hint.css bypasses all the JavaScript by making use of data-* attribute, pseudo elements, content property and CSS3 transitions to create stunning tooltips.

Hint.css also uses the Block-Element-Modifier (BEM) for modifiers. Once caveat with Hint.css is that transitions on pseudo elements is only available in Firefox currently. So this feature will not work in other browsers, but degrades gracefully in non-supporting browsers.

Requirements: None
Demo: http://kushagragour.in/lab/hint/
License: MIT License

CSSTrashman - A Tool To Generate A Clean Stylesheet From Old CSS

CSSTrashman is an online tool which allows you to supply a URL and it scans the website and generates a new clean CSS file from the existing styles.

CSSTrashman examines your DOM and then reverse engineers a new CSS stylesheet which captures your existing styling perfectly while cleaning the bloated and ill-maintained CSS of old.

The new CSS file generated can be used as a drop-in replacement for the current stylesheet you are using on your website. CSSTrashman can also generate SASS code if you need it.

Requirements: None
Website: http://www.csstrashman.com/
License: Free

Mueller - A Modular Grid System For Responsive/Adaptive & Non–Responsive Layouts

Mueller is a modular grid system for responsive/adaptive and non-responsive layouts.  Muller is built using Compass. The grid system gives you full control over column width, gutter width, baseline and media queries.

Mueller is largely a copy of the ideas outlined by Chris Eppstein and heavily inspired by the work of Joni Korpi.

Requirements: None
Website: http://www.muellergridsystem.com/
License: BSD

Maxmertkit - CSS Framework Based On Widget-Modifier Coding Style

Maxmertkit is a new CSS framework which is based on a widget-modifier coding style.  What this means is that instead of trying to showcase all the functionalities of the CSS framework by demoing every single component of it, Maxmertkit allows you to demo each component by choosing yourself which one to demo.

Maxmertkit provides you with a list of possible widgets defined by the CSS framework such as table, input, form vertical, form horizontal, button, input group, buttons group, groups with carets, tabs, badge, label, dropdown, menu, toolbar, menu in dropdown, tooltip and progressbar.

If you wish to see how a button looks when you apply the ‘huge’ class to it, firstly you drag the button widget to the widget display area, then you drag the class ‘huge’ onto the displayed button to apply the huge class to it.

This is an efficient way to showcase the various features of the CSS framework without cluttering up the page with all the possible variations of the components. The Maxmertkit also has other components like social media buttons, popups, tabs, tables, scroll spy, carousel and more.

Requirements: None
Demo: http://maxmert.com/
License: Apache License v2.0

Ink - A Front-End Framework For Quick UI Development Using HTML, CSS & JavaScript

Ink is a front-end framework for quick development of UIs using HTML, CSS and JavaScript, similar to Twitter Bootstrap.  It provides an easy way to create modern layouts and provides implementations of common interface elements such as gallery, modal, table, tree view, sortable list, data picker, tabs, form validator and more.

Ink also has a core JavaScript engine called Ink JS Core which provides DOM manipulation, communication facilities, page effects and more.  Ink also has predefined layout styles, navigation menus, typography styles, icons (Font Awesome), alerts and tables.

Requirements: None
Demo: http://ink.sapo.pt
License: MIT License

grid(ism) - A Practical, Robust And Responsive CSS Grid Framework

grid(ism) is a practical and robust responsive CSS framework which aims to allow you to create responsive websites easily. grid(ism) was created with simplicity in mind. 

t uses simple naming conventions for classes, equal margins sizes on the outside and inside of gutters, as well as independent sections management of the layout. You can check out the website for a demo.

Requirements: None
Demo: http://cobyism.com/gridism/
License: MIT License

Crunch - A LESS Editor & Compiler

Crunch is an Adobe AIR application which has the dual role of a LESS editor as well as a LESS compiler. Crunch allows you to write your LESS code modularly in separate files then when you decide to run your web application, it compiles the LESS code to CSS code, while producing a single file instead of the multiple separate files.

Since Crunch is written in Adobe AIR, it will run on both Windows and MAC.

Requirements: None
Website: http://crunchapp.net/
License: GPL

Sani - Just A Blogging Framework Using Github

Sani is a blogging framework designed for Jekyll, to be used on Github Pages with Prose.io.  To start blogging with Jekyll, you need to write your own HTML templates, CSS, Javascripts and set up your configuration. But with Sani, all you need to do is clone or fork Sani, install dependencies, and you’re set. All else is taken care of.(This is when you are setting up from your own computer.)

Sani is a bunch of HTML, CSS and Javascript script files along with a Rakefile. The HTML, CSS and JS form the theme while rake gives you automation regarding generating and publishing the blog. Sani is an implementation of what people, who don't use Octopress and Jekyll Bootstrap, use to make do with GH pages.

Sani uses Disqus for comments and a theme designed by Adrian Artiles. Also, the rakefile is mostly ripped off from Octopress with some modifications.

Setting up Sani is so easy, it can be done even if you don't have access to the device your regularly use.

Requirements: Github Account
Demo: http://arkokoley.github.com/…presenting-sani/
License: MIT License

Bootleg.css - Twitter Bootstrap's JavaScript Components Re-Done With CSS

Bootleg.css is an implementation of Twitter Bootstrap’s components completely in CSS.  Bootleg.css bring Bootstrap's components to life—now with 8 custom CSS plugins that (ab)use checkboxes.  The following components have been implemented in CSS: Modal, Dropdown, Tab, Button, Collapse and Carousel.

Requirements: Twitter Bootstrap
Demo: http://labs.thecssninja.com/bootleg/
License: Apache License v2.0

betterCheckbox.js - A jQuery Plugin That Allows You To Customize Your Checkbox Forms Using CSS

betterCheckbox.js is a jQuery plugin that allows you to customize your checkbox forms using CSS.

Browser Support

betterCheckbox has been tested and should work in

• Internet Explorer 9
• Safari
• Firefox
• Chrome
• Opera

Requirements: jQuery
Demo: http://www.michalkow…/#examples
License: MIT License

xCharts - A D3-Based Library For Building Custom Charts And Graphs

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.

xCharts uses its input data to instruct it on how the dataset should be drawn. By providing the following data, an xChart will be instructed to draw an ordinal bar chart with a linear scale, containing two ordinal ticks on the x-axis for "Pepperoni" and "Cheese". There will also be a secondary dotted-line component overlaid on top of the bars.

Requirements: D3.js
Demo: http://tenxer.github.com/xcharts/examples/
License: MIT License

wikiUp - A jQuery Plugin To Display Wikipedia Descriptions In Tooltips

wikiUp is a jQuery plugin which allows you to display Wikipedia descriptions in tooltips.  You just need to include jQuery.js, wikiUp.js and wikiUp.css then you can call the plugin like this:

If you want to get data in a different language, use data-lang:

Requirements: jQuery
Demo: http://pmtarantino.github.com/wikiUp/
License: MIT License

Aware.js - A jQuery Plugin For Personalized Content Without Need For Authentication

Aware.js is a simple jQuery plugin that allows a site to customize and personalize the display of content based on a reader's behavior without requiring login, authentication, or any server-side processing.

Aware.js bundles several features into one easy to implement library.  Aware.js will track a reader's visits, and provide information about the reader's habits, making information available to developers via CSS classes AND via a JavaScript reader object.

In addition, the reader object contains this same information, along with some specific information about previous visits. This is useful for JavaScript developers who want to add more dynamic features to their site based on this information (and who don't want to query the DOM for classes).

This simple information can be used to mildly or drastically alter the layout of a page. For example, first time visitors can be shown a special introduction, while repeat visitors are shown only the newest things. Visitors who haven't come in a while can be presented with a recap of recent, important items.

Aware.js can also flag content on a page as new to the reader, helping them keep up-to-date without remembering what they read last visit.

Requirements: jQuery
Demo: http://xoxco.com/projects/code/aware/demo.html
License: MIT License

simpleCart.js - A JavaScript Shopping Cart That Easily Integrates With Your Website

simpleCart.js is a free and open-source JavaScript shopping cart that easily integrates with your current website.  simpleCart.js requires no databases, no programming, no headaches.  A simple JavaScript shopping cart that you can setup in minutes. It's lightweight, fast, simple to use, and completely customizable.

Features

• No Databases, just simple HTML & JavaScript – The motto has always been that all you need to know is basic HTML to use simpleCart(js).  If you’re able to copy and paste a few lines of JavaScript and put class names on your HTML tags, you’ll have no trouble adding a fully functioning and completely customized ecommerce store to your site in a matter of minutes.
• Extremely Flexible Design Options - Its simple, you just add class names to your existing HTML to make a product or display cart information. The display of what is in a user’s cart can be outputted as a table or divs with complete control over the language, order, content, and styling of those items. Just bring your own CSS and simpleCart(js) is a perfect fit for any content management system even a basic static HTML site.
• Multiple Payment Gateways - The simpleCart(js) free core comes with the ability to checkout with PayPal express, Google checkout, and amazon payments. We’re always working on adding new payment gateways and checkout options.
• High Performance - Studies show that you lose 7% of sales for every extra second your store takes to load. So the last thing you need is a large over bloated shopping cart. With its extraordinary small footprint (8kb minified & gzipped) and ability to operate independent of a database, simpleCart(js) keeps your ecommerce store running fast. It is trusted for use on high traffic websites when most other carts are not up to the task.
• International Language Agnostic - Every piece of text viewable on your website is written by you, which means you choose what language your cart is in. There is no need to download language packs or do translations. it’s completely agnostic to whatever language your customers speak.
• International Currency Support - Selling goods outside of the USA? simpleCart(js) supports a wide array of currencies from the US Dollar to the Thai Baht.

Requirements: None
Demo: http://simplecartjs.org/
License: MIT License or GPL

SSGS - Super Simple Responsive Grid System Using SASS

SSGS is a very basic grid system for the web. It allows you to quickly set up a responsive grid system using SASS.  It's a fully fluid six-column grid with fixed-width gutters.  It takes only one variable (the width of the gutters) so it's refreshingly easy to set up and use.

There's no need to clutter your HTML with lots and lots of classes as you can easily use Sass's @extend function.  It's only about 60 lines of code.

The only drawback there is right now is the dependency on box-sizing: border-box; to work properly.  That is only an issue if you work with IE prior to version 8.  There's even a neat polyfill available on GitHub. 

Since you're already working with Sass, just pop in Compass and import "compass/css3/box-sizing" to make it even easier.

There is even a plain old CSS version available if you're really resistant to awesome technology like Sass.

Requirements: SASS
Demo: http://codepen.io/RadLikeWhoa/full/mLIkK
License: Unlicense

Font Custom - Generate Custom Icon Web Fonts From The Comfort Of The Command Line

Font Custom is a tool to generate custom icon web fonts from the comfort of the command line.

Features

• Cross-Browser - Output multiple font formats and a bulletproof stylesheet with one command. Works on modern browsers, quirky mobile flavors, and even your old friend IE8.
• Bootstrap-Ready - Font Custom creates styles using Bootstrap's .icon-{{your-icon-name}} naming convention. Just include fontcustom.css and you're set.
• Plug And Play - No configuration or navigating confusing APIs. Just place all your vectors in a folder, link a CSS file, and let Font Custom take care of the rest.
• Infinite Options - Why limit yourself to generic, overused icon sets? Create your own vectors or check out Glyphicons and The Noun Project for a buffet of possibilities.
• Flexible Sizes - Resize icons to your heart's content. Since they're vector, Font Custom icons appear crisp at any size. (Also, no more @2x icon assets.)
• Just Add CSS - Change colors, add shadows, rotate, transmogrify — style icons however you want with just a little CSS. Tweaking icon designs has never been easier.
• Smaller File Sizes - Icon font sets like Pictos and Font Awesome require browsers to download hundreds of icons you'll never use. Font Custom only includes the icons you choose.
• Screen Reader Friendly - Some icon fonts use letters or alphanumeric characters which are read out by screen readers. Font Custom uses Unicode's PUA so this won't ever be an issue.
• Automatic Regeneration - Add an icon? Remove an icon? Fonts and styles are regenerated instantly thanks to Font Custom's handy command line watcher.

Requirements: None
Demo: http://fontcustom.com/
License: MIT License

pickadate.js - A Lightweight jQuery Date Picker

pickadate.js is a lightweight jQuery date picker.  It weighs at 6.7KB (2.7KB gzipped).  You can also easily theme the calendar using CSS.

Requirements: jQuery
Demo: http://amsul.github.com/pickadate.js/
License: MIT License