Archives for posts with tag: css

These days, I find Facebook leaving more to be desired: customization goes as far as a “cover photo,” I’m expected to use their service to do more than stalk people, and well, just, blue.

I’ve never really had the need for user stylesheets in the past, being fairly content with the customization options of most web applications. But Facebook was my catalyst for digging in and popping out a quick user stylesheet (perhaps unsurprisingly, the most used CSS rule was display: none;).

Extensions to the rescue!

I’ve already rid myself of scantily-clad “singles” and used AdBlock Plus for an ad-less experience, but I still find Facebook’s interface cluttered and distracting. So next I installed Stylebot for Chrome (or User Style Manager for Firefox) and commenced removing my unused chat bar.

#pagelet_sidebar {
    display: none;
.sidebarMode .fbx #globalContainer, .sidebarMode .fbx #pageHead, .sidebarMode #blueBar #pageHead {
    padding-right: 0px;

Next, a few pesky sections of links on the left side:

#adsNav, #appsNav /* , #pagesNav, #listsNav, #groupsNav, #interestsNav */ {
    display: none;

And finally, no more unsolicited app requests (but don’t hide our friends’ birthdays!)

/* (App requests and event buttons...? well those aren't birthday_reminders_links at all!) */
a#birthday_reminders_link {
    display: none;
#pagelet_reminders > div > .fbReminders > .fbRemindersStory > a#birthday_reminders_link {
    display: inline;

The entire stylesheet is a gist on GitHub, and works, as of writing. Enjoy!

$ logout

If you’re going the route of a vertical background gradient on your site (using a tool like the Ultimate CSS Gradient Generator (seriously, it’s great)), you might notice it does in fact fill your entire body, but not the entire window like you’re used to with solid colors. Simple fix:

html {
    min-height: 100%;

Just that like that: beautiful browser-based gradients.

I learned about LESS when I started working for the company I do now. And I can no longer live without it, if anything, for simple nesting of rules. The increased intuitiveness and readability you get from doing stylesheets this way is amazing. The Mixins are freakin’ great, too. Seriously, who wants to look up all the vendor-specific prefixes for all the latest CSS abilities every time?

As you might guess, I’ve switched gears to frontend development.

$ logout

This is my first time using HTML5 Boilerplate. I noticed a lot of people have been talking about it, so I decided to give it a go myself. First impressions (a good judge in the web world):

  • I’ve never liked templates, and this one doesn’t change my mind
  • Like any pre-existing code base, though minimal, you have to learn it before you can begin actually creating things (i.e. creating is no longer fun)
  • At best, I’m getting IE support out of this (and I’m a screw-IE kind of web developer)

I thought since this project is for others and not me, it should be professional and support the myriad microformats and Apple icons and such. But I’m currently doing more work tweaking prefabricated names and changing relative URLs to absolute and thinking about how nothing is how I want it to be.

And I’ve tricked myself into thinking I need a package like this. The work and detail there is great; I already learned things by looking through the code and checking some referenced links. But I can implement these basic HTML5 compatibility features with the minimum necessary developments I’ve kept up with and mostly, as a personal preference, I need full sovereignty over my work. So I’ll be starting from scratch.

$ logout