Fixie.js is an open source tool that automatically adds filler content to HTML documents.
Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code.
By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections... trust me, it's all there. That way you can focus on your design, instead of finding the right filler content.

Create sprites online

Developing sites and apps for Mobile Safari

This simple one-page website is a way for people to have a very quick and easy personable website that aggregates your activity and positions a simple logo, a portrait and some description text in a nicely-formatted manner. This is licensed under the MIT and GPL licenses.

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

vector icons drawn in JS and rendered with raphael.js

Centratissimo
all centered auto-resizable layout
with some jQuery juice

Touchy.js is a simple light-weight (1.15 kb compressed) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.

How do you scale CSS for thousands of pages? Object Oriented CSS is an answer. It’s an approach for writing CSS that’s fast, maintainable, and standards-based. It adds much needed predictability to CSS so that even beginners can participate in writing beautiful websites. Nicole Sullivan first presented it at Web Directions North in Denver and the response has been overwhelming.

This Github project is for the OOCSS framework—a collection of code that’s built using the OOCSS approach and is meant to help you get started. However, the framework is not the same thing as the OOCSS idea. (Confusingly though, they have the same name…that’ll probably change.)

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Gridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon. Go ahead and Launch Gridlover right here.

Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. The team of Codrops is dedicated to provide useful, inspiring and innovative content that is free of charge. What started as an experimental blog became an exciting playground for sharing the passion for web design and web development.

Glue is a simple command line tool to generate CSS sprites:

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

There are over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

As HTML games begin to gradually increase in popularity, vendors are starting to introduce some exciting new APIs to make gaming that little bit sweeter for both us developers and our end players. One of these is the GamepadAPI, which allows you to connect your good old console gamepad into your computer and use it for browser based games, plug and play style. Let’s dive in!

So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.

syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change - it works cross-browser, cross-device, cross-library and is less than 1KB.

Tracks technologies used to build common web properties

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

It let's you monitor download status by providing progress and completed events and it lets you prioritize the order in which items are downloaded. You can even tag groups of files and then prioritize downloads or register for events by tag.

We created PxLoader for the HTML5 version of Cut the Rope and out of the box works great with images and sound files (the types of resources we needed for the game), but it's designed to be extensible and work with any file type or other network action.

Home | Font bundles | Users | About Login via Twitter

Awesome Fontstacks
Font: DejaVu Serif Condensed

add an overlay of mockup to web page for testing

0to255 is a simple tool that helps web designers find variations of any color.

Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework.

Full and starter theme for WP development

Right now, there’s a mathematical symphony happening on your website.

Every single one of your readers is subconsciously aware of this symphony, and more important, they are all pre-programmed to respond to it in a particular way.

The question is this:

Is your site’s symphony pleasing and inviting to your readers, or does it turn them off and make it harder to communicate with them?

You know the importance of live text in creating semantic markup that is browser compatible and improves search engine rankings.
The problem is that we want our designs to be enhanced by typography, so relying on web safe fonts doesn’t always cut it.
From large headlines to smaller body copy, typography has the ability to transcend pure utility and accomplish the design’s goal of communication and user interaction. Throw usability, readability, and accessibility into the mix and it’s easy to see how one can get tripped up.
Typography doesn’t have to be a limitation for the designer. Simply ask yourself the following questions to make the correct type decisions on the web.

I made CSS3 progress bars for a display of data inside localized leaderboards for the new analytics platform at G5.

They are light-weight, requiring no javascript. They look great on iOS devices and they're incredibly simple to use and customize. No images are used.

These progress bars are free to download at Github.

Families I'd like to use for my blog

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Source for DocHub.io, web reference

Web type is exploding all over the web but CSS currently doesn't offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control. Here are a few examples of what can easily be done with Lettering.js:

How does it work? Just put your image size after our URL and you'll get a placeholder.

Create Mac apps.
Use HTML5 for the UI.
Script it with anything.
Can not possibly be simpler.

iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad). You can check resources, see and change HTML & CSS, use breakpoints on JavaScript code, create charts and more just as if you were on Safari for Desktop, Chrome or Firebug.

It works for any web in Safari -the web browser-, for a chrome-less webapp (full-screen) and also for apps using UIWebView -including PhoneGap application.

This is something new, I believe some of us may not even realized there are getting more and more people design vcard website. I able to to find 30 of them, and including mine. :)

Most of them are having a same features - they are all using javascript animation like sliding, fading and tab navigation. I present you 30 amazing Mini vcard websites with slick javascript animation. Enjoy.

We created 30 Days to Learn HTML & CSS because we believe everyone has the right to learn how to build wonderful things on the web.

The course is 100% free and always will be, no strings attached. It is instructed by veteran web developer and trainer Jeffrey Way, and brought to you by the new Tuts+ Premium. Happy learning!

Web Typography for the Lonely aims to excite designers about the possibilities of cutting-edge web standards and javascript through beautiful and inspiring typographic explorations.

