Styles
Theme styling of standard WordPress blocks
Flat Blocks is built specifically for the latest WordPress Block Editor and Full Site Editing capabilities. The following depicts the basic styles of the theme.
Color Palette
All of our themes includes a rich “flat” style color palette with over two dozen colors that are all designed to look great together. Any of these colors can be selected for buttons, groups, columns, paragraphs, etc. You can use them both for background colors as well as foreground colors.
Current Theme Style Colors
This is the currently-selected color scheme.
Primary
Primary Alt
Secondary
Secondary Alt
Tertiary
Tertiary Alt
Dark
Dark Alt
Base
Contrast
Fore-ground Alt
Neutral
Neutral Alt
All Theme Colors
This is the full color-palette that is always available, regardless of which Theme Style variation is selected.
White
Off White
Very Light Gray
Light Gray
Gray
Dark Gray
Light Green
Green
Bright Green
Dark Bright Green
Light Yellow
Yellow
Light Orange
Orange
Dark Orange
Light Blue
Blue
Dark Blue
Midnight Blue
Dark Midnight Blue
Light Purple
Purple
Dark Purple
Light Red
Red
Dark Red
Very Dark Gray
Almost Black
Not Quite Black
Black
Headings & Alignments
You can use standard H2 through H6 headings which go from large to small. Note that H1 is reserved for page titles because there should only be one per page. H2 is above and H3 through H6 are below.
Heading 3
Heading 4
Heading 5
Heading 6
Of course WordPress has left, center, and right alignment that you can choose from the Block Editor.
Left aligned text
Center aligned text
Right aligned text
Lists
Unordered List
- List item 1
- List item 2
- List item 3
- List item 4
Checkmark Style List
- List item 1
- List item 2
- List item 3
- List item 4
Groups
Group
One of the best features of the new WordPress Block Editor is grouping blocks into “sections”.
These groups contain other blocks, such as headings, paragraphs, images, columns, buttons, etc.
This way, you can build complex layouts like you see on professional websites with “call to action” sections (header, text, and button), “services” or “features” blocks (columns of information), etc.
Media & Text
Phosfluorescently morph intuitive relationships rather than customer directed human capital. Dynamically customize turnkey information whereas orthogonal processes. Assertively deliver superior leadership skills whereas holistic outsourcing. Enthusiastically iterate enabled best practices vis-a-vis 24/365 communities.
Columns
This is left text column.
Appropriately initiate pandemic data via economically sound scenarios. Credibly foster inexpensive methodologies via cross-media leadership. Dramatically monetize seamless infomediaries via principle-centered functionalities. Seamlessly morph cross functional outsourcing via team building meta-services. Intrinsicly embrace installed base products for enabled testing procedures.
This is right text column.
Completely disintermediate user friendly content through covalent core competencies. Enthusiastically seize intermandated alignments for resource sucking paradigms. Intrinsicly engineer sustainable initiatives through resource maximizing benefits. Efficiently fashion top-line vortals through distributed interfaces. Intrinsicly engage performance based mindshare with best-of-breed outsourcing.
Quotes
Standard Quote
Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.
– Swami Vivekananda
Large Quote
Take up one idea, make that one idea your life. Think of it,
– Swami Vivekanandadream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.
Pull Quote
Take up one idea, make that one idea your life. Think of it, dream of it, Live on that idea let the brain, muscles, nerves, every part of your body be full of that idea, and just leave every other idea alone. This is the way to success.
– Swami Vivekananda
Code, Pre-formatted, & Verse
Code
@media only screen and (min-width: 960px) {
body .alignfull {
width: auto;
max-width: 1000%;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
body .alignwide {
width: auto;
max-width: 1000%;
margin-right: calc(25% - 25vw);
margin-left: calc(25% - 25vw);
}
.alignwide img,
.alignfull img {
display: block;
margin: 0 auto;
}
}Pre-formatted
This is some preformatted text. Preformatted text keeps your s p a c e s, tabs and
linebreaks as they are.
Verse
Write poetry and other literary expressions honoring all spaces and line-breaks. How now Brown cow
Tables
Standard Table
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Column 1 | Row 1 Column 2 |
| Row 2 Column 1 | Row 2 Column 2 |
| Row 3 Column 1 | Row 3 Column 2 |
| Footer 1 | Footer 2 |
Stripes Style Table
| Heading 1 | Heading 2 |
|---|---|
| Row 1 Column 1 | Row 1 Column 2 |
| Row 2 Column 1 | Row 2 Column 2 |
| Row 3 Column 1 | Row 3 Column 2 |
| Footer 1 | Footer 2 |
Calendar
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | |
Images
Default Width
Wide Width
Full Width
Cover Image
This block can be used for a “Hero” section.
Full width has been applied.
Latest Posts
- We are an award winning design agency
- 25 Examples of flat web & application design
- Designing for the reader experience
Latest Posts (Bullet Style)
- We are an award winning design agency
- 25 Examples of flat web & application design
- Designing for the reader experience
Latest Posts (Grid Style)
- We are an award winning design agency
It is a long established fact that a reader will be distracted by the readable content of a page when… Read more: We are an award winning design agency - 25 Examples of flat web & application design
It is a long established fact that a reader will be distracted by the readable content of a page when… Read more: 25 Examples of flat web & application design - Designing for the reader experience
It is a long established fact that a reader will be distracted by the readable content of a page when… Read more: Designing for the reader experience
Hi, this is a comment. To get started with moderating, editing, and deleting comments, please visit the Comments screen in…