Vue.js

If you haven’t used vue.js before, then I highly recommend it! You can learn more about the javascript framework here.

Although this tutorial uses vue, it should be very simple to convert this design to any framework as it just uses a single variable.

TailwindCSS

Also if you’ve not heard of tailwindcss it’s a utility-first CSS framework and it’s incredibly powerful! In super simple terms you use lot of very specific class names to shape the design of your site, for example ml-0 is 0px left margin and pt-2 is 0.5rem padding top.

I’m a recent a convert to utility-first css. I will admit it took me two, or three, attempts to wrap my head around it. Also I was resistant to learn a new framework especially when I love using SCSS but after committing to give it a real try for a whole project I’m not sure I can go back to SCSS.

One of the more powerful features is how it allows me to make my designs responsive without the need to write a single media query! For example I can do the following:

class=”w-full md:w-1/2"

Which gives a width 100% as a base and width 50% after 768px browser width. How cool!

You can find more info about tailwindcss here.

Let’s code!

Ok, after that quick overview lets dig into some code! 💻

Step 1 - The HTML outline

Our first step is to build the underlying HTML structure of the toggle switch.

We have a toggle title and then the toggle button.

Here it is important to remember that we should always try to make any interfaces we build as easy to use as possible to use.

Following this rule we are going to make it so that the user can click either the toggle switch or the title. I personally find it annoying when I have to click a small toggle, pressing anywhere on the whole block just feels much more natural.

Base HTML structure for our toggle switch

Ok, so as you can see we now have a div that contains a title, our toggle switch, and then a switch (inside the switch container).

We can now start building on this template using tailwindcss.

#user-interface-design #vuejs #tailwind-css #html5 #frontend-development