Thursday Roundup # 43
This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.
A Visual Guide to Sass & Compass Color Functions
Sass and Compass provide a number of useful functions you can use to alter and manipulate colors with ease. Most color functions operate on a single color, but some can be used to combine two colors in different ways. Our “base color” and “alternate color” will be used throughout the examples. You can click on the swatch for either of those two colors to change their values and see how the calculated colors adjust accordingly.
CLNDR.js – Free jQuery Calendar Plugin
Unlike most calendar plugins, CLNDR.js doesn’t generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you the data to use within it.
A Premium Responsive Business Portfolio HTML Template: Wee
Wee is a responsive, super clean & creative HTML portfolio template for corporate sites, portfolio showcases and businesses. Wee is a purpose built responsive portfolio HTML template that focuses converting your visitors into leads (clients).
If you own a business and looking for a Free HTML template or you are a freelancer searching for a perfect free CSS template for a portfolio then Wee is for you!
Collection of jQuery Interface Plugins – Formstone
A growing collection of jQuery interface plugins focused on structure and customization.
Style Guide Boilerplate
If you’re like me, you find yourself using common design components from one website to the next. You could grab the lastest and greatest framework and use that to handle these common components, or you could roll your own framework. Style Guide Boilerplate is geared for people interested in creating their own “tiny Bootstraps”.
Tutorial: How to Create a Custom, Crisp Icon Font
How do you go about creating an icon font from scratch using your own custom icons and ensure that they render crisply? This tutorial will answer just those questions – providing some fundamental background knowledge as well as the specific steps to create your own custom icon font.
Creative Loading Effects
FireShell Framework – Front-end Boilerplate and Workflows
Modals Built out of Pure CSS – CSS Modal
Full Screen Responsive jQuery Image and Content Slider:RSlider
Native HTML5 Form Elements
This is what every HTML5 form element looks like on your current operating system and browser.
Normalising Designs For Better Quality CSS
Pinterest-like Masonary jQuery Plugin
Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a column grid system similar to Pinterest. What sets it apart is the ability to drag and drop items within the grid while still maintaining a logical index position for each item. This allows for the grid to be rendered exactly the same every time Shapeshift is used, as long as the child elements are in the correct order.
Prototyping Swipe and Drag Gestures with Framer.js
Framer is especially helpful for complex gestures that involve dragging and swiping; where elements move or fade gradually depending to swipe distance or when certain actions are triggered when the user swipes past a certain threshold.
Dummy / Fake Text Generator Tool – Random Thing Generator
If you need a fake name, address, or business name to use as a placeholder, then Random Thing Generator has you covered. You’ll get a column with each type of data, which you can then click on to copy. Click the refresh link at the top of each column for more.
Structural Minification / Optimization of CSS Files – CSSO
CSSO (CSS Optimizer) is a CSS minimizer unlike others. In addition to usual minification techniques it can
perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.
Freebie: Metro Style Free Flat User Interface Kit (PSD) – Flatter
Metro Style Free Flat User Interface (UI) Kit along-with its PSD source file.
Freebie: Deco Patterns Set (50 Patterns in JPG & PAT Formats)
Freebie: Flat Social Icon Set
Beautifully designed by Mohammed Alyousfi, the free Flat Social Icon set we have for you today contain 24 icons, in four varied styles (square, circular and light & dark rounded corners), come in five sizes (from 512px to 16px), and comes packaged with the AI, EPS and PNG versions.
The icon templates have been well organized into groups and are clearly named, making it very easy to resize and change their colors.