Not WYSIWYG

by phloe

HTML

<div class="ui"></div>

<ol class="item-list">
    <li class="item--default">
        <div>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="image--16-9">
                <img src="https://placeimg.com/640/360/tech" />
            </a>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="heading--xlarge"><span></span><b contenteditable="true">Hello: </b><i contenteditable="true">Kommuner har udstedt 11.000 pas med fejl</i></a>
            <p contenteditable="true">Danske myndigheder beskyldes for hverken at inddrage eksperter eller borgere i arbejdet mod et slutdepot.</p>
            
            <ul>
                <li></li>
            </ul>
        </div>
    </li>
    <li class="item--type-b">
        <div>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="image--16-9">
                <img src="https://placeimg.com/640/360/tech" />
            </a>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="heading--medium"><span></span><b contenteditable="true">Hello: </b><i contenteditable="true">Kommuner har udstedt 11.000 pas med fejl</i></a>
        </div>
    </li>
    <li class="item--type-b item--focused">
        <div>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="image--16-9">
                <img src="https://placeimg.com/640/360/tech" />
            </a>
            <a href="http://www.dr.dk/Nyheder/Regionale/Koebenhavn/2015/03/27/090946.htm" class="heading--medium"><span></span><b contenteditable="true">Hello: </b><i contenteditable="true">Kommuner har udstedt 11.000 pas med fejl</i></a>
        </div>
    </li>
</ol>

CSS

@font-face{font-family:"gibsonLight";src:url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/light/gibson-light-webfont.svg") format("svg");font-weight:normal}@font-face{font-family:"gibsonRegular";src:url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/regular/gibson-regular-webfont.svg") format("svg");font-weight:normal}@font-face{font-family:"gibsonSemiBold";src:url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot");src:url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.eot?#iefix") format("embedded-opentype"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff2") format("woff2"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.woff") format("woff"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.ttf") format("truetype"),url("https://www.dr.dk/assets/fonts/gibson/semiBold/gibson-semiBold-webfont.svg")...

JavaScript

var $ = function (selector, parent) {
    return (parent || document).querySelector(selector);
};

var create = function (tag) {
  return document.createElement(tag);  
};

var inputs = {}

var elements = {
    item: "[class*=item--]",
    image: "[class*=image--]",
    heading: "[class*=heading--]",
    toggler: "span",
    label: "b",
    text: "i"
};

Object.keys(elements).forEach(function (name) {
    elements[name] = $(elements[name]);
});

/*elements.heading.onclick = elements.label.onclick = elements.text.onclick*/ document.body.onclick = function (e) {
    var target = e.target;
    if (target.nodeName.toLowerCase() === "a" || target.parentNode.nodeName.toLowerCase() === "a") {
        e.stopPropagation();
        e.preventDefault();
    }
};

// UI

var inputs = {
    "item-state": "item--focused",
    "item-type": {
        label: "Type",
        default: "item--xlarge",
        values: {
            "item--type-a": "A",
            "item--type-b": "B",
            "item--type-a-2": "A-2",
            "item--type-a-3": "A-3"
        }
    },
    "item-style": {
        label: "Style",
        default: "item--default",
        values: {
            "item--default": "Default",
            "item--story": "Story",
            "item--grey": "Grey",
            "item--blue": "Blue",
            "item--red": "Red"
        }
    },
    "image-ratio": {
        label: "Billede",
        default: "image--16-9",
        values: {
            "image--3-4": "3:4",
            "image--1-1": "1:1",
            "image--4-3": "4:3",
            "image--16-9": "16:9",
            "image--2-1": "2:1"
        }
    },
    "heading-size": {
        label: "Rubrik",
        default: "heading--xlarge",
        values: {
            "heading--small": "18px",
            "heading--medium": "24px",
            "heading--large": "30px",
            "heading--xlarge": "36px",
            "heading--xxlarge": "42px",
            "heading--xxxlarge": "48px",
           ...