Focus transition
Why?
Keyboard navigation has a major downside: it’s not clear where the focus moves upon pressing the Tab key. Animation makes the transition more apparent.

How?
Flying Focus creates an element that is moving when the focus event happen
javascript  ux 
september 2013
Flexy Boxes — CSS flexbox playground and code generation tool
flexbox playground and code generator

Three versions of the flexbox spec – each with different syntax – have been implemented in browsers.

The two 2012 specs are roughly equivalant in terms of features, differing mainly in syntax. The earlier 2009 spec is less comprehensive though covers a lot of the same ground.
flexbox 
september 2013
Solved By Flexbox — Cleaner, hack-free CSS
CSS has been lacking proper layout mechanisms for far too long. Transitions, animations, filters, all of these are great and useful additions to the language, but they don't address the major problems that Web developers have been complaining about for what seems like an eternity.
flexbox 
september 2013
Jayden Seric | Fun with Sass & font icons
Once you have your font installed, you might find yourself reaching for presentational class names such as class="icon icon-facebook". These are non-semantic and should be avoided. Once we have set up our Sass we will be able to add or remove icons from elements via our stylesheet using easy to remember catchwords.
icon-font 
september 2013
Transit - CSS transitions and transformations for jQuery
Super-smooth CSS transitions & transformations for jQuery
animation  javascript  css3  jquery 
august 2013
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.
javascript  parallax 
august 2013
jsPDF - HTML5 PDF Generator | Parallax
A HTML5 client-side solution for generating PDFs. Perfect for event tickets, reports, certificates, you name it!
pdf  javascript 
august 2013
Animate.css | Just-add-water CSS Animations
animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
animation  css3 
august 2013
Barney Parker » What could possibly go wrong? » World Simplest HTML5 WYSISYG Inline Editor
After a fair bit of Googling, it seemed that there wasn’t a hope! all the plug in’s i found just seems unnecessarily complicated so, in a fit of self-importance, i decided i could do it myself. i’d end up with the editor i wanted, and code that i fully understood. Granted, it wasn’t likely to be an easy job, but hey, why would i code anything if there was an easier option?

To my surprise, as it turns out, it’s so simple, it’s almost a joke! all the tools are already available, all you need to do it tie them together with some really simple JavaScript, and it works!
html5  javascript  wysiwyg 
august 2013
Antwort | Responsive Layouts for Email
Bulletproof layouts: made with dynamic content in mind.
Originally made for transactional Emails with dynamic content so the layouts are thoroughly tested - in live environments with real data and edge cases.

Responsive Emails don't have to be boring
A single column layout might work well on mobile but often prevents an underwhelming experience for desktop users. Why not satisfy both?

Works across all devices, including Outlook
Other solutions use floats, which many clients including Outlook don't understand. Antwort uses <table>s for universal compatability.
email 
july 2013
Free email validation API for web forms ‹ The Mailgun Blog
Email validation is a hard problem that every single developer, building anything on the web, has to deal with.  We actually have been working on email validation ourselves for years (more on that below). We looked at the validation services available and weren’t satisfied with any of them, either for performance, accuracy or completeness reasons.  So today, we’re releasing a project we affectionately called Guardpost, as our newest API, and are also pulling back the curtain to show exactly how we built it.
javascript  email  validation 
july 2013
Responsive Screenshots With Casper | Nettuts+
a quick and simple script to take some screenshots of any site at various viewports and save the images to disc. This is something I first saw at mediaqueri.es and started implementing it into my build process. It’s not ideal for real testing, as it acts more like a sanity test and provides a good overview for anything I might be working on involving Responsive Web.
javascript 
july 2013
Bootstrap Tour Extended - Powerful JavaScript Tour library built for highly dynamic applications (a.k.a SaaS/RIA)
Bootstrap Tour Extended allows developers to build quickly and easily extremely configurable product tours using Twitter Bootstrap Popovers.

Some Tour global parameters can be strings or functions because sometimes the thing you want to expose does not exist when the Tour start.

Each #defaults.step parameters specified through new Tour([options]) can be overriden at the step level with tour.addStep([options]).

