Flexi gives you flexible column controls, similar to bootstrap, except with more control over vertical alignment, flow-over, responsive reordering, and more. @TODO

These give you the ability to offset columns.

• Shifting adds leading space
• Pushing adds trailing space.
• Squish adds leading AND trailing (both of the above).

• {breakpoint}-shift-{x} {breakpoint}-push-{x} {breakpoint}-squish-{x}
  • Example: md-shift-12 would add a 50 margin-left at the MD breakpoint only
  • this does NOT cascade, and only applies to the targeted breakpoint
  • breakpoint specific shift/push/squish will always trump non specified.
• shift-{x} push-{x} squish-{x}
  • shift-12 would add a 50% margin-left for ALL breakpoints
  • this DOES cascade to everybreakpoint, unless overriden.

gives us the ability to define a domNode as modal - with a simple to use triggering system

1. Define an element as modal by adding a `modal` class: <div class="modal">
   • You may need to add an `id` or, ensure that this can be uniquely identified via a `document.querySelectorAll` (like jquery)
   • They are hidden by default
2. Attach your show/hide/toggle somewhere, or to something...
   • Create a `hard` trigger with a dom node:<a href="#" data-modal-[show/hide/toggle]="#id_or_query_string">Click here</a>
     • If using the above, and you embed the button inside the modal, there is no need to define the value of the data-modal[show/hide/toggle], as it will automatically find the closest modal ancestor:<a href="#" data-modal-hide>Click here to hide</a>
   • Trigger in JSdocument.getElementById('show_my_modal').addEventListener('click', function() { modal('#id_or_query_string', 'show');});
     • The above wasnt tested, but you get the picture
   • trigger manually with an inline onclick event<span onclick="modal('#id_or_query_string', ['show'/'hide'/'toggle'])">Click here</span>
     • this is not a recommended way, but it does work
     • unlike the above, you must specify the query selector