Fork me on GitHub

Constraint Based

A programming paradigm that feels just right for precise elements layout

Configurable and light

Declare layout directly in your view with fully configurable attributes

As seen for iOS

The same engine and language as seen in Apple's Auto Layout for iOS and OS X

What is it?

Angular-autolayout provides an al-constraint directive that can be used to layout DOM elements based on constraints. You can finally make those divs have the same height! Think of the potential for Chrome Apps or node-webkit, think of Cordova apps! 

<div id="demo1" class="demo-container" al-update-on-resize>
  <div id="demo1-A" class="demo-box">A</div>
  <div id="demo1-B" class="demo-box">B</div>
  <div id="demo1-C" class="demo-box">C</div>

  <al-constraint align="top">|-[demo1-A(==demo1-B,==demo1-C)]-[demo1-B]-|</al-constraint>
  <al-constraint>V:|-[demo1-A]-|</al-constraint>
  <al-constraint align="right">V:|-[demo1-B(==demo1-C)]-[demo1-C]-|</al-constraint>
</div>
A
B
C
|-[demo1-A(==demo1-B,==demo1-C)]-[demo1-B]-| V:|-[demo1-A]-| V:|-[demo1-B(==demo1-C)]-[demo1-C]-|

Inside the al-constraints you can see Apple's Visual Format Language that can also be used to specify the layout of Cocoa applications.

How to use it

Get it

Setup Bower and then use:

bower install angular-autolayout

To install Angular-Autolayout in your current directory's bower_component folder.

Include it

Include the script in your page after AngularJS like so:

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-autolayout/angular-autolayout.min.js"></script>

Then include it as a dependency for your AngularJS app module:

angular.module("myApp", ["autolayout"]);

Use it!

You can now inject the autolayout service in your controllers and use the <al-constraint> directive as seen above.

Check out the examples included in the project sources as well as the documentation on the readme file. Also, try the playground to get started laying out stuff!

Playground

Can you figure out the autolayout visual format language? | means the container view, - is a standard space and elements are referenced by id like so [elementId]. V: stands for "vertical" and the align attribute is a shortcut that makes elements named in that constraint align in respect of each other. Give it a try.

<div id="play1" class="demo-container" al-update-on-resize> <div id="play1-A" class="demo-box">A</div> <div id="play1-B" class="demo-box">B</div> <div id="play1-C" class="demo-box">C</div> <al-constraint align="">
</al-constraint> <al-constraint align=""> </al-constraint> </div>
A
B
C

Try to reproduce the following layouts:

A
B
C
V:|-[try1-A(==try1-B,==try1-C)]-30-[try1-B]-[try1-C]-| |-[try1-A(==try1-B,==try1-C)]-|
A
B
C
|[try2-A(==50)]-[try2-B]-| V:|-[try2-B(==try2-A,==try2-C)]-[try2-C]-| |-[try2-C]-|
A
B
C
V:|-[try3-A(==try3-B,==try3-C)]-[try3-B]-[try3-C]-| |-[try3-A]-|

Ha! For this you'll need a different form of the directive. Check out the documentation!

...and you're good to go! Make sure to checkout the documentation to create even cooler layouts and make them update on window resize. Enjoy!

* this one may not be possible in this playground.