The default template can be completely replaced at the Tour level or even for a single step. It's a function(step) -> string, so underscore _.template(), jQuery $.tmpl() etc... are supported even if they are not Bootstrap Tour Extended dependencies.
bootstrap  jquery 
july 2013
Mousetrap - Keyboard shortcuts in Javascript
A simple library for handling keyboard shortcuts in Javascript.
Try pressing some of the keys here:
javascript  library 
july 2013
Height equals width with pure CSS
HEIGHT EQUALS WIDTH WITH PURE CSS
I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements. But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well.
layout  css 
july 2013
Ultimate Free Icon Set: 1000 Free Icons
This design resource freebie — containing 1,000 free vector icons — is the biggest free icon set that Six Revisions has ever released.
icons 
july 2013
Five Patterns to Help You Tame Asynchronous JavaScript - Tech.Pro
You can hardly write ten lines of JavaScript before you're confronted with asynchronous behavior. In this post we're going to look at 5 patterns that can help you tame the beast - or at least keep it at bay. It would be nearly impossible to cover each pattern in depth in this post alone, but my aim is to provide enough information to get you started, with an additional reading section at the end.
javascript  toread 
july 2013
Which Vendor Prefixes Are Needed?
This isn't meant to be a complete guide, just a quick reference for some of the more common vendor prefixes. You need to check your own user base, but based on what is in my opinion sensible choices, this is the way to go!

As always, http://caniuse.com/#cats=CSS is the best resource for this sort of thing.
css3 
july 2013
Trip.js
What is Trip.js ?
Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities. ( Based on jQuery )
jquery 
june 2013
Content Choreography | Trent Walton
The concept of permanently placing content on a web page for a single browsing width or resolution is becoming a thing of the past.
Media-queried responsive & adaptive sites afford us the ability to re-architect content on a page to fit its container, but with this exciting new potential come equally exciting challenges. Web designers will have to look beyond the layout in front of them to envision how its elements will reflow & lockup at various widths while maintaining form & hierarchy. Media queries can be used to do more than patch broken layouts: with proper planning, we can begin to choreograph content proportional to screen size, serving the best possible experience at any width.
responsiveDesign 
june 2013
NewNet-Soft - CSS Typography cheat sheet
Today I want to write about a few small typography enhancing features in CSS. Most of them don't seem to be inside the mainstream CSS wisdom floating around (perhaps I am just missing them constantly :(...). So I decided to give them a quick shout out so more of you guys can make use of them.
css  typography 
june 2013
blakeembrey/code-problems
This repo is full of code problems that I have received prior or during an interview. I'll present all my solutions here in JavaScript, but feel free to add your own solutions in another language and even optimise my solutions. If you have your own code problems you would like to contribute, I would love to see them as well.
javascript 
june 2013
Progression.js
A jQuery plugin that gives users real time hints & progress updates as they complete forms
jquery  forms  ux 
june 2013
MixItUp - A CSS3 and JQuery Filter & Sort Plugin
MixItUp is a light-weight but powerful jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content. It plays nice with your existing HTML and CSS, making it a great choice for fluid, responsive layouts. It's perfect for portfolios, galleries, blogs, or any categorized or ordered content! Check out our demos for some inspiration »
jquery  css3 
june 2013
UI Animations
Celebrating animations of interest in software user interfaces.
animation  ui 
june 2013
3 UX Lessons from Pinterest
Pinterest has exploded in recent years from obscure project to global phenomenon. Why? And how can Pinterest's user experience inform developers and designers of all sorts? Let's learn from some of Pinterest's bleeding edge design decisions.
ux 
june 2013
Five Ways To Prevent Bad Microcopy | Smashing UX Design
You’ve just created the best user experience ever. You had the idea. You sketched it out. You started to build it. Except you’re already in trouble, because you’ve forgotten something: the copy. Specifically, the microcopy.
Microcopy is the text we don’t talk about very often. It’s the label on a form field, a tiny piece of instructional text, or the words on a button. It’s the little text that can make or break your user experience.
usability  ux 
june 2013
Facing The Challenge: Building A Responsive Web Application | Smashing Mobile
We are talking and reading a lot about responsive Web design (RWD) these days, but very little attention is given to Web applications. Admittedly, RWD still has to be ironed out. But many of us believe it to be a strong concept, and it is here to stay. So, why don’t we extend this topic to HTML5-powered applications? Because responsive Web applications (RWAs) are both a huge opportunity and a big challenge, I wanted to dive in.
responsiveDesign 
june 2013
Clown Car Technique: Solving Adaptive Images In Responsive Web Design | Smashing Coding
Adaptive images are the current hot topic in conversations about adaptive and responsive Web design. Why? Because no one likes any of the solutions thus far. New elements and attributes are being discussed as a solution for what is, for most of us, a big headache: to provide every user with one image optimized for their display size and resolution, without wasting time, memory or bandwidth with a client-side solution.
responsiveDesign  image 
june 2013
Using requestAnimationFrame | CSS-Tricks
There used to be just one way to do a timed loop in JavaScript: setInterval(). If you needed to repeat something pretty fast (but not as-fast-as-absolutely-possible like a for loop), you'd use that. For the purposes of animation, the goal is sixty "frames" per second to appear smooth, so you'd run a loop like this:
javascript  animation 
june 2013
Blueprint: Responsive Multi-Column Form | Codrops
This Blueprint is a simple, responsive multi-column form style that comes with example media queries for creating a switching layout. The form has three columns and depending on the screens size, they are shown in a specific manner. The form elements are 100% width so they adjust to the column size.
responsiveDesign 
june 2013
Happy Metrix - Dashboards
Happy Metrix lets you create easy-to-use dashboards, collecting validated data from diverse sources.
Cut through the clutter, interpret the numbers and get things done.
dashboard 
june 2013
Ladda
A UI concept which merges loading indicators into the action that invoked them. Primarily intended for use with forms where it gives users immediate feedback upon submit rather than leaving them wondering while the browser does its thing. For a real-world example, check out any of the forms on slid.es.
button  ui 
june 2013
The Secret to Building Large Websites: Website Architecture
The process is divided into these 11 stages:

