Long time ago in a World Wide Web far, far away… a small community of developers used the !important statement, just to be sure that no other code is changing anything of the styles you are defining… but finally their css ended with !important over !important over !important… and the web becomes a worse place to live. That’s when Yoda-veloper appears and said:

!important we should not use , for web safe it is.

Then, start the era of the Jedi-velopers and !important …


Image for post

It’s very common using Sass to need to get the best color for text depending on the background-color. If you are using Compass maybe you’ve notice that there is a function called contrast-color that it suppose to do this… but the true is that it fails a lot, in Frontendcore I’ve solve this with custom functions.

It’s not very difficult to do an algorithm to do this, the general idea is to get the lightness of each color and return the most “contrasty”. This is the contrast color function I’m using in Frontendcore overwriting the Compass function.

@function contrast-color (
$color,
$dark: $color-foreground,
$light: $color-background
){
@if $color == null {
@return null;
} @else {
$color-brightness: brightness($color);
$light-text-brightness: brightness($light);
$dark-text-brightness: brightness($dark);
@return if(abs($color-brightness — $light-text-brightness) > abs($color-brightness — $dark-text-brightness), $light, $dark)…


Image for post

… if there are a lot of good options?

Yes I know, there are some frontend framewoks real good out there, and even that I’m creating Frontendcore. What’s the reason of this?

I can do it better

Nop. It’s not true, for example all the scss code behind foundation it’s really good and I don’t think I’m able to do it better.

I have a new system pretty cool

Nop. AngularJS is pretty cool… from the infinity and beyond. It’s the most innovative way to work and my framework it’s not going to beat it.

Because in the real life you need to do it well and do it…

About

Toni Pinel

Frontend Engineer, UX Expert & Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store