UI Patterns: float label pattern

[vitkon]

http://bradfrost.com/blog/post/float-label-pattern/

https://css-tricks.com/float-labels-css/

@mattdell might share some implementation details, pros / cons

[mattdell]

I can recommend this implementation: https://github.com/fauxparse/bootstrap-floating-labels/issues/4

document.addEventListener('input', function(e) {
  if (e.target.value && e.target.parentElement.classList.contains('floating-label-form-group') && !e.target.parentElement.classList.contains('floating-label-form-group-with-value')) {
    e.target.parentElement.classList.add('floating-label-form-group-with-value');
  } else if (!e.target.value && e.target.parentElement.classList.contains('floating-label-form-group') && e.target.parentElement.classList.contains('floating-label-form-group-with-value')) {
    e.target.parentElement.classList.remove('floating-label-form-group-with-value');
  }
})

document.addEventListener('focusin', function(e) {
  if (e.target.parentElement.classList.contains('floating-label-form-group')) {
    e.target.parentElement.classList.add('floating-label-form-group-with-focus');
  }
});

document.addEventListener('focusout', function(e) {
  if (e.target.parentElement.classList.contains('floating-label-form-group')) {
    e.target.parentElement.classList.remove('floating-label-form-group-with-focus');
  }
});

[vitkon]

@mattdell can we add a pattern to Responsive.md and some useful links / gists?