Project Brief
Website Goal Definition
Define the Target Audience
Competitor Analysis
User Goal-Problem-Solution
Scenario Mapping
Mind Mapping
Information Architecture
Prototyping
Prototype Usability Testing
Project Specification
As you can see, all these stages are related to each other, and we’ve organized it in a sequential manner.
UX  UI  webdesign 
june 2013
jsoverson/plato · GitHub
Visualize JavaScript source complexity with plato.
github  javascript 
june 2013
Andy Wenk - My ~/.gitconfig
when you’re using git as your scm, you will probably love it’s command line interface. I am using it on a daily basis … heavily. I know that there are some quite good GUI’s (like SourceTree) but I never got really into them. So if you’re interested to make your git-life a little more comfortable, you can check out my (small) .gitconfig:
git 
june 2013
Sly
Sly is a JavaScript library for advanced one-directional scrolling with item based navigation support.

It can be used as a simple scrollbar replacement, as an advanced item based navigation tool, or as a great navigation and animation interface for parallax websites. This is achieved by a powerful & developer friendly API that provides a bunch of very useful methods giving you control over everything.
jquery  navigation 
june 2013
jPanelMenu | A jQuery Plugin
jPanelMenu is a jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

Just click on the menu button (the top left of this page) to see it in action.

Check out the changelog to see what’s new in version 1.3.0.
jquery  menu 
june 2013
5 HTML5 Features you need to know — Adnane Belmadiaf's Blog
HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time.
html5  tips 
may 2013
samsono/Easy-Responsive-Tabs-to-Accordion · GitHub
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.
jquery  navigation 
may 2013
Picksum Ipsum - Movie Lorem Ipsum Text Generator Alternative
Do you love movies as much as you love making cool websites? Then, boy – have we got the lorem ipsum for you! Our badass text generator will give you the best lines from some of the hardest Hollywood legends – we’re talking Eastwood, Caine, Carrey and Freeman – and mix them up ready to work their magic on your new website. In fact, we reckon you’ll love Picksum Ipsum so much, you might never want to replace it with real text.

Simply pick your main man, choose your number of paragraphs and tell us if you’d likesum <P> tags, then in one click we’ll give you the script to create a web page which is a huge hit. Your website is too cool for boring lorem ipsum, so why not make something that really stands out by using our lorem ipsum alternative instead?

If you’re a film fan as well as a web genius, get to grips with our cool text generator now and Picksum Ipsum.
tools 
may 2013
Minimalect by groenroos
Minimal select replacement for jQuery by @groenroos.

Replace select elements with a nicer styled control
Support for optgroups
Filtering choices by typing
Keyboard navigation
Support for themes
jquery  forms 
may 2013
Face Detection in JavaScript via HTML5 Canvas - Badass JavaScript
You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript?  Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element.
canvas  javascript 
may 2013
Deep dive into Require.js - Tech.Pro
Require.js is one of my favorite ways to write JavaScript these days. It's modularity breaks up larger apps into smaller, manageable pieces. The optimizer is a powerful tool capable of squashing the largest of apps into the smallest of apps by tracing each module's dependencies. There are many reasons to be using AMD with require.js.

