Web components that can be built purely using css, NO Javascript

In this series, my aim has been to introduce and teach some of the cooler and more useful web components using css-css3 techniques without the use of javascript.

My goal is to make a free UI kit out of these components that you can use in your projects. So, stay tuned!

1. Step progress bar

This is one of the useful components that is used usually in multi-step sign up forms and any use-case that needs a consecutive progressive flow to be shown to the user.

CSS techniques used

• Pseudo-elements :before :after
• + selector
• css counter

Following is the tutorial on how to make this.

Demo: http://fbfriends.nailfashionsweden.se/default.html

code: https://gist.github.com/Raminsiach/e3410c75b496578ec3a0

2. Notification panel with vertical Timeline

This component is a very nice component used in timelines. Google uses it when people comment or ask questions in its forums and it’s used in many notification panels.

CSS techniques used:

• Pseudo elements :after

To make this vertical timeline visit the following tutorial.

Demo: Click on the bell icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

Code: https://gist.github.com/Raminsiach/3e59c3c8e50a6ba13825

3. Customized html Checkbox

Standard checkboxes are a bit ugly and a lot of new websites use the customized version. This tutorial is particularly nice because it talks about a couple of css3 tricks like transforms, pseudo-elements and sibiling selector in greater detail.

CSS techniques used:

• Pseudo elements :before :checked
• transform
• + selector

Take a look at the tutorial.

Demo: Login to facebook using the facebook button in the page and go to next step

http://fbfriends.nailfashionsweden.se/default.html

Code: https://gist.github.com/Raminsiach/69011f1f751fb0c43f66

4. Advanced Toggle Switch

This is one of the coolest elements that I have seen so far. It has been used in many good UI and good looking websites and now part of Angular material design library which is useful for setting a config or a setting on/off.

CSS techniques used:

• Pseudo elements :before :checked
• transition
• + selector

Let’s look at how its created.

Demo: Click on the gear icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

Code: https://gist.github.com/Raminsiach/e66de1d8196cfab58d3c

5. Customized range selector

This component is usually used for any sort of range selector. The cool thing about this tutorial is that It talks about some of the good parts of pseudo-elements and webkit-appearance.

CSS techniques used:

• Pseudo elements :before :after :nth-child(n)
• transition
• + selector
• css counter
• appearance, -webkit-appearance
• input::-webkit-slider-thumb

Take a look at how this cool element is created.

Demo: Click on the gear icon on top right corner: http://fbfriends.nailfashionsweden.se/default.html

Code: https://gist.github.com/Raminsiach/8473df8b75e77ad01a86

Conclusion

These components show how powerful css3 is in terms of making things that were not possible using the old css techniques. Many people try to use Javascript to make these components. Of course Its easier and faster but I believe we need to use javascript when it is really needed. The reason for that is not because we should make sure 100% that we develop a performant code. One could say we have enough machine power these days that we can spare a bit or two here and there, but think of it as a best practice which makes the code base cleaner and in the long run, less confusion and headaches in the long run.