Style Guide Manager - Overview
Style Guide Manager allows users to theme their components and other elements at a brand level. There are global settings that affect multiple components and elements site wide such as; typography, paddings and margins. Many components also feature their own specific set of SGM settings, these are noted down against the component within this Functional Design specification.
Layout settings
These values are set once within the Style Guide Manager and globally affect all components across the site.
NB. Almost all px values are set using a range slider that adheres to the design system layout spacing rules.
| Item | Requirement & purpose | Information/default values |
|---|---|---|
| Website width | Sets the overall width of the site | Set to 100% by default, you can add a px value in to the SGM. You are also able to add in a background colour visible to the left and right edges of the site. |
| Padding - Large | Sets the large padding value top and bottom for each component. | Set independently for all three break points. |
| Padding - Medium | Sets the medium padding value top and bottom for each component. | Set independently for all three break points. |
| Padding - Small | Sets the small padding value top and bottom for each component. | Set independently for all three break points. |
| Margin - Large | Sets the large margin value below each component. | Set independently for all three break points. |
| Margin - Medium | Sets the medium margin value below each component. | Set independently for all three break points. |
| Margin - Small | Sets the small margin value below each component. | Set independently for all three break points. |
| Block padding | Sets the global padding for each of the Responsive Blocks and Slider Items. | Set independently for all three break points. |
| Slider styling | Sets navigation icons, size and colour. Set pagination colours and borders. Set play and pause button. | The layout and positioning of slider navigation and pagination is fixed globally. The SGM can only be used to style these elements. |
Typography SGM settings
These values are set once within the Style Guide Manager and globally affect all typography across the site.
NB. Almost all px values are set using a range slider that adheres to the design system layout spacing rules.
| Item | Requirement & purpose | Information/default values |
|---|---|---|
| H1 Primary | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H1 Secondary | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H2 Primary | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H2 Secondary | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H3 | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H4 | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| H5 | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. When adding your bold setting you can specify an uploaded font from your family or a weight from an imported font. |
| Paragraph default | Sets the font family, weight, colour, size and margin bottom for the selected item. Paragraphs also have a setting where you can choose the bold font weight should you need it. | Font size and margin bottom can be set independently for all three break points. When adding your bold setting you can specify an uploaded font from your family or a weight from an imported font. |
| Paragraph large | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| Paragraph small | Sets the font family, weight, colour, size and margin bottom for the selected item. | Font size and margin bottom can be set independently for all three break points. |
| Block quote | Sets the font family, weight, colour, and size for the selected item. | Font size can be set independently for all three break points. |