JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class='container'>
 
    <div class='swiper'></div>
    <div class='page active'>
 1.So if I know that all my margins are consistently in the same direction then I can be a lot more confident that if I add, move or remove an element my spacing won’t mess up. This isn’t just about something as pretentious as vertical rhythm, this is about spacing in general. If everything is the same then it doesn’t really matter what is where, it all behaves similarly.
    </div>
    <div class='page'>
2.If I had some odd situation where I have a margin-top on element A, a margin-top and margin-bottom on element B and a margin-bottom on element C how can I be sure that removing B won’t break anything? I can’t, because I mixed up my margins!
    </div>
    <div class='page'>
3.Less to think about

So if you can be sure things are a lot less likely to break there’s one less thing to worry (as much) about.
    </div>
    <div class='page'>
4.One counter argument I got on Twitter today was that I didn’t ‘get’ collapsing margins. This kind of response really annoys (and offends) me. A similar one I get is ‘You just don’t understand specificity!’ whenever I advise against the use of IDs. It’s a developer’s understanding of a subject that allows them to know when to avoid or circumvent something.       
        
    </div>
    

 
</div>
    <div>
<button id='foo'>click</button>
    </div>

CSS

.container {
    border : solid 1px #666;
    width : 80%;
    margin : auto;
    height : 200px;
    position  : relative;
    overflow : hidden;

}
.page {
    box-sizing : border-box;
    width : 100%;
    padding : 12px;
    position : absolute;
    left : -100%;
    top : 0;
    
}
.page.active {

    animation : page 1.2s linear;
    transform : translateX(100%);
}
@keyframes page {
    
    0% {
        transform : translateX(0);
        opacity : 0.1;
    }
    20% {
        opacity : 0.1;
    }
    100% {
        transform : translateX(100%);    
        opacity : 1;
    }
}

.swiper {
    box-sizing : border-box ;
    width : 100%;
    height : 100%;
    background : black;
    padding : 12px;
    position : absolute;
    transform : translateX(-100%);
    top : 0;
    z-index : 2;

}
.swiper.active {
    animation : anim linear 1s;
    
}



@keyframes anim {
    0% {
        transform : translateX(-100%);
    }
    50% {
        transform : skew(-35deg);
    }
    100% {
        transform : translateX(100%);
    }
}

JavaScript

var foo = document.querySelector('#foo');
var swiper = document.querySelector('.swiper');
var pages = document.querySelectorAll('.page');

foo.addEventListener('click', function(event) {
    var currentPage = _.findIndex(pages, function(page) {
    	return page.classList.contains('active');
    });
    pages[currentPage].classList.remove('active');
    var nextPage = ++currentPage % pages.length;
	swiper.classList.remove('active');
    setTimeout(function() {
    	swiper.classList.add('active');
        pages[nextPage].classList.add('active');  
    },10);
}, false);