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.
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!