DIV Helper

Oft braucht man Container die den Inhalt vertikal zentrieren oder auch Container die ein bestimmtes Seitenverhältnis beibehalten. Hier ein Beispiel mit dem HTML Markup und den entsprechenden Sass-Mixins.

HTML Markup:
<!-- vertical align content -->  
<div class="vBox">  
    <div class="vBoxWrapper">
        <div class="vBoxContent">
            Your content goes here...
        </div>
    </div>
</div>

<!-- div with 16:9 ratio -->  
<div class="ratioBox">  
    <div class="ratioBoxContent"></div>
</div>  
Sass Mixins:
@mixin vBox(){
    .vBox {
        height: 100%;
        .vBoxWrapper {
            display: table;
            height: 100%;
            width: 100%;

            .vBoxContent {
                display: table-cell;
                vertical-align: middle;
                position: relative;
            }
        }
    }
}

@mixin ratioBox($ratioWidth:16, $ratioHeight:9){
    .ratioBox {
        position: relative;

        &:after {
            padding-top: percentage($ratioHeight / $ratioWidth);
            display: block;
            content:'';
        }

        .ratioBoxContent {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
    }
}

Marco

daddy in love, runner, kiter, engineer, berlin, sheeeeeit!