Create device styles

by Hugo Carneiro

HTML

<h1>Device frame</h1>

<div class="form-group">
    <label for="class-name">Class name</label>
    <input type="text" class="form-control" id="class-name">
</div>
<div class="form-group">
    <label for="device-width">Device width</label>
    <input type="text" class="form-control" id="device-width">
</div>
<div class="form-group">
    <label for="device-height">Device height</label>
    <input type="text" class="form-control" id="device-height">
</div>
<div class="form-group">
    <label for="top-margin">Top frame size</label>
    <input type="text" class="form-control" id="top-margin">
</div>
<div class="form-group">
    <label for="left-margin">Left frame size</label>
    <input type="text" class="form-control" id="left-margin">
</div>
<div class="form-group">
    <label for="device-radius">Device border radius</label>
    <input type="text" class="form-control" id="device-radius">
    <p class="help-block">Enter px or % at the end.</p>
</div>
<hr>

<h1>Device detail</h1>

<div class="form-group">
    <label for="placement">Detail placement</label>
    <select class="form-control" id="placement">
        <option value="before">Before</option>
        <option value="after">After</option>
    </select>
</div>
<div class="form-group">
    <label for="detail-radius">Detail border radius</label>
    <input type="text" class="form-control" id="detail-radius">
    <p class="help-block">Enter px or % at the end.</p>
</div>
<div class="form-group">
    <label for="detail-width">Detail width</label>
    <input type="text" class="form-control" id="detail-width">
    <p class="help-block">Enter px or % at the end.</p>
</div>
<div class="form-group">
    <label for="detail-height">Detail height</label>
    <input type="text" class="form-control" id="detail-height">
    <p class="help-block">Will be set using padding-top. Enter px or % at the end.</p>
</div>
<div class="form-group">
    <label for="top-position">Detail top position</label>
    <input type="text"...

CSS

#result {
    width: 100%;
    height: 300px;
    overflow: auto;
    margin-top: 25px;
    border: 1px solid #ccc;
    padding: 15px;
    font-family: "Courier New", Courier, monospace;
}

JavaScript

$('#create').on('click', function () {
    var className = $('#class-name').val();
    var deviceWidth = parseInt($('#device-width').val(), 10);
    var deviceHeight = parseInt($('#device-height').val(), 10);
    var topMargin = parseInt($('#top-margin').val(), 10);
    var leftMargin = parseInt($('#left-margin').val(), 10);
    var deviceBorderRadius = $('#device-radius').val();

    var placement = $('#placement option:selected').val();
    var detailRadius = $('#detail-radius').val();
    var detailWidth = $('#detail-width').val();
    var detailHeight = $('#detail-height').val();
    var topPosition = $('#top-position').val();
    var rightPosition = $('#right-position').val();

    $('#result').html('.device.' + className + ' { width: ' + (deviceWidth + (leftMargin * 2) + 4) + 'px; height: ' + (deviceHeight + (topMargin * 2) + 4) + 'px; border-radius: ' + deviceBorderRadius + '; }')
                .append('<br><br>')
                .append('.' + className + ':' + placement + ' { width: ' + detailWidth + '; padding-top: ' + detailHeight + '; border-radius: ' + detailRadius + '; top: ' + topPosition + '; right: ' + rightPosition + '; border: 1px solid #fff; }')
                .append('<br><br>')
                .append('.' + className + ' .screen { width: ' + (deviceWidth + 2) + 'px; height: ' + (deviceHeight + 2) + 'px; top: ' + topMargin + 'px; left: ' + leftMargin + 'px; }')
                .append('<br><br>')
                .append('.' + className + ' .screen iframe { width: ' + deviceWidth + 'px; height: ' + deviceHeight + 'px; }');
});