update layouts

README.md

@@ -33,6 +33,11 @@ A Template repo to help spin up custom child themes for clients quickly.
 
 # Changelog
 
+## 0.2.2
+
+-   Add max-width and content sizes for Cornerstone with WordPress variables (generated by theme.json)
+-   Add `1.25rem (20px)` gutters to the site
+
 ## 0.2.1
 
 -   bug fixes

src/styles/_layout.scss

@@ -0,0 +1,26 @@
+/**
+* Layout
+* Sets Cornerstone's layout styles to mirror WordPress Content & Wide Sizes
+* Also sets a default gutter to 1.25rem (defined in theme.json)
+*/
+.x-container {
+	&.max {
+		max-width: var(--wp--style--global--wide-size);
+	}
+	&.width {
+		width: calc(100% - var(--wp--custom--gutters));
+
+		& > * {
+			max-width: 100%;
+		}
+	}
+	&.offset {
+		max-width: 100%;
+	}
+}
+
+.x-row {
+	& > .x-row-inner {
+		margin-inline: calc((var(--wp--custom--gutters) / 2) * -1);
+	}
+}

src/styles/main.scss

@@ -1,3 +1,3 @@
 @use "./reset";
 @use "./typography";
-@use "./global";
+@use "./layout";

style.css

@@ -4,7 +4,7 @@ Theme URI: https://github.com/kingdom-one/[client-repo]
 Author: Kingdom One
 Author URI: https://wwww.kingdomone.co
 Description: A custom Wordpress theme for [Client Name], built on the back of Pro Theme (by Themeco).
-Version: 0.2.1
+Version: 0.2.2
 License: GNU General Public License v2 or later
 Template: pro
 */

theme.json

@@ -78,7 +78,8 @@
 			"lineHeight": "calc(2px + 2ex + 2px)",
 			"transitionTiming": ".15s",
 			"transitionEasing": "ease-in-out",
-			"transition": "var(--wp--custom--transition-timing) var(--wp--custom--transition-easing)"
+			"transition": "var(--wp--custom--transition-timing) var(--wp--custom--transition-easing)",
+			"gutters": "1.25rem"
 		}
 	},
 	"styles": {