Bootstrap Sass Organization (#17)

* feat: bootstrap sass organization * fix: installed bootstrap * fix: import font from Next instead of Google Fonts * fix: update red hex value correctly * linting * fix: custom CSS property for font * fix: sass partials * fix: new sass path, incorporated navbar and footer * fix: removed comment --------- Co-authored-by: Tyler Yu <tyleryy@uci.edu>
HackAtUCI · Sep 11, 2023 · 7babafb · 7babafb
1 parent e952f49
commit 7babafb
Show file tree

Hide file tree

Showing 18 changed files with 129 additions and 100 deletions.
diff --git a/apps/sanity/package.json b/apps/sanity/package.json
@@ -34,4 +34,4 @@
 		"prettier": "^2.8.8",
 		"typescript": "^4.9.5"
 	}
-}
+}
diff --git a/apps/site/next.config.js b/apps/site/next.config.js
@@ -1,6 +1,11 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	reactStrictMode: true,
+	sassOptions: {
+		includePaths: [path.join(__dirname, "src", "lib", "styles")]
+	}
 };
 
 module.exports = nextConfig;
diff --git a/apps/site/src/app/globals.scss b/apps/site/src/app/globals.scss
diff --git a/apps/site/src/app/layout.tsx b/apps/site/src/app/layout.tsx
@@ -1,13 +1,10 @@
-import "bootstrap/dist/css/bootstrap.min.css";
-import "./globals.scss";
-
 import type { Metadata } from "next";
-import { Fuzzy_Bubbles } from "next/font/google";
+
+import FontProvider from "@/lib/FontProvider";
 
 import NavBar from "@/components/NavBar/NavBar";
 import Footer from "@/components/Footer/Footer";
-
-const fuzzy = Fuzzy_Bubbles({ weight: ["400", "700"], subsets: ["latin"] });
+import "@/lib/styles/bootstrap.scss";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -21,7 +18,8 @@ export default function RootLayout({
 }) {
 	return (
 		<html lang="en">
-			<body className={fuzzy.className}>
+			<FontProvider />
+			<body>
 				<NavBar />
 				{children}
 				<Footer />

diff --git a/apps/site/src/app/page.module.scss b/apps/site/src/app/page.module.scss
diff --git a/apps/site/src/app/page.tsx b/apps/site/src/app/page.tsx
@@ -1 +1 @@
-export { Landing as default } from "@/views"; 
+export { Landing as default } from "@/views";
diff --git a/apps/site/src/app/resources/page.tsx b/apps/site/src/app/resources/page.tsx
@@ -1 +1 @@
-export { Resources as default } from "@/views";
+export { Resources as default } from "@/views";
diff --git a/apps/site/src/app/schedule/page.tsx b/apps/site/src/app/schedule/page.tsx
@@ -1 +1 @@
-export { Schedule as default } from "@/views";
+export { Schedule as default } from "@/views";
diff --git a/apps/site/src/components/Footer/Footer.module.scss b/apps/site/src/components/Footer/Footer.module.scss
@@ -1,5 +1,3 @@
-@use "@/lib/styles/variables.scss" as variables;
-
 .footer {
 	padding-bottom: 7vw;
 }

diff --git a/apps/site/src/components/NavBar/NavBar.module.scss b/apps/site/src/components/NavBar/NavBar.module.scss
@@ -1,4 +1,4 @@
-@use "@/lib/styles/variables.scss" as variables;
+@use "bootstrap-utils" as utils;
 
 .nav {
 	position: sticky;
@@ -37,20 +37,20 @@
 
 .homeActive {
 	@extend .text;
-	color: variables.$green;
+	color: utils.$green;
 }
 
 .resourcesActive {
 	@extend .text;
-	color: variables.$blue;
+	color: utils.$blue;
 }
 
 .scheduleActive {
 	@extend .text;
-	color: variables.$navbar-red;
+	color: utils.$navbar-red;
 }
 
-@include variables.media-breakpoint-down(md) {
+@include utils.media-breakpoint-down(md) {
 	.logo {
 		left: 3vw;
 		transform: rotate(-16.81deg) translateY(-6vw);
@@ -60,7 +60,7 @@
 	}
 }
 
-@include variables.media-breakpoint-up(lg) {
+@include utils.media-breakpoint-up(lg) {
 	.logo {
 		width: 180px;
 		height: 180px;

diff --git a/apps/site/src/lib/FontProvider.tsx b/apps/site/src/lib/FontProvider.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Fuzzy_Bubbles } from "next/font/google";
+
+const fuzzy = Fuzzy_Bubbles({
+	weight: ["400", "700"],
+	subsets: ["latin"],
+});
+
+export default function FontProvider() {
+	return (
+		<style jsx global>
+			{`
+				:root {
+					--next-font-fuzzy-bubbles: ${fuzzy.style.fontFamily};
+				}
+			`}
+		</style>
+	);
+}
diff --git a/apps/site/src/lib/styles/_bootstrap-utils.scss b/apps/site/src/lib/styles/_bootstrap-utils.scss
@@ -0,0 +1,8 @@
+@import "./zothacks-theme";
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "~bootstrap/scss/maps";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
diff --git a/apps/site/src/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss b/apps/site/src/lib/styles/variables.scss → .../site/src/lib/styles/_zothacks-theme.scss
@@ -1,16 +1,11 @@
 // Common variables for site theme consistency
 
-// import bootstrap scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/mixins";
-
 // colors
 $white: #fafaff; // Paper Background color
 $beige: #faf4ea;
 $black: #21242d; // Text color
 $silver: #e6f2fc; // Line pattern color of paper
-$red: #e2b7f7; // ! hex value doesn't match with Figma design
+$red: #ff3750;
 $pink: #ffa8c3;
 $orange: #ff5c00;
 $gold: #ffd600; // accent colors
@@ -21,5 +16,7 @@ $blue: #3902fd;
 $purple: #6600b6;
 $navbar-red: #ff0000;
 
-// fonts
-$fuzzy-bubbles: "Fuzzy Bubbles", cursive;
+// bootstrap overrides
+$font-family-base: var(--next-font-fuzzy-bubbles);
+$font-size-base: 1.25rem;
+$headings-font-weight: 700;
diff --git a/apps/site/src/lib/styles/bootstrap.scss b/apps/site/src/lib/styles/bootstrap.scss
@@ -0,0 +1,25 @@
+// Core configuration with overrides
+@import "./bootstrap-utils";
+
+/* Layout & components */
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+
+/* Components */
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/accordion";
+
+/* Helpers */
+@import "~bootstrap/scss/helpers";
+
+/* Utilities */
+@import "~bootstrap/scss/utilities/api";
diff --git a/apps/site/src/views/Resources/Resources.tsx b/apps/site/src/views/Resources/Resources.tsx
@@ -1,5 +1,5 @@
 import "./Resources.module.scss";
 
 export default function Resources() {
-	return <h1>Resources</h1>
-}
+	return <h1>Resources</h1>;
+}
diff --git a/apps/site/src/views/Schedule/Schedule.tsx b/apps/site/src/views/Schedule/Schedule.tsx
@@ -1,5 +1,5 @@
 import "./Schedule.module.scss";
 
 export default function Schedule() {
-	return <h1>Schedule</h1>
+	return <h1>Schedule</h1>;
 }
diff --git a/apps/site/src/views/index.ts b/apps/site/src/views/index.ts
@@ -1,3 +1,3 @@
 export { default as Landing } from "./Landing/Landing";
 export { default as Resources } from "./Resources/Resources";
-export { default as Schedule } from "./Schedule/Schedule";
+export { default as Schedule } from "./Schedule/Schedule";