Welcome to the GitHub CSS Styleguide. It's pretty rad. Before reading this, you should have a general understanding for specificity, the SCSS syntax, and KSS documentation.

Responsive Web Design Using Compass (parts 1 and 2) - http://bit.ly/pD5Kok, http://bit.ly/onjRt8

Responsive Web Design Using Compass (parts 1 and 2) - http://bit.ly/pD5Kok, http://bit.ly/onjRt8

Why Jakob Nielsen is wrong about mobile, by me in Smashing Mag: Why We Shouldn’t Make Separate Mobile Websites http://t.co/sE1hht9i

Wonderful article by @railslove on using SMACSS with Sass: http://t.co/qZrnJIWA

Need some help creating your responsive designs? Here are 20 tools to use: http://t.co/1JXs3ucq

QuoteFix is a plug-in for Apple Mail which fixes some issues with replying to e-mail:

+ it tries to remove the signature from the original message (but check here to see why it doesn't always succeed)
+ it removes certain unnecessary empty lines
+ it positions the cursor below the original message, instead of above it (in other words, bottom-posting instead of top-posting)
+ it can (optionally) prune nested quotes from a specific level and above

Silly list scroll effects.

Validation is great, but it won't catch everything. For example, if you have a link where you forgot to add a URL value to the href attribute, the validator won't complain. The syntax is valid, even if it's a broken experience. Similarly, the validator will be happy to let through empty class and id values.

Piwik is a downloadable, Free/Libre (GPLv3 licensed) real time web analytics software program. It provides you with detailed reports on your website visitors: the search engines and keywords they used, the language they speak, your popular pages… and so much more.

Real Time Web Analytics

Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. It modifies context image requests, specifically img src attribute, but the server does the image resizing. Media queries however should be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved).

Starbucks Style Guide

StyleDocco generates documentation and style guide documents from your stylesheets.

600+ Royalty-free vector icons, glyphs and symbols based on the Helvetica Bold typeface.

In the example I gave in that post I briefly touched on the thought that, using a media query, you could bump up your email’s text size. People showed interest in that idea alone, so let’s take another look at it.

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7.

A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches.

Responsive layouts in web design – this is probably one of the most popular topics of discussion at this present time. The contemporary phase of website designing offers some truly amazing elements that help the web designers in creating exclusive websites. The main motto of building or creating a website is to attract the mind and eyes of the viewers. With these responsive layouts this job can be easily done. These responsive layouts allow the website designers to offer specific and optimized screen size based on a wide range of devices, starting from PC, mobile phone to tablet and iPhone.

There is no pagefold!

Project Collaboration Software

Welcome to activeCollab - the project management & collaboration tool that installs on your server or local network.
activeCollab gives you full control over your files and communications, with unlimited users, unlimited projects, and unlimited storage space - it grows with your company, with no monthly fees.
Work more effectively with your entire team, plus all your clients and contractors in an intuitive, fully customizable space.
Is activecollab the perfect project management solution for you? See why over 5,000+ users worldwide think it is...

Iconic is an open source icon set consisting of 171 marks in raster, vector and font formats.

Dropbox, the app we all (at least many of us) know and love, has a plethora of advanced uses to make life so much easier in managing data between multiple computers and online. We’ve posted several roundups of tips and tricks for Dropbox and now we present our ultimate toolkit and guide.

SleepWatcher 2.2 (running with Mac OS X 10.5 to 10.7, source code included) is a command line tool (daemon) for Mac OS X that monitors sleep, wakeup and idleness of a Mac.

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

How To Make Forms More Usable With HTML5 - http://t.co/ARIlLHHc

Designed by Jory Raphael at Sensible World (with the help of his trusty Roboticon), Symbolicons are a family of awesome vector icons, glyphs and symbols. Get all 505 icons at once with the bundle, or purchase the sets individually.

This is a distribution of plug-ins and mappings for Vim, Gvim and MacVim.

I think the problem is fairly obvious here. If you set a static width on the <select> element and the width of the text in the <option> are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up with or find. It has been tackled with JavaScript a number of ways.

ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greately reduces file sizes with only minor loss of quality. Such images are compatible with all browsers, and even degrade well in IE6.

Welcome to presetpond.com - your ever-growing resource for free user-created presets and actions for Aperture, Lightroom, Camera Raw and Photoshop. Sign up for a free account and start sharing your presets with the world, or dive right into the existing presets below.

Time for a bit of fun with CSS!
The following examples are all created using live text and the CSS text-shadow property. Apart from the Letterpress effect, all of the following examples make use of multiple shadows, and as such will only work on the following browsers.

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer “pure CSS images” and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that’s a good thing!

