Container Layout Visualization
v0.1.15
🔸Use this tool to observe various options for using containers for different types of layouts.
🔸The Block borders are black border and block containers are blue...
🔸The various levels of containers have different border colors.
🔸The layouts are optimized for each display according tot eh GroovePages Specs.
🔸Contact me with guidance and questions [email protected].
Sample Standard GroovePages 4-Column Layout
✅ The "layout-4-4-4-4" element height is set to auto, so the height aligns to the container with the tallest content. Page width ranges from 80-95% depending on the device.
✅ Resize the browser's width to observe how the layout changes with the resolution
✅ Observe the limited options when it comes to displaying it on various devices
Description:
The image is randomly sourced via picsum.com via the url https://picsum.photos/width/height where width/height are in pixels. It is loaded via javascript when the page is loaded.
(This text is within the default container.)
Image Properties
The Image is Random
The Width is 300px
The Height is 200px
This list is within a container for indenting it
Use the button to show the block & container borders.
Sample Custom 4-Column Layout.
✅ The elements are basic containers with custom height and width as noted
✅ Resize the browser's width to observe how the layout changes with the resolution
✅ Observe the near-PERFECT responsive layout for displaying it on various devices
✅ Add the following CSS to any element's custom property to get visual help with it's bounderies
border: 10px solid [color];
where [color] is substituted by color name (black, blue, green, etc, or hex code, i.e. #bbcc55)
Description:
The image is randomly sourced via picsum.com via the url https://picsum.photos/width/height where width/height are in pixels. It is loaded via javascript when the page is loaded.
etc.
etc.
(This text is within the default container.)
Image Properties
The Image is Random
The Width is 300px
The Height is 200px
This list is within a container for indenting it
Icons are aligned by custom property setting of align-items:center !important;
Use the button to hide the block & container borders.
