My Trello with custom CSS, using the Safari User CSS extension
I love working with Trello. Compare the free and cheap project management tools out there, and Trello can compete. More nimble, dextrous, and powerful than most. For free.
Effective. Elegant. User-friendly. Excellent in most every area.
In beauty, though — it’s only passible.
Having just tried and compared many alternate services, I’ve come back more committed to Trello, and determined to enjoy it more as well.
So I’ve added some custom styles — and found my love has grown.
Of course this is largely a matter of preference. But I’ve knocked off corners and borders, made avatars round, added some white space, gone largely gray-scale — and, well, see for yourself.
The HTML5 Boilerplate has recently separated out normalize.css, giving it a separate stylesheet link in its default template file. Should you leave it like this in your production site? Is there some caching or other gain? Nope. At least probably not.
Looking at the rationale, one finds this was done to help with maintenance and versioning of the H5BP code.
For production, the recommendation is still to roll up all your CSS, including normalize.css into one minified and compressed file.
Benefits of disentangling normalize.css from the rest of the project’s
CSS:
Easier to track normalize.css version.
Easier to update normalize.css.
Easier to remove normalize.css if the user wants.
Clearer distinction between normalizing CSS and the additions that HTML5 Boilerplate provides. Drawback is the additional HTTP request incurred from the extra
stylesheet referenced in the HTML. However, we already do something
similar for the JS, and anyone serious about performance is going to employ a build process to concatenate and minify CSS/JS.
Emphasis added.
Further Notes
HTML5 Bones also has normalize as a separate file.
As pervasive as normalize is becoming, this could become a new best practice …
But in terms of site performance there would need to be caching benefits to overcome the need for the extra HTTP request. If I understand how browsers decide when to use a cached file, the file would need to be sourced from the same online location — as the H5BP does with Google-hosted jQuery.
The trend away from skeuomorphic design toward flat design has in many ways been refreshing and enjoyable. And yet, it’s worth noting that flat can be taken too far, to the detriment of usability. Take for example Microsoft’s modern.ie site — see the commented screenshot below or check it out yourself.
An example of Microsoft taking flat design too far. Usability cues have gone missing.
I would argue they’ve taken interface design hyperflat, and in so doing have left users without important usability hints.
Yes, the gradients and shadows of yesterday have often been overdone. But there is such a thing as subtlety and sophistication, without complete abdication. Used well, gradients, shadows, and hover effects give users important visual cues for navigating your website’s interface more efficiently and effectively.
Even in this otherwise “flat” design, shadows convey depth and provide visual cues to users.
Letterpress … is a perfect example. It is indeed, mostly flat … But Letterpress does have Z-axis depth: when you drag a letter tile, it pops up and has a drop shadow under it until you place it. There’s nothing “flat” about that. What Letterpress rejects is not depth, but depth as mere decoration. The visual “raising” of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.
Google’s use of edges, bevels, shadows and hover effects, while not overdone, give users important usability cues.
Of course there are other examples. One I’ve recently enjoyed is Andy Clarke’s recent Stuff & Nonsense redesign. Check out his homepage, and you’ll see some elements that are flat, some with edges, some with shadows. All links and buttons have hover effects, begging to be clicked. Then there’s that one gorgeous button, darn near unavoidable in its lusciousness. (No Skitch arrows needed.)
Some flat, some edges, some shadow, all buttons and links with hover effects. And one unavoidably gorgeous button!
What’s going on here? Is it flat or not? With the times? Or behind? One could be forgiven for suspecting that Clarke has subordinated such questions and privileged the point and purpose of the communicative task at hand. While obviously interacting with current trends, the design is enslaved to none of them. Rather it brings past, recent, and current conventions together under the auspices of time-tested and user-empowering design strategies, including visual affordances, interactive feedback, and visual hierarchy.
Clear, straightforward, expressive, and inviting, the design speaks a visual language that is easy to understand and navigate — it looks great to boot — and it leaves no uncertainty about the most important action items on the page.
“What is simplicity and clarity? It’s the user knowing exactly what to do, and how to do it, with a minimum of effort. Achieving this kind of user experience means finding the right balance — not just going flat for flatness’s sake.”
Ran across this wonderfully efficient way of centering list items horizontally. Works great for the indicators below a carousel or a centered list of social icons. Compatible back to IE7.
ul { /* also works with ol */
width: 100%; /* or your desired width */
text-align: center; /* this will center the list items */
}
li {
display: inline-block; /* the key bit */
*display: inline; /* IE7 hack */
*zoom: 1; /* IE7 hack */
}
Suppose you’d like to use a handy LESS mixin to handle multiple CSS3 transitions in a single statement. That’s what LESS is for! But this is a bit of a hairy task. It takes a little finagling. But it’s doable! Here’s how.
To set up multiple CSS3 transitions, you’d do something like this:
a.btn {
background-color: blue;
color: white;
-webkit-transition: background-color, color .2s ease-in-out;
-moz-transition: background-color, color .2s ease-in-out;
-ms-transition: background-color, color .2s ease-in-out;
-o-transition: background-color, color .2s ease-in-out;
transition: background-color, color .2s ease-in-out;
}
It would be nice to do that in shorter form, using a LESS mixin. But by default LESS’s parametric mixins don’t like handling an indeterminate number of arguments. It can handle it (using ‘…’), but our case is even more complex, since we want to list multiple properties (separated by commas) followed by duration and easing (stated once for all).
This is a well crafted, succinct list providing summaries (with links!) of important emerging responsive design trends.
Choice notes include:
“Designing first for a small screen means making the tough decisions about what is most important and what can be cut.”
“Don’t think in terms of exact screen sizes.” — with rationale
“Use as much ‘real’ of data/copy/media as you can.” — because real content makes a difference when designing for a wide range of devices and form factors
Also a series of notes, in very readable paragraph form (and benefiting from Walton’s wonderful knack for typographic design).
Some of my favorite points, each illustrated with helpful thoughts and examples:
“ditching the assembly line method of site building for a more communicative, iterative process will be helpful.”
“I still use Photoshop, but I use it differently.”
“I finish in a mobile-first fashion,” but “I begin with wide views because the layout is usually more complex.”
“let media queried breakpoints be defined by content/layout rather than any specific device. Whenever things don’t fit or hierarchy breaks, add a media query. My favorite example of this is if we set a max-device-width media query at 480px to target an iPhone 4, the iPhone 5 wouldn’t display any of the targeted styles because the screen is larger.”
You know what they say about the plumber’s house — always the last to get its plumbing fixed. Something similar with this part-time web designer’s blog. I’ve had a design in the works for awhile … and now I’ve just decided to speed the process by taking it live and living dangerously for a few days.
Holy smokes look out!
Bugginess may ensue. Occasional ugliness must be forgiven.
One could argue that WordPress is fast becoming the MS Word of the Web — except that it’s open source and has approximately 1.5 kajillion contributors hammering out and sharing enhancements for free or cheap.
Recently, the Roots Theme has taken serious WP development a step forward by learning extensively from the HTML5 Boilerplate, cleaning up some unnecessary WP cruft, and riding on Twitter Bootstrap’s excellent LESS-CSS/JS front-end toolkit.
Working with Roots as its starting point, Aristeides Stathopoulos takes us yet another step along the path to world domination (or at least WP development bliss). His Shoestrap Theme — available as a standalone fork of Roots or as a Roots child theme — combines all the goodness we’ve known and loved in the Roots theme, plus …
Shoestrap adds:
WordPress’s theme customizer, such as found in the Twenty Twelve theme, with controls for uploading a logo image, modifying the header and footer, setting the color of the navbar, selecting a Google web font, adding social links, and more.
Additional layout options, with primary and secondary sidebars.
lessphp baked in, enabling a developer to compile LESS live on an installed WP site. Enable the theme’s Developer Mode (a Shoestrap theme option), and phpless will check the theme’s Bootstrap-based LESS files and recompile them once you’ve saved edits to them.
Firefox refused to display my Font Awesome icons. After some research I found it was a cross-domain issue created by the fact that the files were being served from a CDN. (Specifically, WP Engine’s CDN.)
The fix for me was to place an .htaccess file inside the font directory containing these lines:
<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
This cleared it up for me. All now works as it should.
data enhanced 