The CSSConf debuts down under.

Ana Tudor took to the stage and demo'd how to make and explode a rhombic dodecahedron using only CSS/SASS and a whole lot of clever maths.

On April 9th I flew the coop to attend CSSConf in Melbourne. Launched in 2013 by superstar web designer Nicole Sullivan, this is the first time the event has come to the southern hemisphere. It was an inspiring day packed with fresh concepts and useful tricks. Here are four of my favourites:

1. Nicole Sullivan on following your heart.

Nicole kicked the conference off with my favourite quote of the day: follow your heart (and f*ck your career).

This truly inspired me on a personal level. Coming from an Asian background, I was brought up with the cultural requisite to achieve prefect grades and a good career. No one has ever told me to follow my heart before. Luckily I did, because here I am, doing what I love: building websites. :)

2. Nicolas Gallagher on adaptation and components.

When building a website, it is considered good practice to make its constituent parts flexible and reusable. Ideally, the code to make a module (like a video player for example) should work after being dropped into any part of a project. In reality it doesn’t, as the code for such a module (CSS, JS, HTML) is often kept in different folders.

In his enlightening talk, Nicolas introduced Web Components: an elegant solution to this problem. They encapsulate the HTML, Javascript, CSS and other elements that make a module into one place, so it can be dropped into a project and remain intact. This is super exciting!

No longer just a vague concept, Web Components are making their way through to browsers and the W3C as we speak. Tools like Google’s Polymer and Facebook’s React are being built and enhanced.

3. Simurai on “designing with strings”.

Warning: CSS nerd speak to follow!

Interestingly, if you set an element’s color property, the same color will be inherited for the properties: border, outline, box-shadow and text-shadow (if no other color is specified). This can be written explicitly as currentColor. For example:

p {
    color: red;
    border: 1px solid; /* will implicitly be red */
    border: 1px solid currentColor; /* Does the same thing */
}

A simple but amazing technique; I can’t believe I didn’t know about this earlier! This is amazingly useful especially in flat UI elements design or when you’re simply doing prototyping.

Have a play:

Never knew color works like that until @simurai's "Designing with string" talk at #cssconfau...

4. A mind blowing conclusion: Ana Tudor takes CSS and maths to the next level.

Last but not least, Ana Tudor took to the stage and demo’d how to make and explode a rhombic dodecahedron (a term I hadn’t even heard before) using only CSS/SASS and a whole lot of clever maths. Ana made me wish I could remember the maths I learnt in high school!

It was an inspiring, thought-provoking day out, and I’d like to give a big thank you to Hatchd for giving me the opportunity to attend.