pip-webui/pip-webui-css/samples/css_styles/sizes.html

HTML5 UI for LOB applications

<style>
    .w > div > div, .h > div > div, .m > div > div {
        background-color: rgba(0, 0, 0, 0.3);
        display: inline-block;
        margin-right: 8px;
    }

    .w > div > div {
        height: 20px;
    }

    .h > div > div {
        width: 20px;
    }

    .m > div {
        background-color: rgba(0, 0, 0, 0.1);
        margin-bottom: 8px;
    }

    .m > div > div {
        height: 20px;
        width: 20px;
    }
</style>
<div style="overflow: auto">

    <p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
        Sizes
    </p>

    <p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">
        Width
    </p>

    <div class="w">

        <div ng-repeat="wValue in wValues " class="layout-row layout-align-start-center bm8">
            <div class="{{wValue}}"></div>
            <span>- {{wValue}}</span>
        </div>
    </div>
    <p> And classes:
        <span ng-repeat="wValue in  wValuesNotShow"> {{wValue}} </span></p>

    <p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">
        Height
    </p>

    <div class="h">
        <div ng-repeat="hValue in hValues" class="layout-row layout-align-start-center bm8">
            <div class="{{hValue}}"></div>
            <span>- {{hValue}}</span>
        </div>
    </div>

    <p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">
        Margins
    </p>

    <div class="m">
        <div ng-repeat="mValue in mValues" class="layout-row layout-align-start-center">
            <div class="{{mValue}}"></div>
            <span>- {{mValue}}</span>
        </div>
    </div>
    <p> For left margin add to class name letter '<strong>l</strong>'. For example <strong>lm24</strong> - left margin 24px.<br>
        For right margin add to class name letter '<strong>r</strong>'<br>
        For top margin add to class name letter '<strong>t</strong>'<br>
        For bottom margin add to class name letter '<strong>b</strong>'<br>
    </p>

    <p class="text-subhead2 h48 m0 bm8 tm8 layout-row layout-align-start-center">Paddings</p>

    <p>For padding instead of letter 'm' add letter '<strong>p</strong>'.
        For example <strong>p24</strong> - all sides padding 24px.</p>
</div>