PADDYDemos

PADDYCenter & PADDYBrick

Stacks Image 32

PADDYCenter

Every section on this page is created using PADDYCenter. E.g. this dark section, the following dark grey section, the next light grey section, etc..

Content dropped into PADDYCenter will be centred vertically and horizontally.

The height can be set by setting a Min Height for 3 ranges of screen width. If the content grows longer than these settings when the display size reduces in width, the content will then set the height and grow longer.

Padding is useful when added to the top and bottom of the content if the content is at risk of exceeding the height. Setting the content height to the default 60px padding for top & bottom works well. Alternatively, PADDY or PADDYPlus can be used to provide breakpoint dependant proportional padding and very sophisticated layouts can be built in this way. To remove the padding, just set the Optional padding to 0.

Stacks Image 183

PADDYBrick

PADDYBrick stacks are used between every pair of PADDYCenter stacks.

Stacks Image 360
Stacks Image 161

This section is created using PADDYCenter containing a PADDYWidth containing an image and a text stack. Above and below is a PADDYBrick set to match the colours of the PADDYCenters above and below.

Stacks Image 37
Stacks Image 48

Images can be used as BG images in PADDYCenter.

This PADDYCenter contains a PADDY3Col, and in each column is a PADDYCenter with a PADDYButt button, an image or a text link that are aligned horizontally by PADDYCenter. Also PADDYBricks can be combined for interesting effects as shown below.

PADDYCenter

This page is built using the inStacks Blankstrap Bootstrap4 theme, PADDY stacks and BWD HeaderPro & ParagraphPro

Webdeersign PADDYStacks