angular-bone helps to build page layouts using CSS3 Grid and Flex concepts for your angular apps. It provides you a set of directives that helps to build responsive layouts in a declarative way.
You can install from npm.
npm install angular-bone --save<div bon-f>
<div class="green" bon-fi bon-fi-grow="1"></div>
<div class="yellow" bon-fi bon-fi-grow="1"></div>
<div class="pink" bon-fi bon-fi-grow="2"></div>
</div><div bon-f bon-f-direction="column" bon-f-direction-md="row">
<div class="green" bon-fi bon-fi-grow="1"></div>
<div class="yellow" bon-fi bon-fi-grow="1"></div>
<div class="pink" bon-fi bon-fi-grow="1" bon-fi-grow-md="2"></div>
</div><div id="simple-grid-example" class="canvas"
bon-g bon-g-cols="30% 1fr"
bon-g-rows="20% 1fr 10%"
bon-g-area="'a a' 'b c' 'd d'">
<div class="purple" bon-gi bon-gi-area="a"></div>
<div class="yellow" bon-gi bon-gi-area="b"></div>
<div class="green" bon-gi bon-gi-area="c"></div>
<div class="pink" bon-gi bon-gi-area="d"></div>
</div><div id="simple-grid-example" class="canvas"
bon-g bon-g-cols="1"
bon-g-cols-md="30% 1fr"
bon-g-rows="20% 30% 1fr 10%"
bon-g-rows-md="20% 1fr 10%"
bon-g-area="'a' 'b' 'c' 'd'"
bon-g-area-md="'a a' 'b c' 'd d'">
<div class="purple" bon-gi bon-gi-area="a"></div>
<div class="yellow" bon-gi bon-gi-area="b"></div>
<div class="green" bon-gi bon-gi-area="c"></div>
<div class="pink" bon-gi bon-gi-area="d"></div>
</div>For further information please visit https://vjai.github.io/angular-bone/.