CSSConfAU 2015 is over and this post are just a few notes for myself.

You might find them also useful, just saying.

Apart from the 14 great talks (I’ve missed the last 2, sorry Una), I’ve also learned that:

Sara Soueidan doesn’t like tomatoes unless they are drawn in SVG Evangelina Ferreira likes Aussie beer more than football (is she really Argentinian?) hanging out with a bunch of fellow front-end developers is quite cool.

Now lets get to the CSS/Sass business.

Lesson #1 – Use Sass mix() Function For Subtle Color Tinting

Katie Kurkoski’s talk Colour In The Real World included a few interesting CodePen demos explaining how to mix colors in Sass.

I’ve been using lighten and darken for some time, but here are some other useful functions related to color mixing.

0

Lighten and darken functions quickly blow out the color all the way to black or white. Use mix() for more subtle color tinting and shading.

All links (no slides) from Katie’s presentation

Lesson #2 – 5 Tips For Developing Multi-themed Websites

Harry Roberts talk 4½ Methods for Theming in (S)CSS covered a few techniques useful when developing SaaS, white-label, multi-site hubs or social network clients.

In simple terms: how to setup your CSS or Sass classes when you need to develop a project where the client or user can change the color scheme of the site?

I know from my own experience working on ClickFork, that to let the users manage the look and feel of a website requires a more careful thinking when setting up your CSS stylesheet.

Here are the tips from Harry.

Tip #1 – Theme Layer

This is possibly the most common approach these days.

@import “components.tabs”; @import “components.buttons”; … @import “theme.tabs”; @import “theme.tabs”;

You’ll start with a base/default styling and then override and redefine styles in a new theme file.

You would end up with something like this:

// _components.tabs.scss .tabs { background-color: grey; } // _theme.tabs.scss .tabs { background-color: red; }

The Good

You can swap layers out

You can theme anything

The Bad

Lots of redundancy.

Wasted CSS over the wire.

Shard styles across multiple files.

Tip #2 – Stateful Theming

Style a UI based on a state or condition.

.tabs { background-color: grey: .t-red & { background-color: red: } .t-blue & { background-color: blue: } }

The & after .t-red and .t-blue means that if any parent element (eg. body) has the relevant class, the background color of the tabs would change accordingly.

Resulting CSS will look like this:

.t-red .tabs {background-color: red;} .t-blue .tabs {background-color: blue;}

You can also create stateful utility classes and apply that anywhere in your markup like this:

.u-color-current { .t-red & { background-color: red: } .t-blue & { background-color: blue: } }

<body class=“t-red”> <h1 class=“u-color-current”>…</h1> </body>

The Good

Bundles a number of themes into one codebase.

The Bad

Bundles a number of themes into one codebase.

This could be both good and bad for your project, but definitely an approach worth considering.

Tip #3 – Config Theming

This approach lets you invoke a theme based on settings.

@import “settings.config”; … @import “components.tabs”; // _settings.config.scss $config: ( theme: red, env: dev, ); // Get config out of our map. @function config() { @return map-get($config, $key); } // _components.tabs.scss .tabs { @if (config(theme) == red) { background-color: red; } @else { background-color: grey; } }

The Good

Only sends as little CSS over the wire as necessary.

Alter the entire theme from one location.

The Bad

Lots of logic in your Sass.

Only supports a finite number of themes.

Adding themes could be laborious.

Looks like a great options for a set number of themes.

Tip #4 – Theme Palettes

This approach lets you hold the entire theme in a palette file.

@import “settings.palette”; … @import “components.tabs”; // _settings.palette.scss $color-brand: #BADA55; $color-brand-highlight: lighten($color-brand, 10%); $color-red: red; … $color-links: $color-brand; $color-links-hover: $color-brand-highlight; $color-tabs-background: $color-red; // _components.tabs.scss .tabs { background-color: $color-tabs-background; }

The Good

Zero redundancy.

Perfect for bespoke theming – just plug in the client’s brand colors.

Completely restyle the project from one file.

The Bad

Limited mainly just to theming colors.

Tip #5 – User Customisation

This approach is suitable for projects where the users can style their own UIs (social networks, Sass platforms, brand able software products).

The whole CSS is dumped all in the view.

<style> .u-user-color {color: red} .u-user-color-background {background-color: red} </style> <ul class=“tabs u-user-color-background”>…</ul>

The Good

Requires zero developer input.

Allows users to ‘own’ their profile/platform.

Incredibly pragmatic – always a good thing!

The Bad

Requires zero developer input.

Lots of redundancy.

Wasted CSS over the wire.

Lose the ability to cache styles.

I’ve used similar approach on ClickFork and know that letting the users change too much can result in unexpected results.

In other words, you can’t prevent inexperienced users from putting white text on a white background etc.

View slides from Harry’s presentation here

Lesson #3 – Move away from old habits

Michael Riethmuller reminded us in his CSS Eulogy of the CSS hacks we’ve been using for a while and how we can achieve similar results with less code today.

How to use .clearfix in 2015

Traditionally you would add a class .clearfix to every element containing floating child elements or even more archaic method would be to add an empty <div class='clear'></div> element into your markup.

Thanks to Sass mixins you can keep your html markup clean from these additional classes and use clearfix mixin like this:

@mixin clearfix($extend: true) { @if $extend { @extend %clearfix; } @else { &:after { content: ‘’; display: table; clear: both; } } } %clearfix { @include clearfix($extend: false); }

You can then @include this on every element you would normally clear by adding a class .clearfix :

.columns { … @include clearfix; }

Once compiled from Sass to CSS this results into:

.columns:after { content: ‘’; display: table; clear: both; }

Here’s an example using the mixin from above:

0

Start using viewport units – vw, vh, vmin, vmax

1vh is 1% of the viewport height, 1vw is 1% of the viewport width.

vmin and vmax is looking at both viewport width/height and applies whichever is smaller (vmin) or larger (vmax).

This can be slightly confusing, but in simple terms the 50% is calculated either from the width or height of the viewport, whichever is smaller or larger.

0

Another few things pointed out by Michael:

Stop using negative margins for centering elements and instead start using transform: translate(-50%) .

. Start using <dialog> HTML element for modal windows (more on dialog element).

HTML element for modal windows (more on dialog element). Push the boundaries.

Conclusion

Each talk would deserve a blog post on its own, I just had to quickly write all this Sass stuff down before I forget it.

I know it will be useful on my next few project(s).

Thank you and see you next year CSSConfAU.

Disclaimer:

All the beautiful sketches in this article are courtesy of Mike Sharp.