Zurb Foundation - Grid ex.

by gavinfoley

HTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
     
        <div class="row display">
            
            <div class="small-2 medium-6 large-4 columns">
                <span class="show-for-small">2</span>
                <span class="show-for-medium">6</span>
                <span class="show-for-large">4</span>
            </div>
            
            <div class="small-4 medium-2 large-4 columns">
                <span class="show-for-small">4</span>
                <span class="show-for-medium">2</span>
                <span class="show-for-large">4</span>
            </div>

            <div class="small-6 medium-4 large-4 columns">
                <span class="show-for-small">6</span>
                <span class="show-for-medium">4</span>
                <span class="show-for-large">4</span>
            </div>

    
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.1.1/css/foundation.min.css"> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 

<style>

.row {
    background: #eeeeee;
    font-size: 11px;
    margin-bottom: 10px;
    line-height: 2rem;
    border: solid 1px #c6c6c6;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.row .columns:nth-child(2), .row .columns.small-centered, .row .columns.large-centered {
    background: #e3e3e3;
}

JavaScript

//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('myApp', [])

    .controller("MyCtrl", function ($scope) {
    $scope.test = {
        data: ['Lorem Ipsum1', 'Lorem Ipsum2', 'Lorem Ipsum3']
    };
})

    .directive('json', function ($parse) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<pre>{{ content | json}}</pre>',
        compile: function (element, attr, transclusionFunc) {
            return function (scope, iterStartElement, attr) {
                var $origElement = transclusionFunc(scope);
                var content = $origElement.html();
                scope.content = scope.$eval(content);
            };
        }
    };
});