Responsive + Font Resizing

by bizamajig

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<link rel="stylesheet" href="https://raw.github.com/FortAwesome/Font-Awesome/master/css/font-awesome.css">
<script src="https://raw.github.com/FontAwesome/Font-Awesome/master/font/fontawesome-webfont.eot"></script>
<script src="https://raw.github.com/FontAwesome/Font-Awesome/master/font/fontawesome-webfont.ttf"></script>
<script src="https://raw.github.com/FontAwesome/Font-Awesome/master/font/fontawesome-webfont.svg"></script>
<script src="https://raw.github.com/FontAwesome/Font-Awesome/master/font/fontawesome-webfont.woff"></script>
<div id="home" class="container" data-role="page">
    <div id="header">
        <h1>Header</h1>
    </div>
    <div class="grid-half colour-alpha">
        <a href="#" class="ui-link">
            <span class="grid-icon-container">
                <span class="icon-font icon-glass"></span>
                <span class="grid-icon-text">Label A</span>
            </span>
        </a>
    </div>
    <div class="grid-half last colour-beta">
        <a href="#" class="ui-link">
            <span class="grid-icon-container">
                <span class="icon-font icon-b"></span>
                <span class="grid-icon-text">Label B</span>
            </span>
        </a>
    </div>
    <div class="grid-half grid-btop colour-ceta">
        <a href="#" class="ui-link">
            <span class="grid-icon-container">
                <span class="icon-font icon-c"></span>
                <span class="grid-icon-text">Label C</span>
            </span>
        </a>
    </div> 
    <div class="grid-half last grid-btop colour-delta">
        <a href="#" class="ui-link">
            <span class="grid-icon-container">
                <span class="icon-font icon-d"></span>
             ...

CSS

/* TABLE OF CONTENTS
 ----------------------------- 
 - Sizes
 - Borders
 - Colors
 - Typo
 - Icons
 */

/* SIZES 
 ----------------------------- */
body, html { 
    height: 100%; 
    margin: 0;
    padding: 0; 
}
#header {
    height: 10%;
    width: 100%;
}
#home {
    width: 100%;
    height: 90%;
}
    /* Grid */
    .grid-half {
        display: table;
        position: relative;
        float: left;
        width: 49.8%;
        height: 51%;
    }
        .grid-half .ui-link {
            position: absolute;
            height: 100%;
            width: 100%;
            text-align: center;
            text-decoration: none;
        }
        .grid-half .grid-icon-container {
            display: block;
            position: relative;
            top: 25%;
            height: 50%;
            width: 50%;
            margin: 0 auto;
        }
        .grid-half .icon-font {
            display: block;
            position: relative;
            height: 75%;
            width: 100%;
            margin: 0 auto;
        }
        .grid-icon-text {
            display: block;
            position: relative;
            height: 25%;
            width: 100%;
        }

/* BORDERS 
 ----------------------------- */
.grid-half.last {
    border-left-width: 1px;
    border-left-style: dashed;
}
.grid-btop {
    border-top-width: 1px;
    border-top-style: dashed;
}
    .grid-half .icon-font,
    .grid-icon-text {
        border-width: 1px;
        border-style: dotted;
    }

/* COLORS 
 ----------------------------- */
a {
    color: #556270;
}
#home { background-color: #556270; }
.colour-alpha { background-color: #4ECDC4; }
.colour-beta  { background-color: #FF6B6B; }
.colour-ceta  { background-color: #C44D58; }
.colour-delta { background-color: #C7F464; }
.grid-half.last,
.grid-btop {
    border-color: #556270;
}
    .grid-half .icon-font,
    .grid-icon-text {
        border-color: #fff;
    }
    .icon-font { 
        color: #556270; 
    }
 
/* TYPOGRAPHY 
...

JavaScript

function fitIconFont( class_name ) 
{
    $( class_name ).each( function( key, el )
        {
            var 
                container         = $( this ).parent()
                container_height = parseInt( $( container ).height(), 0 )
                // container_height = parseInt( $( container ).outerHeight( true ), 0 ) + 'px'
                container_width  = parseInt( $( container ).css( 'width' ), 0 )
                new_icon_height  = parseInt( container_height * 0.75, 0 )
                new_label_height = parseInt( container_height * 0.25, 0 )
                debug_output     = true
            ;

            // Set font-sizes for icon & label
            $( el ).css( 'font-size', new_icon_height + 'px' );
            $( el ).next().css( 'font-size', new_label_height + 'px' );

            var debug = 
                'current heights: Container: ' + container_height + 'px / '
                + 'Icon: ' + new_icon_height + 'px / '
                + 'Label: ' + new_label_height + 'px'
            ;
            if ( debug_output )
                $( '#header h1' ).text( debug ).css( 'color', '#fff' );
            console.log( container_height );
        }
    );
}


// Trigger on Init/Load
$( '#home' ).on( 
     'pageinit'
    ,function( event )
     {
        fitIconFont( '.icon-font' );
     }
).trigger( 'updatelayout' );

// Trigger on Window size change
$( window ).resize( 
    function()
    {
        fitIconFont( '.icon-font' );
    }
).trigger( 'updatelayout' );
fitIconFont( '.icon-font' );