50 shades of grey. Almost.

I was sent this by a developer in the office, from the SASS file for a web app.

/* greys */
$grey1: #DEDEDE;
$grey2: #CCCCCC;
$grey3: #333333;
$grey4: #666666;
$grey5: #999999;
$grey6: #f7f7f8;
$grey7: #dddddd;
$grey8: #eeeeee;
$grey9: #777777;
$grey10: #f5f5f5;
$grey11: #f9f9f9;
$grey12: #e8e8e8;
$grey13: #e5e5e5;
$grey14: #555555;
$grey15: #737373;
$grey16: #e6e6e6;
$grey17: #adadad;
$grey18: #262626;
$grey19: #f8f8f8;
$grey20: #e7e7e7;
$grey21: #888888;
$grey22: #222222;
$grey23: #080808;
$grey24: #9d9d9d;
$grey25: #4A4A4A;
$grey26: #101010;
$grey27: #d5d5d5;
$grey28: #e3e3e3;
$grey29: #ebebeb;
$grey30: #bbbbbb;
$grey31: #efefef;
Notice the wonderful concise and informative referencing of the classes, easy reference was not top of the priority list I presume. But this is what happens when you are sent PDF’s from the designer.

CSS Me

I was bored in work, and just days after migrating this blog to hosted WordPress.com, I decided to move it back to a self-hosted one at sarkymarky.com, which in hindsight was a good idea as it’s cleared all the shit from the site.

Anyhoo, I was stuck on what to put on this crap, so while actually doing some work in CSS, I had a little bit of an idea… why not CSS myself. Wow Mark, you have too much spare¬†time.

So I set up a little Text widget in the footer and started writing, which is always a struggle for myself as I’m relatively modest, yes seriously :p

I use the Monokai theme in Sublime Text, Brackets and VSCode and since the footer on this theme is black, let’s run with it.

Add some DIV tags to seperate the content, a little padding to make it a little more legible and wrap the selector, property and values in span’s and ta-dah!

Now let’s copy the colours from Monokai, and drop them into CSS.

And boom.

If you don’t have a dark background, here’s the Visual Studio scheme.

CSS styling the BUTTON, Anchor and INPUT

When we released version one of the WordPress of works web site, we were using the7 theme from Dream Forest, not my first choice but just because it’s what they thought looked fantastic at the time. On the plus side, anything was better than the god awful CakePHP version, which looked like Moses brought down from the mountain with him along with the ten commandments.

By the time I was involved with the development, the content was pretty much complete and while I plugged away adding the new features to the site as they were requested, one thing really got on my wick¬†more than anything else, and that is … buttons. Combine Contact Form 7, Visual Composer and the7 theme‘s own additions and you have a¬†disaster when it comes to a uniform look across the web site. Let me illustrate¬†what drove me crazy.

When you add a button in Visual Composer, you get this:

anchors-buttons-inputs-example-2

Looks fine, and my preferred look (pretend you can’t see the¬†¬†different fonts,¬†letter spacing and font weight). However, add a poll or Contact Form 7 and the submit button looks like this:

 

anchors-buttons-inputs-example-1

Oh look at the glorious over the top CSS gradients and shadows. It’s a good lesson for “designers” that just because you CAN do something, doesn’t necessarily mean you SHOULD. And I have to ask… what is that shit doing in the flat version of the theme anyway?

Rant over, of course I missed off the graphic buttons we used on the web site all over the place because there was no method for adding them in the backend. So over the entire site, you have three different styles of buttons and no consistency between ANY of them, but luckily not everyone is as anal as I am so no one  noticed or mentioned it.

So when I decided on my own initiative to create a new theme that was more lightweight than the bloated piece of crap that is the7 theme (I can feel another rant coming on about that theme!), it was my dream to have <BUTTON>, <A> and <INPUT> look visually identical in ALL browsers, yes even Internet Explorer 8. Yes I know, but people still use that pile of crap in the company so it has to be supported.

I also wanted to stop using PNG images as buttons as it’s a waste of resources, plus it means myself or the designer would have to do work which don’t have time to do.

With the CSS done, the HTML is unremarkable.

Hey presto, uniformity with buttons, input and anchors across the web site.

This code¬†as used as the basis for writing an extension plug-in for Visual Composer which allows users to add a kick ass button with FontAwesome support without harassing the poor developer. Or¬†designer, but I’m out of sympathy for designers (Sorry Matt! :)).

Click here to download the zip file