The definitive source of the best
JavaScript libraries, frameworks, and plugins.

  • ×


    A mini dependancy-less UI lib for flipping over DOM nodes.
    Filed under 

    • 🔾35%Overall
    • 1,553
    • 161.8 days
    • 🕩164
    • 👥4


    Are over here:

    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 has a single function: flippant.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.
    // call the close method on the back element when it's time to close.
    // alternatively you can trigger a close event on the back element if you fancy.
    var close_event = new CustomEvent('close')

    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.


    Grab the JS and the CSS file. Use them. The JS file is a UMD package so require or commonjs it or just use it. It's not picky.

    Show All