Flat Blocks Theme Styles
Samples of various styles within the theme
Flat Blocks is built specifically for the latest WordPress Block Editor and Full Site Editing capabilities. The following depict the basic styles of the theme.
Table of Contents
- Theme Color Palette
- Headings
- Text Alignment
- Buttons
- Unordered List
- List (Checkmark style)
- Media & Text
- Groups
- Columns
- Quote
- Quote (Large font)
- Pull Quote
- Code
- Preformatted
- Verse
- Table
- Table (Stripes)
- Calendar
- Separators
- Image (Default Width)
- Image (Wide Width)
- Image (Full Width)
- Cover Image
- Categories
- Latest Posts
- Latest Posts (Bullet style)
- Latest Posts (Grid style)
- Latest Comments
- Latest Comments (Bullet style)
- Latest Comments (Avatar, Date, and Excerpt)
Theme Color Palette
All of our themes includes a rich “flat” style color palette with 30 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. You should select lighter text on darker backgrounds, of course.
Theme Style Colors
Primary
Primary Alt
Secondary
Secondary Alt
Tertiary
Tertiary Alt
Dark
Dark Alt
Fore-ground
Back-ground
Fore-ground Alt
Neutral
Neutral Alt
Opacity 10%
Opacity 25%
Opacity 50%
All Colors
White
Off White
Very Light Gray
Light Gray
Gray
Dark Gray
Very 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 Midn. Blue
Light Purple
Purple
Dark Purple
Light Red
Red
Dark Red
Almost Black
Not Quite Black
Black
Headings
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. That’s why you can’t specify H1 within a page itself.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text Alignment
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
Buttons
Unordered List
- List item 1
- List item 2
- List item 3
- List item 4
List (Checkmark style)
- List item 1
- List item 2
- List item 3
- List item 4
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.
Groups
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.
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.
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
Quote (Large font)
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
@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;
}
}Preformatted
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
Table
| Heading 1 | Heading 2 | Heading 3 |
|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
| Footer 1 | Footer 2 | Footer 3 |
Table (Alternate Colors)
| Heading 1 | Heading 2 | Heading 3 | Header 4 | |||
|---|---|---|---|---|---|---|
| Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 | Row 1 Column 4 | |||
| Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 | Row 2 Column 4 | |||
| Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 | Row 3 Column 4 | |||
| Footer 1 | Footer 2 | Footer 3 | Footer 4 |
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 | |||||
Separators
Image (Default Width )
Image (Wide Width )
Image (Full Width)
Cover Image
This block can be used for a “Hero” section.
Full width has been applied.
Categories
- Announcements
- Flat Bootstrap Theme
- Link WordPress Theme
- Our Themes
- Pratt WordPress Theme
- Spot WordPress Theme
- WordPress
- WordPress Tips
Latest Posts
- Welcome to the Gutenberg Editor
- New Versions of Link, Pratt, and Spot WordPress Themes
- Where Should We Go From Here With Our WordPress Themes?
- Flat Bootstrap WordPress Theme v1.9 Released
- New WordPress Theme Versions: Flat Bootstrap, Link, Spot, and Pratt
Latest Posts (Bullet style)
- Welcome to the Gutenberg Editor
- New Versions of Link, Pratt, and Spot WordPress Themes
- Where Should We Go From Here With Our WordPress Themes?
- Flat Bootstrap WordPress Theme v1.9 Released
- New WordPress Theme Versions: Flat Bootstrap, Link, Spot, and Pratt
Latest Posts (Grid style)
- Welcome to the Gutenberg Editor
The goal of this new editor is to make adding rich content to WordPress simple and enjoyable - New Versions of Link, Pratt, and Spot WordPress Themes
We’ve updated all of our WordPress themes recently and they have been approved and are all available from your WordPress… - Where Should We Go From Here With Our WordPress Themes?
Now that we’ve completed our “spring cleaning” with Flat Bootstrap v1.9, we’d like to get feedback from all of you…
Latest Comments
Latest Comments (Bullet style)
Latest Comments (Avatar, Date, and Excerpt)
Hi, Thanks! I thought about adding breadcrumbs to my themes, but there are already lots of plugins to do that.…
Great themes and documentation? How do we add breadcrumbs to the Spot theme? Thanks
Is it possible to remove or edit this “© 2017 Website Name. Theme by XtremelySocial.”
Your site looks absolutely awesome! Would you mind if I actually featured it on this site as an example of…
Yes, take a look at functions.php file in the theme directory. Pratt is a child theme of Flat Bootstrap and…