Let's take a look at some of the more powerful features of require.js that you may or may not know about.
requirejs 
may 2013
Securing Single Page Apps and REST Services
The move towards Single Page Apps and RESTful services open the doors to a much better way of securing web applications. Traditional web applications use browser cookies to identify a user when a request is made to the server. This approach is fundamentally flawed and causes many applications to be vulnerable to Cross-Site Request Forgery (CSRF) attacks. When used correctly, RESTful services can avoid this vulnerability altogether. Before we go into the solution, lets recap the problem.
security  Play  rest 
may 2013
Auto-Refresh for Play Framework Apps
Over this past weekend I built a little tool for Play Framework app developers which auto-refreshes an app in Chrome when the source code or static assets change.
Play 
may 2013
Turn Your Web Application into a Firefox OS App in 5 Minutes
One of the promises that comes with HTML5 mobile apps, especially those to be featured on Firefox OS, is that your existing web applications, if created properly (feature detection, responsive design, etc.), can be turned into a working mobile application in relatively little time.  And that's the way it should be, right?  If my app works in the device's browser, shouldn't it work perfectly as a standalone app?  Let's say you have a responsive, well-written website/app and you want to let Firefox OS users experience your work as a first class app;  the following few steps will help you make those Firefox OS app dreams a reality.
firefoxOS 
may 2013
CSS Architecture | Appfolio Engineering
I believe the goals of good CSS architecture shouldn’t be that different from the goals of all good software development. I want my CSS to be predictable, reusable, maintainable, and scalable.
css  bestpractices  reference 
may 2013
RefineSlide
A few transitions to play with
Responsive down to mobile scale
CSS transition & 3D transform support
Javascript fallback fade transition
Auto-formatted, responsive thumbnails
Good browser support (IE7+)
HTML captions
Hardware acceleration on supported browsers
Free to use and abuse as you like
Simple, semantic markup
Lightweight: ~10.7k minified
slideshow 
may 2013
Dates and JSON - Tales from the Evil Empire
Here's how you'd encode a string that contains the same literal I described above: "/Date(1198908717056)/".

Notice how a simple eval-based parser will just return the exact same string in both cases, but if you run a simple search for "\\/Date\((-?\d+)\)\\/" and replace with "new Date($1)" before the eval (but after validation), you'll get the dates right in the final object graph. The string I described above will just go through that filter undetected and will remain a string.
json 
may 2013
Backbone patterns
Here, I try to document the good practices that our team has learned along the way building Backbone applications.

Assumptions

This document assumes that you already have some knowledge of Backbone.js, jQuery, and of course, JavaScript itself.
javascript  patterns  backbone.js 
may 2013
Mocky: Real HTTP mocking
Mock your HTTP responses to test your REST API
api  rest 
may 2013
LivIcons - Exclusive Truly Animated Icon Pack!
Truly animated icon pack with power of scalable vector graphic for clean and perfect look at any devices.
animation  icons  ui 
may 2013
Style Guide
Starbucks styleguide
styleguide 
may 2013
Styleguide — Paul Robert Lloyd
This document is a guide to the mark-up styles used throughout the site. Parts of this markup guide are attributable to Dave Shea, and licensed under a Creative Commons License.
styleguide 
may 2013
Breakpoint
Breakpoint makes writing media queries in Sass super simple.
Here's one:

scss
$high-tide: 500px;
I told you it was simple. Check it out. You can use that variable in the Breakpoint mixin like this.
compass  sass 
may 2013
Thank God We Have A Specification! | Smashing Coding
This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Alex MacCaw has already written a very insightful and thorough article on “All You Need to Know About CSS Transitions.”
animation  css3 
april 2013
Verlet-js
About
verlet-js a simple Verlet integration physics engine written in javascript by Sub Protocol. Verlet is pronounced 'ver-ley'.
javascript  library 
april 2013
js-beautify
This little beautifier will reformat and reindent bookmarklets, ugly JavaScript, unpack scripts packed by Dean Edward’s popular packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.
javascript  json 
april 2013
Bootbox.js—alert, confirm and flexible dialogs for Twitter's Bootstrap framework
Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter’s Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here’s the simplest possible example:
bootstrap  modal 
april 2013
Data URI scheme - Wikipedia, the free encyclopedia
The data URI scheme is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources. This technique allows normally separate elements such as images and style sheets to be fetched in a single HTTP request rather than multiple HTTP requests, which can be more efficient.
html 
april 2013
Using OpenType font features with CSS 3: Part 1 | Fontdeck Blog
The vast majority of fonts contain lowercase and uppercase alphabets, numerals, punctuation and accents. But there can be much more to fonts than this basic set of characters. Many professionally-designed fonts also contain ligatures, alternative characters, smallcaps, different kinds of numbers, and sometimes much more besides.
css3  fonts  typography 
april 2013
List of Pseudo-Elements to Style Form Controls - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development
Styling form elements is a pain point when developing web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display.

