Jack Layout
Check out the stuff you can do with Jack’s layout... You will wonder how you ever lived without it.
Advanced Height Controls
Traditionally you can either make the height static or based on the contents. Jack provides some very powerful tools that finally allow you to control the height the way that you have always wanted. Proportional height allows you to define a ratio that Jack will maintain based on its width. There are also flexible height options that allow you to make Jack a percentage height of its parent or the browser window.
Proportional 16:9
(click above link)
50% Height of Parent
Scrolling Content
There are times where you want to keep some of your content restricted to a confined space on the page. Jack allows you to scroll through your content both vertically and horizontally.
Vertical Scrolling
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella.
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella.
Horizontal Scrolling
Responsive Margins & Padding
Many time you would like your margins and padding to change based on what device your visitors are coming from. Jack allows you to do this. If you look at the demo below, the padding of the box will decrease as the browser size goes down. This allows for a more compact UI on smaller screens.
Responsive Padding & Margins
Rotation
Jack allows you to rotate your content to add some flare to your web pages. Below is a nice example of how to could rotate image containers to add some pizzaz. (Yes, that is me working hard and playing harder.)
Layering
Layering Jacks inside each other can produce some amazing effects. The example below uses 3 Jack stacks to create a frame that is 100% responsive. If you look at the instance of Jack on the homepage, you will see how layer Jack stacks with transparent backgrounds can produce amazing effects.
