This lightweight extension is focused on adaptive designs and allows you to align multiple objects with different parameters and within a same dynamically sized layer. Sample project included.
- Supports nine alignments with margin bounds and offsets. - Automatically detects the parent object/container sizes when the browser is resized and accommodates the affected child objects. - Each object can define minimum sizes for its parent container; when multiple objects are contained within a same layer, the layer will take the best boundaries selection. - Multi-instance, crossbrowser, crossplatform and backward compatibility.
* Just a brief about some of the changes that were made lately...
* New in version 1.2
- Improved elements centering/handling based on a better detection of the container parameters. - Improved behavior with [rz] Position Object Size when both instances has same targets.
* New in version 1.1.1
- Smoother startup. - Improved center alignment on complex scenarios.
* New in version 1.1
- New 'breakout' alignment modes to support layers with their variants and their own formats (useful to have a default container alignment and manipulate only the needed elements; allowing a better performance). - Improved min-width and min-height properties; now applies also to the body (there is no need to create a layer and move into it the involved elements to align). - Improved image elements handling that workarounds pixels gaps on some browsers. - The produced mark-up has been optimized. - The core has been moved to an external file for a faster navigation between pages. - Minor core improvements.
* New in version 18.104.22.168
- Workaround for iOS and Android refresh issues causing misalignments. - Workaround for an unstable Chrome issue aligning centered objects in complex scenarios. - Improved hidden objects handling. - Minor performance tweaks.
* New in version 22.214.171.124
- Faster alignment startup. - Improved complex objects alignment (like nested layers and/or other objects with scrollable content). - Improved text objects alignment when using an external font source (like Google fonts). - Improved stretchable texts alignment. - Fixed an implementation bug in Firefox, Chrome and Opera browsers.
* New in version 126.96.36.199
- Added support for css-based objects/breakpoints scenarios.
How to use?
1. Design a resizable layer as you usually do with its contained objects.
- This is the context and it can be: layers, masterobjects, body. - The objects can be: almost whatever you want.
2. Drag and drop the extension. 3. Open the extension dialog box and setup the parameters for the objects you want to align. 4. Preview or publish.