Learn and Visualise Flexbox

Link | Source
Posted on: December 8, 2017

The last few days at work I’ve been creating page layouts for some new websites. Given these were from scratch, rather than the recent swathe of updates to sites I have been doing I thought it was a good chance to apply some flexbox css. I have used it before a little in Angular applications, using Angular Flex-Layout, but hadn’t really used it natively.

Good old mate css-tricks has a nice little guide about what the settings are, but I was having a hard time remembering all the options and which one did what etc. I just couldn’t picture it. So I decided I would make a little tool for both visualising what each setting would do, and for then being able to copy and paste those css atributes straight into my work. I based what I was doing off the excellent Angular Flex-Layout demo here.

Please, check it out on Github (code) and if you have any suggestions feel free to contribute them.


Colour Palette

Link | Source
Posted on: December 3, 2017

A site I was working on recently involved applying a new colour theme as part of a rebuild of an existing site. I was given a base colour and was then required to put in place gradients, and various other shades of that colour at points (think :hov etc). I was then asked to change from the colour I was given to another, and then another. I did what any sane person would, and turned to the internet for help. Unfortunately, I found that despite the wealth of easily found tools for creating palettes of complementary colours and converting hex to rgb and a whole manner of things, I could not find what I wanted. All I wanted was to enter a colour, and get increments of that colour that were lighter and darker all the way to white and black.

Given all my searching had failed me, I decided I would have no choice but to implement this tool myself! And actually, what a fun little task to do. Now, I must stress that this was made with the intent of giving me what I needed as quickly as possible. Consequently, it is imperfect, ugly, and perhaps a little inelegant. However, that can all be changed down the line, what it does do though is meet the exact specification of what I needed!

You can view the tool over on Github (code).