Everyone’s familiar with inline form labels — storing the label of the field in the value attribute and using some minor JavaScript to erase the text when the field gains focus. This works…okay, but the major problem is that as soon as the user clicks, they lose the label entirely. If they tabbed right into it they may not even have read the label, in which case they’re just guessing.

INITIAL LETTER: A JQUERY PLUGIN FOR MAKING DROP CAPS AND MORE

Large capital letters spanning multiple lines of type at the beginning of paragraphs are known as ‘drop caps’, ‘dropped initials’, or sometimes ‘uncials’. Creating basic drop caps using Cascading Stylesheets (CSS) is easy, but ensuring good typography requires care.

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

This post is based on a talk I gave at the 18th Cocoaheads Meetup Vienna (CHW018) on Feb 17th, 2011. It is an annotated tour of my Git config, Git related scripts and commands, and various other tips and tricks I picked up over the years. You can find most of these things in my dotfiles repo, as well with a lot of other stuff, like parts of my Zsh config. Patches welcome.

Download open source HTML5 & CSS3 snippets and cutting edge web interface kits.

Initializr is an HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate. It generates for you a clean customizable template with just what you need to start!

This document is a guide to the mark-up styles used throughout the site.

Welcome to the Caring.com living style guide. Here you browse the styles and see them in action.

Tired of pixel-by-pixel painting, trying to create seamless stripes textures?

There are currently 404 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.

We made a stencil for OmniGraffle with icons for touchscreen interaction, free gestures and mobile phone gestures. You can download it at Graffletopia. It is a first version of the icon set, we will be updating it from time to time, so feel free to comment and make suggestions for gestures to integrate in the future.

Download the full repository or customize your entire Bootstrap build by selecting only the components, javascript plugins, and assets you need.

Tech Support Management

Online. Worry-free. Upgrade your browser today!

Static Sites Made Powerful

The best thing you'll see today: 106 photos of the year's top street art.

Tracks is a web-based application to help you implement David Allen’s Getting Things Done™ methodology. It was built using Ruby on Rails, and comes with a built-in webserver (WEBrick), so that you can run it on your own computer if you like. It can be run on any platform on which Ruby can be installed, including Mac OS X, Windows XP and Linux. Tracks is Open Source, free and licensed under the GNU GPL.

Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.

Icons for mobile apps
Created specifically for iPhone & iPad apps, they're also perfect for Android, websites, t-shirts, tattoos and more.

A good-looking tab control usually has one feature that I've always found impossible to reproduce without images: borders that bend to the outside at the bottom of each tab. In this article I would like to show how you can use the CSS :before and :after pseudo elements to create this effect without using images. First, let's start with some basic markup.

The jQuery plugin for doing cool scrolly stuff

A great site explaining why there is life below the fold - http://t.co/im5LuZsr

Learn PHP, Ruby, HTML5, CSS3, jQuery, Design, iOS and more...

What follows is a round-up of the top 10 readily-available monospace fonts. Many of these fonts are bundled along with modern operating systems, but most are free for download on the web. A few, notably Consolas, are part of commercial software.

With the rise of mobile devices, web development and debugging is more complex than ever. We have more browsers and platforms to support. We have more screen sizes and resolutions. And we’re building in-browser applications instead of the flat, brochure-ware sites of yore.

Luckily, we also have better tools. The JavaScript console is a standard feature of most major browsers. Both JavaScript and the HTML DOM offer native error handling. We also have services and applications that help us remotely debug our sites.

For many of us, logging into websites is a part of our daily routine. In fact, we probably do it so often that we’ve stopped having to think about how it’s done… that is, until something goes wrong: we forget our password, our user name, the email address we signed up with, how we signed up, or even if we ever signed up at all.

As web designers and developers, we have all come to learn many css tricks and techniques that help us achieve our layout goals. The list of these techniques is an ever expanding one, however, there are certain tricks that are essential to achieve your goal. Today, we will review 20 excellent css techniques to keep in mind when developing your theme.

Please excuse this self-serving, miscellaneous post, but I’ve just got to purge all of these code snippets and scraps collected over the years. Whenever I update this site, I place any removed/unused code snippets into a giant note file for future reference, just in case. There’s all sorts of different types of code and snippets that just keep growing and growing and.. and finally it gets to a point where I just need to dump everything and start fresh. That is the purpose of this post.

So I’ve been writing CSS for somewhere around 13 years now. Some might think I’ve learned the right way to write CSS in that time — but if you ask me all I’ve learned is the most efficient way to drive someone insane.

CSS is complicated. It’s not object oriented. It’s not hierarchical. It’s a specificity based cascade applied to a dynamic hierarchical data structure that few people truly comprehend. Trying to impart this knowledge on someone is a very difficult task with extremely minimal rewards. I used to think that imparting this knowledge was the path toward writing maintainable CSS within a team.

Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with.

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.