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 <h1> tag.

I use this by creating a div with class image and then I provide an ID. For the image above I'm using id="fresh"

Typography

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

Technologoies Used

Affinity Designer

Affinity Photo

Brackets Text Editor

Codekit Compiler

Chrome Developer Tools

Google Fonts

Accesibility

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.

Accesibile colours for moletek

Buttons

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.