Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps.
The Widgets are based on bootstrap. They work with predefined breakpoints to fit on any device. Portfolio changes the size for all image containers perfect and smoothly.
All Elements are dynamic, this creates an awesome user experience. You can have any amount of pictures
from 2 up to 30 images(XL Version 60 images).
A sample .muse file is included
- Page Background color (overrides muse browser fill function)
- 10 Categories
("all" is a predefined category, but the label can be changed or turned off. )
- Style your categories with button color, hover color, transition time, padding, border radius and all the text options from adobe muse
- Full Version: Images min. 2 max. 30
- XL Version: Images min. 2 max. 60
- Caption text (will be used as "alt" text also)
- Picture size (small, large, tall)
- Category name Important!
- Link to another page
- Portfolio background color
- Padding: Space between the images. (try to use a value 0 <> 10, which gives the best results.
- Animated captions and overlay ON/OFF
- Overlay color, opacity, text color
- Important: you can switch between horizontal and vertical captions
- Grey, sepia & blur filter
Tested on a desktop: Chrome, Safari, FF, Opera, IE8+, partial support
of IE7 (works, but some visual layout features, are missing).
Mobile: default browser in Android 2.3+, iOS5+, Blackberry 10+,
WP7+, mobile Opera and Chrome on Android.
- Your minimum Breakpoint should be set to 1200px
- Stretch the "Main" widget item to "browser width"
- Mix the pictures for better user experience
- Layout in Muse is NOT the final result, it is only visible in a browser preview or as site uploaded to a server.
BUT: As long as you use a value between 0 and 5 for the "main padding", the layout in Adobe muse looks quite right.
- Make all picture setting in the widget before you turn the picture ON (works sometimes faster).
- Be careful about the order of the different image sizes. Try to fill out every gap.