Bootstap style flexbox layout system for apps.
npm install snappyapps-layoutSnappyApps Layout
===================
A fullscreen web app or mobile app layout engine for the web. It aims to solve complex issues around 100% height css strains, as well as providing headers and footers and abstracting away the more complex parts of flexbox including cross platform / browser issues.
Do this:
!enter image description here
By typing this:
``
Header
Menu
Content
Right Column
Footer
###Installation
Include the css and javascript files in your project to get started
`
Note for pre 1.0 users. The Javascript requirement has now been removed. This MAY cause some breaking changes, however all attempts have been made to fix this. It wil improve speed and weird keyboard issues on mobile so is very much a recommended upgrade.
###Usage
> Check out the examples folder for some common layouts and complete HTML
The first thing each app needs is an sa-container element. This element is a fixed, fullscreen element and is only used once per app. For example
`
Once you have your sa-container, you need to create your first sa-layout element.
There are two basic options:
- Horizontal - The layout wil tile left to right across the page
- Vertical - The layout will tile top to bottom down the page
An example 3 column horizontal layout, with two fixed columns on either side and a content section that will grow to fill the available space:
`
Left Column
Content
Right Column
Example header footer layout with content in the middle
`
Header
Content
Footer
Now we can combine them, header footer layout with 3 columns
`
Header
Left Column
Content
Right Column
Footer
Viola!
The combinations can be combined infinitely to make some pretty complicated layouts. For example lets create a list, with a right aligned > indicating that it could be clicked:
`
Header
Left Column
Item 1 content
>
Item 2 content
>
Item 3 content
>
Right Column
Footer
---
Helper classes
-------------
####grow
Based on flexbox's grow, an element with this class will grow to fill the available space in its container. If two items have grow they will share the space evenly. In the below example, grow has been used to right align the > to indicate the object can be clicked, such as in a mobile list
`
Item 1 content
>
####content-height
By default, all sa-layout elements will fill the height and the width of their container. If you want to make a list (as in the example above) or just want to use the alignment features, add content-height to your sa-layout element. For example
`
Item 1 content
>
####wrap & wrap-container
To make a series of objects automatically wrap when they fill the available space, use wrap and wrap container. This is useful when you have something like items for sale in a catalogue, or album art you want in a grid.
`
This will wrap
This will wrap
This will wrap
This will wrap
This will wrap
This will wrap
> In the example above we use content height as well, this stops issues with scrolling just the wrapped content
####A note on scrolling
The system automatically scrolls all content that exceeds a container with its own scrollbar. As this is designed as an app layout system, each sa-layout` element can potentially be its own, independent scrolling section.
---
##Browser Compatibility
SnappyApps-layout makes extensive use of flexbox. So if your target browsers will have trouble rendering flexbox then this project is probably not for you. Luckily ie and some versions of Android are the only browsers not fully supporting the specification at the time of writing. For more information (and probably more up-to-date info) check out Can I Use for flexbox:
http://caniuse.com/#feat=flexbox