The making of mole.tk
LESS is more
The LESS compiled CSS is a really powerful way of generating CSS. I can shrink the time I write code, since I can use variables and mixins. An example of a mixin I'm using is with images. For each header I'm using an image, with a
I use this by creating a div with class
image and then I provide an ID. For the image above I'm using
For this mixin, I'm using a simple way of applying code rapidly to different text elements. I'm setting a default variable at
@size: 16px however this is changed when my
h3 uses the mixin, making the font size 24px
Brackets Text Editor
Chrome Developer Tools
It would be quite ironic to claim I'm into UX without proving it on my website. Therefore I spent alot of time figuring out the correct colour scheme.
Using the awesome online tool Colorable, I created a complimentary and accesibile colour scheme which is AA accesible.
I also have implemented a hover and click states for link items. This just contributes to a better user experience which is best demonstrated on the menu items.
Go ahead try them out!
I really can't stand bootstrap buttons. So I rolled my own. I was inpsired by this codepen, and then decided to style my own ones.
Now I know that outline buttons can potentially bring a bad user experience, this is why I implemented more interaction and hover effects. I also added a fill effect so that the user knows that the button is being clicked. View the source for the buttons.