Thursday Roundup # 78
This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.
NEW DEVELOPMENT RESOURCES AND TOOLS
Adaptive Placeholders
Danny King has designed an interactive placeholder thing for his forms and wrote it entirely in CSS. He has shared how he designed that placeholder and how it manages to adapt to user input.
Before he came up with the Adaptive Placeholder, it was just using a normal one, he liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared. The person who enters a value first isn’t always the same person who sees it later. To solve this problem he tried making the placeholder persist through the typing.
Application Shortcut Mapper
ShortcutMapper is a keyboard shortcuts visualiser for popular applications. The application uses ajax calls to load keyboards and application data. First, try and find an online resource that lists all the application shortcuts for each platform. Now you’re going to use that resource to export an to intermediate data format that can be edited by hand easily. SHMAPLIB is short for “Shortcut Mapper Lib”. It’s a Python library that will help you export data in the right format to the right location.
Shine.js – A Library for Pretty Shadows
Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows. And there is no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.
Photoshop Rulers & Guides Interface on Web Page
RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page. To create a guide, click the vertical or horizontal ruler and drag-n-drop it somewhere outside the ruler. It is possible to open/save created guides as grids using corresponding hotkeys. Rulers can be locked, so that one of the rulers will scroll along the page and the other will be always visible. Guides can be snapped to defined number of pixels. Detailed info mode is available, which shows position and size of regions created by the guides.
JSCapture: Screen Capture Library with JS and HTML5
JSCapture is screen capturing library implemented with pure JavaScript and HTML5. It allows you to make screenshots and record a video of your desktop from your browser. JSCapture uses getUserMedia for screen capturing. Currently the API for screen capturing is supported only by Google Chrome, Canary and Chromium by enabling an experimental flag.
Griddify – Photoshop Panel to Make Guides & Grids
Griddify is a tiny Photoshop Panel to make Guides and Grids. Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in Photoshop. Make sure you have Adobe Extension Manager installed. Download Griddify, and install using Adobe Extension Manager. Once installed, open your Photoshop CC. You can find the panel in the “Window” menu, under “Extensions”. Best of all, Griddify is free and open-source.
jBox – jQuery Plugin for Popup Windows, Tooltips and Notices
jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.
iPresenter – jQuery Plugin for Presentations, Galleries and Sliders
iPresenter is a simple and powerful jQuery plugin that makes it easy to design advanced CSS3 presentations, galleries and sliders.
Gridmanager.js – Building Rows and Grids with Built in Editable Regions
Gridmanager.js is a way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor.
Accelerated JavaScript Animation – VelocityJS
Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.
FREE TEMPLATES AND THEMES
Tumblr Boilerplate
The tumblr boilerplate is the simple basis of any good tumblr theme. Avoid slow setup times by developing your custom theme fast.
OneEngine – Free WordPress Theme + PSD
OneEngine is a free one page WordPress theme released with its PSD files.
Dashboard UI – Free PSD
A free dashboard user interface including custom icons and created with Photoshop vector shapes.
Bootstrap3 Based Single Page Free HTML Responsive Template – Meilleur
Meilleur is a professional, multipurpose and responsive one page HTML5 website template which has been built using the new Twitter Bootstrap 3 framework.
TemplateVamp: [FREE] Twitter Bootstrap Admin Template
Based on Twitter Bootstrap, TemplateVamp is a fully functional and customizable admin template that leverages the power and flexibility of HTML5 & CSS3. It can be used as a front-end toolkit for rapidly developing web applications that are lightweight, faster, and mobile-friendly; a great starting point.
TemplateVamp contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and JavaScript extensions.
A Premium Responsive Business Portfolio HTML Template: Wee
This is Wee, 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).
DESIGN FREEBIES
220 Line Icons in PSD Format [Free Download]
Free Summer Beach Colorful Labels Set
Garnata Display (Free Font)