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

  1. Theme Color Palette
  2. Headings
  3. Text Alignment
  4. Buttons
  5. Unordered List
  6. List (Checkmark style)
  7. Media & Text
  8. Groups
  9. Columns
  10. Quote
  11. Quote (Large font)
  12. Pull Quote
  13. Code
  14. Preformatted
  15. Verse
  16. Table
  17. Table (Stripes)
  18. Calendar
  19. Separators
  20. Image (Default Width)
  21. Image (Wide Width)
  22. Image (Full Width)
  23. Cover Image
  24. Categories
  25. Latest Posts
  26. Latest Posts (Bullet style)
  27. Latest Posts (Grid style)
  28. Latest Comments
  29. Latest Comments (Bullet style)
  30. 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

Beige

Dark Beige

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

Back to Top

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

Back to Top

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

Back to Top

Buttons

Back to Top

Unordered List

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Back to Top

List (Checkmark style)

  • List item 1
  • List item 2
  • List item 3
  • List item 4

Back to Top

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.

Back to Top

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.

Back to Top

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.

Back to Top

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

Back to Top

Quote (Large font)

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

Back to Top

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

Back to Top

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;
	}
}

Back to Top

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

Back to Top

Table

Heading 1Heading 2Heading 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3
Row 3 Column 1Row 3 Column 2Row 3 Column 3
Footer 1Footer 2Footer 3
Table Caption

Back to Top

Table (Alternate Colors)

Heading 1Heading 2Heading 3Header 4
Row 1 Column 1Row 1 Column 2Row 1 Column 3Row 1 Column 4
Row 2 Column 1Row 2 Column 2Row 2 Column 3Row 2 Column 4
Row 3 Column 1Row 3 Column 2Row 3 Column 3Row 3 Column 4
Footer 1Footer 2Footer 3Footer 4
Table Caption

Back to Top

Calendar

July 2024
M T W T F S S
1234567
891011121314
15161718192021
22232425262728
293031  

Back to Top

Separators






Back to Top

Image (Default Width)

Back to Top

Image (Wide Width)

Back to Top

Image (Full Width)

Back to Top

Cover Image

This block can be used for a “Hero” section.
Full width has been applied.

Back to Top

Categories

Back to Top

Latest Posts

Back to Top

Latest Posts (Bullet style)

Back to Top

Latest Posts (Grid style)

Back to Top

Latest Comments

Back to Top

Latest Comments (Bullet style)

Back to Top

Latest Comments (Avatar, Date, and Excerpt)

  1. Is it possible to remove or edit this “© 2017 Website Name. Theme by XtremelySocial.”

Back to Top