CSSConfAU 2015

What I’ve Learned at CSSConfAU 2015

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:

  1. Sara Soueidan doesn’t like tomatoes unless they are drawn in SVG
  2. Evangelina Ferreira likes Aussie beer more than football (is she really Argentinian?)
  3. 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

CSSConfAU 2015

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

CSSConfAU 2015

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

CSSConfAU 2015

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).
  • Push the boundaries.

Conclusion

CSSConfAU 2015

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.

13 thoughts on “What I’ve Learned at CSSConfAU 2015”

    1. Petr Tichy Post author

      Shame on me Jachin!! I’ve asked Mike for a permission and updated the article with a disclaimer. There’s really no excuse for not doing that before hitting the publish button (late last night). Hope it’s ok now.

      Reply ↓
  2. Hendrik Runte

    Thank you for this article!
    Just one issue: Shouldn’t it read

    &:after {

    instead of “&:after” in line 5 of “How to use .clearfix in 2015”?
    Best, H.

    Reply ↓
  3. Hendrik Runte

    Fun fact: WordPress converted the second ampersand in my request from & a m p ; to &… Oh my … 😉

    Reply ↓
  4. Tom Durkin

    I stopped using clearfix a few months back. overflow:hidden; on the parent container sorts it all out.

    Anyone know of any reason why overflow isn’t a much cleaner and easier option?

    Reply ↓
    1. Petr Tichy Post author

      Thanks for the comment Tom. I know that overflow: hidden does a similar trick, I think I had some issues with it on a few projects though.

      clearfix always felt like a “cleaner” hack to me.

      Reply ↓
      1. Robert Smith

        Overflow:hidden has the issue that it hides overflowing content, sometimes we do not want this behavior.
        Clearfix in my opinion is cleaner because it has zero side effects, it just does one thing.

        In my opinion though I don’t see adding clearfix to your markup an inherently bad thing, I see it like I do a helper function, Harry Roberts has written about how useful helper classes can be in one-off scenarios.

        I have a clearfix defined on my grid, and I find I’m rarely using floats elsewhere, maybe a couple of times throughout a project so a few clearfix classes hardly poses a problem. Classes in markup are not a bad thing, we shouldn’t be working so hard to reduce them Gzip works wonders for crunching them all down.

        For now I still use negative margins because transforms generate more code when you look at all the vendor prefixing (Using Autoprefixer). using Sass variables the negative margins shouldn’t be using magic numbers if you’re just diving the $height by 2 to center.

        Reply ↓
  5. Valerio Pierbattista

    these are always in my _mixin.scss partial: http://valeriopierbattista.com/blog/a-small-collection-of-useful-sass-mixins/ 🙂

    Reply ↓
  6. Indah Ibrahim

    I really like how you pour it on sketch and you pick up some really good points definitely will be helpful for my next project. Thank you Mike !

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.