Provides structure to your angular apps using CSS3 Grid and Flex
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
docs
lib
.editorconfig
.gitignore
.npmignore
LICENSE
README.md
angular.json
gulpfile.js
package-lock.json
package.json
tsconfig.json

README.md

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