Implement Bootstrap Custom Utilities

web/src/styles/_CUSTOMUTILITIES.md

@@ -0,0 +1,38 @@
+# My Bootstrap Project
+
+## Custom Utilities
+- Follow outline in _custom.scss
+- Each utility is for an individual property
+- example utilities are mapped below
+- import into stylesheet or directly to page using: `@import "../styles/custom";`
+- (Should already be completed) Make sure dependencies are installed: `npm install bootstrap node-sass gatsby-plugin-sass` and `gatsby-plugin-sass` is included in `gatsby-config.js`
+
+### Margin Utilities
+- `.m-1x`: `margin: 0.25rem;`
+- `.m-2x`: `margin: 0.5rem;`
+- `.m-3x`: `margin: 1rem;`
+- `.m-4x`: `margin: 2rem;`
+- `.m-5x`: `margin: 4rem;`
+
+### Padding utilities
+- `1x` : `padding: 0.25rem;`
+- `2x` : `padding: 0.5rem;`
+- `3x` : `padding: 1rem;`
+- `4x` : `padding: 2rem;`
+- `5x` : `padding: 4rem;`
+
+### Text Color utilities
+- `primary` : `color: #007bff blue;`
+- `secondary` : `color: #6c757d gray;`
+- `success` : `color: #28a745 green;`
+- `danger` : `color: #dc3545 red;`
+- `warning` : `color: #ffc107 yellow;`
+- `info` : `color: #17a2b8 light blue;`
+- `light` : `color: #f8f9fa white;`
+- `dark` : `color: #343a40 dark gray;`
+
+### Shadow Utilities
+- `sm`: `0 1px 2px rgba(0, 0, 0, 0.05);`
+- `md`: `0 4px 6px rgba(0, 0, 0, 0.1);`
+- `lg`: `0 10px 20px rgba(0, 0, 0, 0.15);`
+- `xl`: `0 20px 40px rgba(0, 0, 0, 0.2);`

web/src/styles/_custom.scss

@@ -0,0 +1,85 @@
+// _custom.scss
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/utilities/api";
+
+// Custom Margin Utilities
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-margin": (
+      property: margin,
+      class: m,
+      values: (
+        "1x": 0.25rem,
+        "2x": 0.5rem,
+        "3x": 1rem,
+        "4x": 2rem,
+        "5x": 4rem
+      )
+    )
+  )
+);
+
+// Custom Padding Utilities
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-padding": (
+      property: padding,
+      class: p,
+      values: (
+        "1x": 0.25rem,
+        "2x": 0.5rem,
+        "3x": 1rem,
+        "4x": 2rem,
+        "5x": 4rem
+      )
+    )
+  )
+);
+
+// Custom Color Utilities
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-color": (
+      property: color,
+      class: text,
+      values: (
+        "primary": #007bff,
+        "secondary": #6c757d,
+        "success": #28a745,
+        "danger": #dc3545,
+        "warning": #ffc107,
+        "info": #17a2b8,
+        "light": #f8f9fa,
+        "dark": #343a40
+      )
+    )
+  )
+);
+
+// Custom Shadow Utilities
+$utilities: map-merge(
+  $utilities,
+  (
+    "custom-shadow": (
+      property: box-shadow,
+      class: shadow,
+      values: (
+        "sm": 0 1px 2px rgba(0, 0, 0, 0.05),
+        "md": 0 4px 6px rgba(0, 0, 0, 0.1),
+        "lg": 0 10px 20px rgba(0, 0, 0, 0.15),
+        "xl": 0 20px 40px rgba(0, 0, 0, 0.2)
+      )
+    )
+  )
+);
+
+// Generate Utilities
+@import "~bootstrap/scss/utilities/api";