Element Queries

Kinda

by Walter Rumsby

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<div class="mod mod-small">
    <div class="page--header">
        <div class="page--header--content box">content</div>
    </div>
    <div class="page--content">
        <div class="box">content</div>
        <ul id="toolbar">
            <li> <a id="s" href="#">Small</a>

            </li>
            <li> <a id="m" href="#">Medium</a>

            </li>
            <li> <a id="f" href="#">Full</a>

            </li>
        </ul>
    </div>
</div>

SCSS

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
    background-color: #fff;
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.box {
    border: 1px solid red;
    padding: 10px;
}

.page--header {
    background-color: #2baaed;
}

.page--header--content,
.page--content {
    margin: 0 auto;
}

.mod-small {
    #s {
        color: #333;
        text-decoration: none;
    }
    
    .page--header--content,
    .page--content {
        width: 200px;
    }
}

.mod-med {
    #m {
        color: #333;
        text-decoration: none;
    }

    .page--header--content,
    .page--content {
        width: 400px;
    }
}

.mod-full {
    #f {
        color: #333;
        text-decoration: none;
    }
    
    .page--header,
    .page--content {
        padding-left: 10px;
        padding-right: 10px;
    }
}

JavaScript

function cn (variant) {
	var s = 'mod';
    
    if (variant) {
        s = s + '-' + variant;
    }
    
    return s;
}

function modify (id) {
    switch (id) {
        case 's':
            pageEl.classList.add(cn('small'));
            pageEl.classList.remove(cn('med'), cn('full'));
            break;
        case 'm':
            pageEl.classList.add(cn('med'));
            pageEl.classList.remove(cn('small'), cn('full'));
            break;
        case 'f':
            pageEl.classList.add(cn('full'));
            pageEl.classList.remove(cn('med'), cn('small'));
            break;
    }
}

function size () {
    var width = window.innerWidth;
	console.assert(width != null, 'width is null or undefined');
    
    if (width < 400) {
        modify('s');
    } else if (width < 800) {
        modify('m');
    } else {
        modify('f');
    }
}

var pageEl = document.querySelector('.' + cn());
var toolbarEl = document.getElementById('toolbar');

toolbarEl.addEventListener('click', function (e) {
    var targetEl = e.target;
    var id = targetEl.id;
    
    e.preventDefault();
    modify(id);
});

size();

window.addEventListener('resize', _.throttle(size, 100), false);