While all of these pseudo-elements are rendering engine specific (and therefore behind vendor prefixes), they can still be handy for customizing the display for that engine. The following is my best attempt at compiling a complete list of the pseudo-elements available in Trident, Gecko, and WebKit. At the time of this writing Blink is a recent fork of WebKit, so the pseudo-elements provided are identical. I am not aware of any form related pseudo-elements that Presto provides.
css  forms 
april 2013
Flatstrap by Littlesparkvt.com
Sometimes a new project doesn't need rounded corners or gradients. So we decided to get rid of them. We <3 Bootstrap.
bootstrap 
april 2013
Ben Alman » jQuery throttle / debounce: Sometimes, less is more!
jQuery throttle / debounce allows you to rate-limit your functions in multiple useful ways. Passing a delay and callback to $.throttle returns a new function that will execute no more than once every delay milliseconds. Passing a delay and callback to $.debounce returns a new function that will execute only once, coalescing multiple sequential calls into a single execution at either the very beginning or end.
javascript  jquery 
april 2013
PLTTS - Find your colour palette
With PLTTS [/ˈpælɨts/] it's easy to find the matching color-palette for a project you are working on. Type in a hex-code in the field above and search for a palette with a specific color.
color  tools 
april 2013
Transitional Interfaces — Design/UX — Medium
DESIGN/UX
Transitional Interfaces
Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys.

...but there's little consideration about how it all fits together outside of a static comp. You tap a button and the form just ...appears? You swipe to delete an item and it just vanishes? That’s super weird and un-natural. Nearly nothing in the real world does anything as jarringly as just swapping states. It would feel like a glitch.
animation  ux 
april 2013
Hack Your Maps · An A List Apart Article
Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps. They’ve also become one of the mobile space’s most successful transplants as more and more apps are powered by location-aware devices. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere.
javascript  map 
april 2013
Leaflet - a JavaScript library for mobile-friendly maps
Leaflet is a modern open-source JavaScript library for mobile-friendly interactive maps. It is developed by Vladimir Agafonkin with a team of dedicated contributors. Weighing just about 28 KB of JS code, it has all the features most developers ever need for online maps.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while still being accessible on older ones. It can be extended with many plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
javascript  map 
april 2013
MapBox | Fast and beautiful maps
We help people spot local bars on foursquare, choose hotels on Hipmunk, and organize their lives with Evernote. Maps are the context and canvas for everything mobile and social, and we are the platform for making them tailored to fit your product.
map  opensource 
april 2013
substack in cyberspace
Tiny reusable components are great for organizing and reusing front-end code but some dependencies like jquery will make a tiny frontend module much bigger and more cumbersome than it needs to be.

Unfortunately introducing a dependency on a big library like jquery in your frontend code can make it very unattractive for consumers of your module.

As programmers build up applications up from lots of tiny components, if every component included a vendored jquery version, the total javascript size quickly baloons into multi-megabytes. When the jquery version gets pegged, version incompatibilities arise that likewise create redundancy issues. When the jquery version is left to float or its use is demanded externally in the documentation, this also does not scale well and makes it cumbersome and error-prone to use tiny pieces.

Getting away from jquery is attractive even if you have an existing application where its use is more controlled so that it's only ever used once. When your code isn't coupled to jquery, it's much easier to spin out the reusable pieces so you can publish them to package repositories like npm. When it's harder to split out reusable pieces, those pieces tend to calcify and become tightly coupled to your application.

But jquery is genuinely very useful and familiar to lots of folks! Fortunately browsers have taken notice and the DOM itself is a pretty friendly place too these days.

Here is a list of common jquery features and their raw DOM replacements:
javascript  dom 
april 2013
geuis/helium-css · GitHub
Helium is a tool for discovering unused CSS across many pages on a web site.

