Utility Methods

dabblet.css

* {
	box-sizing:border-box;
}


.multimedia-container {
	/* Size of container set via JS depending upon col width */
	width:528px;
	height:264px;
	border-radius:5px;
	overflow:hidden;
	
	/* Just for testing */
	margin-bottom:50px;
}

.media {
	display:flex;
	display:-webkit-flex;
	flex-flow: row;
	align-items:flex-start;
	-webkit-align-items:flex-start;
	align-content:stretch;
	background-color:white;
	height:100%;
}

.media-col {
	flex-flow: column;
	-webkit-flex-flow:column;
	align-items:stretch;
}

.media-cell {
	display:block;
	flex:1;
	-webkit-box-flex:1;
	-webkit-flex:1;
	overflow:hidden;
	position:relative;
	height:100%;
	cursor:-webkit-zoom-in;
	cursor:zoom-in;
}

.img {
	/* Position img vertically centered into containing element */
	position:absolute;
	width:100%;
	top:50%;
	transform: translateY(-50%);
}


/* Utility Methods */

.margin-rs {
	margin-right:2px;
}
.margin-ls {
	margin-left:2px;
}

.margin-ts {
	margin-top:2px;
}

.margin-bs {
	margin-bottom:2px;
}

.margin-lm {
	margin-left:4px;
}

dabblet.html

<!-- one up -->
<div class="multimedia-container">
    
    <div class="media">
        <div class="media-cell">
            <img src="https://pbs.twimg.com/media/BpX0iqnIMAA6BYT.jpg:large" class="img">
        </div>
    </div>
</div>

<!-- two up -->
<div class="multimedia-container">
    
    <div class="media">
        <div class="media-cell">
            <img src="https://pbs.twimg.com/media/BpX0iqnIMAA6BYT.jpg:large" class="img">
        </div>
        <div class="media-cell ">
            <img src="https://pbs.twimg.com/media/BpX0i1vIgAA1DKU.jpg:large" class="img margin-lm">
        </div>
    </div>
</div>

<div class="multimedia-container">
    
    <div class="media">
        <div class="media-cell">
            <img src="https://pbs.twimg.com/media/BqgPaVeCUAAtmel.png:large" class="img">
        </div>
        <div class="media-cell ">
            <img src="https://pbs.twimg.com/media/BqgPaUxCEAAjdSG.png:large" class="img margin-lm">
        </div>
    </div>
</div>

<!-- Three up -->

<div class="multimedia-container">
    <div class="media">
        <div class="media-cell margin-rs">
            <img src="https://pbs.twimg.com/media/BpX0iqnIMAA6BYT.jpg:large" class="img">
        </div>
        <div class="media-cell margin-ls">
            <div class="media media-col">
                <div class="media-cell margin-bs">
                    <img src="https://pbs.twimg.com/media/BpX0i1vIgAA1DKU.jpg:large" class="img">
                </div>              
                <div class="media-cell margin-ts">
                    <img src="https://pbs.twimg.com/media/BpX0i0uIMAAjdKD.jpg:large" class="img">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- four up -->
<div class="multimedia-container">
    
    <div class="media">
        <div class="media-cell margin-rs">
            <div class="media media-col">
                <div class="media-cell margin-bs">
                    <img src="https://pbs.twimg.com/media/BpX0dTlIIAAlHNA.jpg:large" class="img">
                </div>              
                <div class="media-cell margin-ts">
                    <img src="https://pbs.twimg.com/media/BpX0i0uIMAAjdKD.jpg:large" class="img">
                </div>
            </div>
        </div>
        <div class="media-cell margin-ls">
            <div class="media media-col">
                <div class="media-cell margin-bs">
                    <img src="https://pbs.twimg.com/media/BpX0i1vIgAA1DKU.jpg:large" class="img">
                </div>              
                <div class="media-cell margin-ts">
                    <img src="https://pbs.twimg.com/media/BpX0qDuIUAEpvzd.jpg:large" class="img">
                </div>
            </div>
        </div>
    </div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}