CSS design

This page explains the CSS design of the WordPress theme “Arkhe”.

About class naming rules

While referring to FLOCSS, there are many unique rules.

  • Layout elements: .l-xxx
    • .l-container & .l-article is a layout class for determining the content width.
  • Component elements in small units : .c-xxx
  • Component elements in slightly larger units : .p-xxx
  • Utility class : .u-xxx

About media query breakpoints

  • 1000px~ : PC size
  • ~999px : SP size
    • 600px ~ 999px : Tablet size
    • ~599px : Mobile size

You can check the mixin for media queries in src/scss/foundation/mixin/_media.scss.

About the margin of the contents area

In Arkhe, the contents area ( output part bythe_content () ) is basically margin-top with margins.

  • The default amount of margin between blocks is 2rem.
  • The top of headings is a little bigger, 2.5em.
  • The margin amount between “inner blocks” is as follows. (The margin at the top of headings is also overwritten with the following value.)
    • Inner blocks of “Column” and “Media-text” blocks : 1rem
    • Inner blocks of normal width “Group” and “Cover” blocks : 1rem
    • Inner blocks of wide “Group” and “Cover” blocks : 2rem
  • There will be 0 between the “Full width” and “Full width” blocks.

About “Full width” blocks

  • The padding of the “Group (with background-color)” and “Cover” blocks will be wider. (top and bottom: 4rem)
  • When “Full width” is used continuously, the margin between blocks becomes 0.
  • When you use “Full width” in the “Group” block, basically the internal contents are also displayed in full width.
    • However, if there is a “Background color” setting, it will fit within the content width of the page.
  • Even in the “Cover” block, the internal content fits within the content width of the page.