SPINNR uses the concept of a Brand Style Guide (also sometimes referred to as the Brand Guide) for the styling (or theming) of the website.
You can access the Brand Style Guide from WordPress by going to SPINNR → Brand Style Guide
This allows you to setup the size and space confugrations for fonts, padding, container widths, and internal section spacing. You can access the configuration table by clicking on the here link.
1 rem is equal to your browser’s default font size (usually it is set 16px).
Font size settings
Setting the font size scaling can be done either manually or with auto Scaling by simply enabling the Auto scaling setting. SPINNR uses the auto scaling methods of https://typescale.com/ . 1 rem is equal to your browser’s default font size (usually it is set 16px).
Element Spacing
Element spacing manages the spacing of the elements. This setting includes default paddings, margins and gaps. 1 rem is equal to your browser’s default font size (usually it is set 16px).
Element Sizing
This setting is used for default heights and widths of elements in components.
After configuring your size and scale you can then adjust the settings for the grid. These can set these based on 3 screen sizes.
Default Gap
The gap between columns
Section Padding y
The default spacing top and bottom within a section
Inner Gap
The gap between elements within a column
The container settings can be configured to some prest sizes or you can add your custom breakpoints.
<aside> ℹ️ NOTE: these container settings only apply to sections, which are set up to «contained» and do not apply to sections with 100% width.
</aside>
