page: txp5

Core SASS

form: feature

StylePattern

SASS directories & naming

The folder structure has alphabetical sorting for consistent display in Finder, IDEs, and uses a combination of ITCSS methodology and Atomic Design principles.

  • /admin-themes/core/
    • scss
      • 0-settings
        • 0_debug.scss includes container-query breakpoint visualisation
        • s-config.scss variables
        • s-colours.scss named colour palette to simply development
        • s-mixins.scss no output
      • 1-base
        • b_reset.scss normalise, turn everything into lego bricks
        • b_common.scss unclassed html
        • b_typeset.scss unclassed html within a classed container
      • 2-atoms classed textpattern components start here
      • 3-molecules
      • 4-organisms
    • css
      • core.css for direct user manipulation
      • core-min.css optional, saves 2 or 3 kB
  • /admin-themes/five layout starts
    • scss
      • 0-settings
        • s-config.scss optional overrides to core
        • s-colours.scss optional overrides to core
        • s-mixins.scss optional overrides to core
      • 1-base
        • b_reset.scss optional overrides to core
        • b_common.scss optional overrides to core
        • b_typeset.scss optional overrides to core
      • 2-atoms
      • 3-molecules
      • 4-organisms
      • 5-layout
    • five.css
  • /admin-themes/hive 4.9 should behave?
  • /admin-themes/phive Hive v5
  • /admin-themes/jekyll
  • etc
  • /admin-themes/coatings/ skinning variants
    • huey
      • huey.scss
      • huey.css
    • etc

core.css 21.8 KB
core-min.css 18.7 KB