The tool is javascript-based and runs from the browser.

Helium accepts a list of URLs for different sections of a site then loads and parses each page to build up a list of all stylesheets. It then visits each page in the URL list and checks if the selectors found in the stylesheets are used on the pages. Finally, it generates a report that details each stylesheet and the selectors that were not found to be used on any of the given pages.
css  tools 
april 2013
csscss by zmoazeni
One of the best strategies for me to maintain CSS is to reduce duplication as much as possible. It's not a silver bullet, but it sure helps.

To do that, you need to have all the rulesets in your head at all times. That's hard, csscss is easy. Let it tell you what is redundant.
css  tools 
april 2013
Formalize CSS - Teach your forms some manners!
A Familiar Tale

We've all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on operating system and browser, default form elements can look okay or horribly disfigured.

Cargo cult adherents say that styling form elements is evil, so we live with browser oddities. It does not have to be this way. It can be much better…
forms  jquery  css 
april 2013
jQuery Photoset Grid - Style Hatch
A simple jQuery plugin to arrange images into a flexible grid, based on Tumblr's photoset feature. Originally the plugin was created for our Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but we have since expanded it for use outside of the themes.
grid  jquery  layout 
april 2013
CSS Hat – Turn Photoshop Layer Styles to CSS3. Instantly.
Why our users love CSS Hat

You should combine LESS with CSSHat mixin's + the photoshop plugin It saves me incredible amounts of time. You wont regret it.Gijs Rogé, CSS Hat customer These days I have been trying to spend less time in Photoshop and move to code faster. But whenever I do need to spend some time pushing things around, having CSS Hat there to quickly export the CSS of what I just did makes my life a lot easier. Saves me a ton of time.Josh Brewer, principal designer at Twitter CSS Hat has been the perfect addition to my workflow. It has allowed me to spend more time in Photoshop, doing what I love, while providing accurate results I can trust.Jeff Broderick, Visual/UI Designer I never trusted any automated PSD to HTML service. I always coded things manualy pixel-perfect, but CSS Hat saved me already a shitload of time!musHo, Product designer of Circle CSS Hat generates clean CSS3 from your PSD layers. This makes it crazy simple to translate a design from Photoshop to the browser.Jay Robinson, UI Designer at Sencha Thank you guys! I code designs every day, and I always felt that this should be automatic.Jackie Tran, Dribbble star Amazing work, guys! This hat is going to be huge, I love it.Visual Idiot, Designer at GoSquared I purchased this today and it has already saved me around 1hrs work. Bloody brilliant plugin.Pixel Ninja, CSS Hat customer Seriously impressed with CSSHat. It has saved loads of dev time slicing buttons from PSDs to CSS3 on my current project.Jack Barham, CSS Hat customer Amazing Czech startup CSSHat has just saved us days of work! Spot on guys, cheers!Open Brand, CSS Hat customer
css3  photoshop 
april 2013
« earlier      
301 404 @font-face @media accessibility ajax analytics animation apache api autocomplete backbone.js background backup bestpractices blogging blogs bolierplate bootstrap breadcrumbs brushes businesscard button cache calendar canvas captcha charts chat clients cloud cms codeigniter color compass content-strategy contract cookies copywriting cron crop cross-browser css css3 dark database deployment design dom drupal ebooks ecommerce editor email facebook fashion favicon fireworks flash flexbox fold fonts fontstacks forclients forms forum framework free freefonts freelance gallery gd geolocation git github google gradients graphics graphs grid grunge hacks hardware hospitals hosting htaccess html html-email html5 i18n icon-font icons ie ie6 illustrations illustrator image infographic inspiration invoicing iphone javascript jobsearch jquery jqueryui json layout less library lightbox linux lists login logos map marketing menu microdata microformats minimal mobile modal mootools mysql navigation oop opensource optimization paginate patterns paypal pdf photography photoshop php php/mysql play player plugins png portfolio print print-css productivity rails recipes redesign reference regex resources responsivedesign rest resume retro rss ruby sass scroll search security semantics seo sessions shoppingcart signup singlepage slider slideshow snippets socialnetwork software stockphotos styleguide svg tables templates testing textures thailand themes thumbnail tips tool tools tooltip toread touch tutorials twitter typography ubuntu ui upload usability ux validation vector video vintage visualization webdesign webkit wireframing wordpress wysiwyg xml

Copy this bookmark:



description:


tags: