Flippant.js

A mini js+css library for flipping things over.

Try it out on the buttons below

Get the code at github.com/mintchaos/flippant.js

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Modal » Card »

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

Modal » Card »

Heading

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Modal » Card »


Whys and hows:

Flippant is tiny. It does just enough and no more. It has zero dependencies.

Flippant is easily customized. A couple of arguments, and CSS.

Flippant exports a single function: flip. Use it to flip things!

var front = document.getElementByID('flipthis')
  , back_content = "<h1>I'm the back!</h1>" // Generate or pull any HTML you want for the back.
  , back

// when the correct action happens, call flip!
back = flippant.flip(front, back_content)
// this creates the back element, sizes it and flips it around.

// invoke the close event on the back element when it's time to close.

// call the close method on the back element when it's time to close.
back.close()
// alternatively you can trigger a close event on the back element if you fancy.
// var close_event = new CustomEvent('close')
// back.dispatchEvent(close_event)

Two modes: card (the default), and modal.

back = flippant.flip(front, back_content, 'modal')

The back gets the default class of flippant-modal-dark for modal flips and flippant-modal-light for cards. These styles can be overriden or you can pass in your own class.

back = flippant.flip(front, back_content, 'modal', 'my-modal-classname')

The full API:

flip(element_to_flip, content_for_back, type(modal/card), classname_for_back) -> back_element

74.3% of the magic is in the css file. Override however you'd like.