Tag Archives: VanillaJS

TINDERESQUE – BUILDING A TINDER-LIKE INTERFACE WITH CSS ANIMATIONS AND VANILLA JS


via Tinderesque – building a Tinder-like interface with CSS animations and vanilla JS #justcode | Christian Heilmann.

Tinder is a very successful dating app, and one of its features is a way to say yes or no to prospective partners by swiping right or left or pressing a yes or no button. The interface is cards that drop when you press the buttons.

As with any successful interface, a lot of clones that mimick them happen very fast. One of those is FontFlame – a Tinder for Font Pairings. When I saw this one, I thought the animation isn’t right (it just moves to the right or left and fades, there’s no turning or popping up). I tried to fix the CSS animation to match more closely what Tinder is doing, but to my dismay I found out that whilst Fontflame uses CSS animations, they get over-ridden by jQuery ones. I contacted the author and offered my CSS animation to replace the current one.

Material Design Lite: Material Design Lite Components in HTML/CSS/JS


via google/material-design-lite.

An implementation of Material Design components in vanilla CSS, JS, and HTML

Material Design Lite (MDL) lets you add a Material Design look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks or libraries. Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.

A closer look at VanillaJS


Click to Read

In a previous article I wrote about some of the advantages of using the native javascript language, often referred to as Vanilla JS.
Vanilla is a term used in many computing-related topics when a software is used in its original or basic form, without any customization or framework applied on top of it.

A closer look at Vanilla JS