CSS

At Drupalcon North America, I gave a presentation talking about my experience with the hot new CSS utility class system, Tailwind. I definitely learned a lot while working with it, the good, the bad, the ugly.

TLDR; Tailwind is better than Bootstrap.

The slides and video of the presentation are available in the presentations section of my website.

At the most recent SingaporeCSS’ Talk.CSS meetup, I gave a presentation about how Sass’ cool nesting feature is finally coming to CSS. While it hasn't been implemented in any browser yet, we'll discuss the spec and how to start using it today in your CSS.

The slides of the presentation are available in the presentations section of my website.

Last Friday, I gave the first in a series of front-end web development talks here in Taipei. There were 11 attendees as we discussed in length how to structure a site’s styles with CSS components and Drupal 8 naming conventions.

The success of the class was entirely due to the participants who were engaged and asked lots of questions to probe their understanding of the concepts and challenge me on things that seemed a bit off on my slides. We talked for over 3 hours; here are some highlights:

Today I came across some notes I made 5 years ago in March of 2007. In it I dream of a world where I could define my own “CSS keywords”. Today I have something better. I have Sass.

Back in the day, all the CSS of the sites I built were in a single file: style.css. Things were easy. I built the site; I organized my styles; I knew where everything was.

Of course, then I discovered the power of leveraging an open-source community. And now there are innumerable developers writing the CSS for my websites. To keep things manageable, each module of functionality has its own stylesheet.

Unfortunately, once you get in the habit of having multiple stylesheets for your website, you will eventually run into a weird problem with Internet Explorer: some of your styles won’t apply. At all.

And if you have sufficient Google-fu, you’ll eventually discover this is a little known bug: Internet Explorer will only load the first 31 stylesheets and will ignore the rest. And this isn’t even limited to our usual suspect, IE6. All versions of IE have this limitation.

The Full Problem
and why I was insane enough to load 993 stylesheets on one page

A few days ago, Jeff Burns wrote “Source Order: why I think Zen gets this wrong”.

His basic premise is that content-first HTML source ordering is an SEO-driven idea, is not backed by any accessibility studies, and goes against user expectations. While I respect his opinions, um… he’s wrong. :-)

After a month and a half beta period with only 5 bugs discovered (and squashed), the O-fficial Zen 5.x-1.0 version has been released. Yay!

Thanks to everyone who helped with new features, bug fixes and documentation suggestions! The help is greatly appreciated!

For those of you who haven't looked at Zen since its 5.x-0.6 days, take it for a spin. No longer do you need to un-theme the Deliciously Blue style out of Zen before adding your own styles. It’s a true base theme.

Steven Wittens was a co-creator of Drupal’s beautiful default theme, Garland. And he has a thought-provoking post about the current state of design in the Drupal community and his frustrations in trying to improve it.

Many of the arguments in the comments to Steven’s blog were that designers tend not to collaborate. And that they can be difficult for programmers to work with. And that the Drupal community lacks many good designers. Some even said designers are prima-donnas and they don’t know CSS.

I started this exercise with a simple bordered div which contained four divs that each had a background-image and that were positioned in each of the corners. This worked great in Mozilla 1 and Netscape 6, but not anywhere else. As I fixed bugs in each of the other browsers implementations, I ended up with this code.

This hack can be used to hide CSS from Opera (versions 5 and below):

html>body .myDiv { m\yProperty: myval; }