CSS Colours presents all the standard CSS colours in nice large swatches. Mouse over the swatch for hex and RGB values.
Colors provides much nicer versions of a subset of the default CSS colours. They’re a bit less saturated, the black isn’t pure; generally it’s more like something you’d actually use in a design. You can grab the values from the page itself, or grab the stylesheets and source files for a variety of CSS preprocessors from github.
David Kadavy writes up tips to point the less the aesthetically skilled on the road to an attractive app or web page. If you want more from David, he has a book and an email course called “Design for Hackers”.
Grid covers the absolute minimum you need to know to get started with creating responsive web pages. If you stopped here, you’d still be creating layouts that work great on a variety of devices.
I either need to get better about posting these, or stop calling them “weekly”.
Inspired by Kelly Goto’s well-known publishing of her process in the early days, nGen have published a wiki of their process. This is an amazing resource for folks just heading into the industry or setting up their own shop. It’s also likely informative for potential clients who want to see how the sausage is made.
I used Trello last fall when I was deluged with work, and my existing project management process wasn’t handling it well. Trello is made of three parts: boards which contain lists, which in turn contain cards. Most folks use it for Kanban. This article will run you through how one Ruby on Rails production shop built their process around it.
Typeplate is a set of Less, Sass, or CSS stylesheets that handle things like typographic scale, and provide classes and mixins for things like setting hyphenation, creating drop caps, or indenting paragraphs.
Grace Bonney walks you through a professional email message, including greetings, closings, and tone.
While table cells in HTML may look like block elements, they’re not, and thus you can’t absolutely position things inside them. I’ve been using a script that I’ve had for ages to get around this. The script would add a helper
div around the contents of every cell that was relatively positioned. The benefit of my old script was that it was library independent. The drawback was that it was long, I don’t know who wrote it, it added a div to every
TH, and it resisted all efforts to make it target only tags with specified classes.
I retired that script today in favour of
iWouldLikeToAbsolutelyPositionThingsInsideOfFrickingTableCellsPlease() over at CSS-Tricks. I renamed it to
I love typography, and am genuinely excited about how much freedom adoption of
font-face provides. I am also pretty clueless about fonts. This site showcases some of the nicest faces in the Google Web Fonts directory.
If you’ve just encountered icon fonts (say in a framework), and are wondering how people are using them, these examples serve as inspiration. I’d never thought of the loader one.
More coffee inspiration, this time broken down by apparatus.
HTML5 Bones is more a starter project than a template or framework. It’s a well structured, well commented HTML file, and includes Normalize.css for sane resets and HTML5Shiv.js to make IE<9 act like a modern browser. Throw in box-sizing declarations and a box-sizing polyfill, and you’ve got my starter project. Only much better. And with ARIA landmark roles.
The original Flash game that lead to the mobile game Super Hexagon. It’s a brilliant game, but it’s important to remember that Terry Cavanagh’s games will make you feel bad about your skills.
Checkvist is a web-based outliner app. You can import OMPL, indented text, lists in Markdown. You can easily get your data out as well. Lots of keyboard shortcuts to speed things up, but none of them are necessary for every day use. Check out MacDrifter’s overview of Checkvist for more detail.