FlexKostra v1

by Petr Haluza

HTML

<body id="SiteBody" class="Site">
<header class="header">
    <button id="ToggleMainNavigation">Menu</button>
    <nav id="MainNavigation" role="navigation">
        <ul>
            <li><a href="">neco</a></li>
            <li><a href="">neco2</a></li>
        </ul>
    </nav>
</header>
<div id="Darkener"></div>
<div id="AllContentWrapper">
<section class="wrapper" id="main" role="document">
    <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
            tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
            semper. Aenean ultricies mi vitae est. Mauris placerat...

CSS

/* Základ */
.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  position: relative;
  max-width: 1253px;
  margin: 0 auto;
  width: 100%;
}
.wrapper > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1 100%;
  -ms-flex: 1 100%;
  flex: 1 100%;
}

#AllContentWrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: -webkit-calc(100% - 43px);
  min-height: calc(100% - 43px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 43px;
  -webkit-overflow-scrolling: touch;
  height: -webkit-calc(100% - 43px);
  height: calc(100% - 43px);
  width: 100%;
  overflow: auto;
}

.header {
  height: 43px;
  background: black;
}

.footer {
  min-height: 100px;
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.main {
  text-align: left;
}

.aside-1 {
  background: #fafafa;
  position: fixed;
}

/* vyjizdeci navigace */
#MainNavigation {
  position: absolute;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 250px;
  background: #cccccc;
  z-index: 2;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  -webkit-transition: -webkit-transform .4s ease;
  transition: transform .4s ease;
  top: 0;
}
#MainNavigation.open {
  -webkit-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

#Darkener {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
  opacity: 0;
  background: #000;
 ...

JavaScript

(function () {
        var createNavigationToggler = function(MainNavigationId, ToggleNavigationId, Darkener) {
            var touched = 0, body = document.getElementById('SiteBody'), mainNav = document.getElementById(MainNavigationId),
                    toggler = document.getElementById(ToggleNavigationId), darkener = document.getElementById(Darkener);
            mainNav.addEventListener('touchstart', function (e) {
                requestAnimationFrame(function () {
                    touched = e.touches[0].clientX;
                    e.srcElement.mustHide = false;
                    e.srcElement.style.transition = 'transform 0s ease';
                });
            });
            mainNav.addEventListener('touchmove', function (e) {
                requestAnimationFrame(function () {
                    var x = e.touches[0].clientX, target = e.srcElement, calc = touched - x,
                            bounds = target.getBoundingClientRect();
                    if (calc >= 0) {
                        target.mustHide = calc > bounds.width / 2;
                        target.style.transform = 'translate3d(' + (calc * -1) + 'px,0,0)';
                    }
                });
            });
            mainNav.addEventListener('touchend', function (e) {
                requestAnimationFrame(function () {
                    var target = e.srcElement;
                    if (target.mustHide) {
                        target.style.transition = 'transform .3s ease';
                        target.style.transform = 'translate3d(' + (target.getBoundingClientRect().width * -1) + 'px,0,0)';
                        setTimeout(function () {
                            target.style.transition = '';
                            target.style.transform = '';
                            target.className = '';
                            darkener.className = '';
                            body.className = 'Site';
                        }, 300);
                    }...