From ef8c78f4f39d13c336da85efd61c8c0fdbcc3ffc Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Wed, 2 Oct 2019 10:57:31 -0400
Subject: [PATCH] Update and document CSS structure

Looking at ITCSS, it appears the last level should be `utilities`. Since that's a name that has no negative connotations, let's use that instead. Also add a README documenting each folder's use.
---
 themes/wporg-5ftf/Gruntfile.js                |  2 +-
 themes/wporg-5ftf/css/README.md               | 44 +++++++++++++++++++
 .../_utilities.scss}                          |  0
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 themes/wporg-5ftf/css/README.md
 rename themes/wporg-5ftf/css/{trumps/_trumps.scss => utilities/_utilities.scss} (100%)

diff --git a/themes/wporg-5ftf/Gruntfile.js b/themes/wporg-5ftf/Gruntfile.js
index aedce07..3600804 100644
--- a/themes/wporg-5ftf/Gruntfile.js
+++ b/themes/wporg-5ftf/Gruntfile.js
@@ -4,7 +4,7 @@ module.exports = function( grunt ) {
 
 	const getSassFiles = () => {
 		const files = {};
-		const paths = [ 'settings', 'tools', 'generic', 'base', 'objects', 'components', 'trumps' ];
+		const paths = [ 'settings', 'tools', 'generic', 'base', 'objects', 'components', 'utilities' ];
 
 		paths.forEach( function( component ) {
 			var paths = [
diff --git a/themes/wporg-5ftf/css/README.md b/themes/wporg-5ftf/css/README.md
new file mode 100644
index 0000000..560d98d
--- /dev/null
+++ b/themes/wporg-5ftf/css/README.md
@@ -0,0 +1,44 @@
+# CSS Structure
+
+This loosely follows [ITCSS.](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)
+
+## 01 Settings
+
+Typography, colors, any spacing variables, etc should be set here.
+
+## 02 Tools
+
+This contains any mixins. We inherit the following libraries:
+
+- breakpoint
+- kube
+- modular-scale
+
+## 03 Generic
+
+Any generic styles. Used for normalize & reset styles. We inherit:
+
+- kube
+- normalize
+
+## 04 Base (aka Elements)
+
+Styles for plain html elements. We inherit the base theme's styling here.
+
+## 05 Objects
+
+These are pieces of UI. These should be self-contained (or nested so that they are self-contained). Blocks should
+be defined here.
+
+## 06 Components
+
+This section puts together the base and objects to create pages. Page-specific styles are defined here.
+
+## 07 Utilities
+
+The `is-*`/`has-*` classes, these custom classes override previous styles. For example, `has-background` would be
+defined here. This is where block styles should live.
+
+# Editor Styles
+
+Editor styles will use a custom import of a subset of the above folders, TBD?
diff --git a/themes/wporg-5ftf/css/trumps/_trumps.scss b/themes/wporg-5ftf/css/utilities/_utilities.scss
similarity index 100%
rename from themes/wporg-5ftf/css/trumps/_trumps.scss
rename to themes/wporg-5ftf/css/utilities/_utilities.scss