The free and minimal HTML5 Admin template is a fluid HTML5 ready template that is basically a mix of plugins and HTML structures for developers who want to spend less time on graphics and more on code, without having a UX that sucks.

Up for grabs is a beautiful set of social icons. This free download includes a PSD file will fully editable shape layers, plus 56 icon variations in PNG format.

extended developer tools

The web development community is a huge place with so much happening daily it’s virtually impossible to keep up with every new resource, tool or solution that is released. It is very easy to get overwhelmed with its scale and can be very frustrating when you are searching for a particular or specialized solution. That is where we see CodeVisually fitting in.

We don’t see CodeVisually (we know, it’s not the best name in the World) as a design blog, we see it as a directory or library of tools and solutions. A resource that offers a simple method to painlessly find the resource you need and fast. It really is that simple. You need a development tool? We will have it.

Well, that is the aim.

What do we cover?
Everything. Providing it is a high quality, professional and a genuinely resourceful tool. We cover CSS, Javascript, HTML, PHP, frameworks, browser extensions, web apps and tools, CMS templates (the barebone & framework variety), CMSes, wireframing tools, and a hell of a lot more.

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

During my talks and subsequent conversation, I often mention numerous books that have influenced my thinking. As a result, I’m getting an increasing number of emails and tweets asking for a full list. So, to deal with that, I’ve pulled together the following list.

This is by no means comprehensive, but the titles listed here are the ones that have really shaped my brain, helped me be a better designer, a more coherent coder, and assisted me in working out what I do and why I do it.

I apologise for the lack of descriptions, but at least I’ve linked to each on Amazon (UK) or the relevant publisher. At the very least, every human should read The Design of Everyday Things, Understanding Comics, and Ways of Seeing. Every designer ought to read Visual Grammar and Visible Signs, and own copies of The Art of Looking Sideways and The Elements of Typographic Style. We can all learn from Managing Oneself, and can improve our delivery with Communicating Design.

There’s a lot of buzz going around about HTML5. Big companies such as Apple are predicting that it’s the technology that will sign the death warrant of the popular Flash platform that powers a lot of rich internet apps and complex dynamic web components.

But what is HTML5, really? How will it change the jobs of web developers and web designers? Here are 15 web resources to help you on your quest in getting current about the impending technology that’s already being adopted by major web browsers and leveraged in large sites such as Google.

Ideal Forms is a small framework to build powerful and beautiful online forms.
It's very easy to use and requires minimal html syntax.
Absolutely everything is stylable with css, no images needed.
Support for IE 7+, Firefox 3+, Chrome 3+, Safari 3.1+ and Opera 11+.
Degrades gracefully with javascript disabled.

PlusOneMe (+1 me) helps you acknowledge people's strengths. It's gold stars for grownups. When you want to acknowledge somebody for a strength they have, you can +1 them for that attribute

As part of my ongoing campaign to improve the documentation we use at Headscape, I have produced a factsheet that we are going to start giving to clients. It provides advice about how to best work with a web designer to ensure their site is as good as possible.<br />
Below is the copy of the factsheet. Feel free to reuse it as you see fit. As with the Kickoff Agenda Builder I am releasing it under creative common licensing.

One of the biggest areas of confusion among our clients is progressive enhancement. They wonder why the beautiful design they signed off doesn’t look the same in older browsers. To overcome this problem we are making two changes. First, we are trying wherever possible to show them designs in the browser rather than as static images. Second, I have put together a short document outlining why progressive enhancement is ultimately better for their site.

Having a great website with online giving is becoming more and more important. $15 billion of the $229 billion that individuals give to nonprofits annually comes online. And it’s growing at over 40% a year (and growing fastest for really small nonprofits). Studies show that online donations are like a gateway drug; they lead to larger and more frequent gifts - both online and off.<br />
Did you know that 75% of the roughly 1.2 million nonprofits in the US have under $25,000 a year in revenue. And 90% have under $250,000 in revenue? Many of these nonprofits really struggle to create and maintain a great website – only 27% use websites to collect donations. Hey, it can be tough when you don’t have a ton of resources.<br />
So, what’s a small nonprofit to do? Bellstrike to the rescue! We don’t want you to miss out. We want to make this whole website/online fundraising thing easy peasy.

Initializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate, a powerful HTML5 template created by Paul Irish and Divya Manian. Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start.

An essential app for webmasters; crawls your site reporting broken links.

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Ligature.js will go through the text on a web-page, and insert ligatures where appropriate.

Minute your meetings. The easy way.<br />
Have you ever faced the situation of agreeing on decisions and task assignments in a meeting and it takes days before the minutes are written and sent to everyone—if they ever are?<br />
<br />
Ever got a quick customer call, whose outcome should be traced and shared?<br />
<br />
minutes.io just does that. In an elegant and simple manner. You can use it in your browser, but you don’t need to be connected to the Internet. You don’t need to sign up. And it’s free!

restful interface to lucene