The docs are still under development and we’re adding more content.


Spacing

The Aino Blocks plugin adds the following responsive Spacing settings to a number of blocks (see list of blocks below): padding top, bottom, left and right.

The settings result in CSS classes pt__number, pb__number, pl__number and pr__number. The values result in the following pixel values:

value   mobile   desktop

01      0        0
02      2        4
03      4        8
04      6        12
05      8        16
06      8        20
07      12       24
08      16       32
09      20       40
10      24       48
11      32       64
12      40       80
13      48       96
14      64       120
15      80       144
16      96       176
17      120      208
18      144      248
19      176      288

For example, setting the padding bottom of a block to 9 will result in a padding bottom value of 40px and a CSS class of 'pb__9' added to the block.

The Spacing settings are added for these blocks:

Core blocks

Cover
Group
Columns
Heading
Paragraph
Image
Gallery
Quote
List
Spacer

Aino blocks

Buttons
Divider
Grid and Grid Item
Flexbox and Flex Item
Badge
Testimonial
Timeline and Timeline event