angular-bone

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.

Installation

You can install from npm.

npm install angular-bone --save

Simple Flex Layout

<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>

Responsive Flex Layout

<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>

Simple Grid Layout

<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>

Responsive Grid Layout

<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/.