CC 2.1 Style guide and CSS classes
Button Presets
Button styling is set directly via the CSS CLASS: is-style-big-link and is-style-big-link-invert on the parent container of a button block. Icons can be selected in the button settings of the block.
Column Settings
In order to retain the „old“ column behavior, the gap control for column spaces is set to 0 in the stylebook. The spacing between the column-child blocks is set via margin left / right, so you can work with the bootstrap grid as usual without the column blocks slipping into a second row too early.
Block Editor
With Greyd, you’re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!
Global Styles
Full control. Minimal effort. Specify colors, shapes, and fonts for your entire website centrally. From buttons to forms, all elements automatically adapt to your styles.
Full Site Editing
Headers, 404 templates, footers, or post templates – with Greyd.Suite you can customize any part of your website and use all blocks and functions.
Row Settings
Breaking Class:
break-sm, break-md,
break-lg
Stacking Class:
reverse-sm, reverse-md, reverse-lg
First Group
With Greyd, you’re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!
Second Group
With Greyd, you’re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!
Third Group
With Greyd, you’re using the WordPress Block Editor with additional features and optimizations. Creating professional websites has never been easier!
Media & Text Block
Breaking Class:
Fixed breakpoint at 992px is
customizable via CSS directly for the block.
If needed, content padding can set to zero with class
no-padding in media and text block
Media and Text
Custom Breakpoint @ bootstrap-md (992px)
Media and Text
Custom Breakpoint @ bootstrap-md (992px)
Table-Block
Directly styled in CSS
| Header | Header |
|---|---|
| Column 1 & Row 1 | Column 2 & Row 1 |
| Column 1 & Row 2 | Column 2 & Row 2 |
Accordion Presets
Directly styled in CSS in 3 Variants.
CSS
Class:
is-style-line, is-style-large, is-style-round
The icons are set in the accordion block and
adjusted in size if necessary.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Special Presets
Custom Bullets
Size of the
surrounding DIV, the content box and the paragarph styled directly via CSS if the class ret-dot is
set in the content box. Color, shape and font size can be selected individually.
1
Headline Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Website Titel
Style Guide
Build and share your design viewing all affected elements.
Colors
Primary Color
Secondary Color
Tertiary Color
Very Dark
Dark
Medium Dark
Medium Light
Light
Very Light
warm-very-dark
warm-dark
warm-medium-dark
warm-medium-light
warm-light
complementary-color
cold-light-accent-form
cold-very-dark-80
Typography
Heading Font & Sizes
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Body Font & Default Size
abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ
100 – Thin
200 – Extra Light
300 – Light
400 – Regular
500 – Medium
600 – Semi-Bold
700 – Bold
800 – Extra Bold
900 – Black
Buttons & Links
Layout
Content width
Wide width
Spacing Sizes
Huge 150px – 100px
Large 100px – 50px
Medium 50px – 30px
Small 30px -16px
Tiny 15px – 8px