# Core Layout: Demo App

This app shows how the core-layout and angular-iscroll module can be combined to create a responsive AngularJS web app that renders and behaves well both on large (laptop) and small (mobile phone) screens. The use of iScroll ensures that the top and bottom "navigation bars" stay on the screen, as with the CSS `position: fixed` declaration, even on older iOS and Android devices that doesn't support `fixed` properly.

During initialization, the angular-iscroll package tried to determine whether or not it should use native scrolling instead of iScroll. For your current browser the answer was to use native scrolling (you can still turn on iScroll in the menu below) iScroll (you can turn off iScroll in the menu below).

Current platform:

Feel free to check out (no pun intended) core-layout on GitHub.

You may also toggle some states that define how this demo is rendered:

- Use iScroll
- Enable left drawer
- Open left drawer
- Enable right drawer
- Open right drawer

Toggle visible and hidden header and footer states for the `main` view.
What | All | Extra-small XS | Small SM | Medium MD | Large LG
--- | --- | --- | --- | --- | ---
Show Header |  |  |  |  |
Hide Header |  |  |  |  |
Show Footer |  |  |  |  |
Hide Footer |  |  |  |  |

The letters in parenthesis on each button indicate the corresponding modal's size.