fix: add extend style utilities, remove CSS redundancy and optimize f…

…or minification
mattjmoran · Feb 5, 2025 · f3312e2 · f3312e2
1 parent 6e5fb31
commit f3312e2
Show file tree

Hide file tree

Showing 3 changed files with 215 additions and 297 deletions.
diff --git a/docs/resources.md b/docs/resources.md
@@ -13,3 +13,4 @@ A collection of resources that I have found useful while working on this project
 - [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html) - The TypeScript style guide used at Google.
 - [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) - The HTML/CSS style guide used at Google.
 - [How to Make Repeating Border Images](https://css-tricks.com/how-to-make-repeating-border-images/) - A guide on how to make repeating border images in CSS.
+- [CSS Flexbox Layout Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - A comprehensive guide to CSS flexbox layout.
diff --git a/src/lib/styles/extends.pcss b/src/lib/styles/extends.pcss
@@ -0,0 +1,26 @@
+%flex-column {
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: flex-start;
+	align-items: stretch;
+	align-content: normal;
+}
+
+%flex-row {
+	display: flex;
+	flex-flow: row nowrap;
+	justify-content: flex-start;
+	align-items: stretch;
+	align-content: normal;
+}
+
+%flex-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+%no-space {
+	margin: 0;
+	padding: 0;
+}