From 40d12e8b974d5dee36d1023d424c3744d1167c86 Mon Sep 17 00:00:00 2001 From: Arnav Borborah Date: Fri, 25 Aug 2023 15:40:55 -0400 Subject: [PATCH 1/4] ROADM-7: Install preline --- package-lock.json | 18 ++++++++++++++++++ package.json | 1 + src/app.html | 3 ++- tailwind.config.js | 4 ++-- 4 files changed, 23 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 17fc0f8..6a0cc30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "dotenv": "^16.3.1", "express": "^4.18.2", "mongoose": "^7.4.3", + "preline": "^1.9.0", "tailwindcss": "^3.3.3" }, "devDependencies": { @@ -621,6 +622,15 @@ "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==" }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@prisma/client": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.1.1.tgz", @@ -3670,6 +3680,14 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/preline": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/preline/-/preline-1.9.0.tgz", + "integrity": "sha512-zvOexsDBood9gBAQYSwz7iY8TaomtRD0/qxvCnJl3caq5pif6frl8Oe4b4DsxHHD3Clzl4I5RmVKTq9XjMvNJA==", + "dependencies": { + "@popperjs/core": "^2.11.2" + } + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/package.json b/package.json index a7569bb..f75f5ef 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "dotenv": "^16.3.1", "express": "^4.18.2", "mongoose": "^7.4.3", + "preline": "^1.9.0", "tailwindcss": "^3.3.3" } } diff --git a/src/app.html b/src/app.html index effe0d0..411e13c 100644 --- a/src/app.html +++ b/src/app.html @@ -1,4 +1,4 @@ - + @@ -8,5 +8,6 @@
%sveltekit.body%
+ diff --git a/tailwind.config.js b/tailwind.config.js index bfe0bc2..999dad9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,8 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{html,js,svelte,ts}'], + content: ['./src/**/*.{html,js,svelte,ts}', 'node_modules/preline/dist/*.js'], theme: { extend: {} }, - plugins: [] + plugins: [require('preline/plugin')] }; From e1edb659379051eac21fba3211ff9a3c2615bd0c Mon Sep 17 00:00:00 2001 From: Arnav Borborah Date: Mon, 21 Aug 2023 11:17:03 -0400 Subject: [PATCH 2/4] ROADM-7: Add custom colors to Tailwind --- tailwind.config.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/tailwind.config.js b/tailwind.config.js index 999dad9..ef5e252 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,6 +2,23 @@ export default { content: ['./src/**/*.{html,js,svelte,ts}', 'node_modules/preline/dist/*.js'], theme: { + colors: { + // Rutgers red + primary: '#CA0037', + // True gray from Figma extended tailwind color palette + gray: { + 10: '#F5F5F5', + 50: '#FAFAFA', + 200: '#E5E5E5', + 300: '#D4D4D4', + 400: '#A3A3A3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#262626' + } + }, extend: {} }, plugins: [require('preline/plugin')] From a1df2dcdbe1889f8e66791109dc5102ae1881b70 Mon Sep 17 00:00:00 2001 From: Arnav Borborah Date: Fri, 25 Aug 2023 17:38:52 -0400 Subject: [PATCH 3/4] ROADM-7: Copy template from preline --- src/app.css | 4 + src/routes/+layout.svelte | 778 +++++++++++++++++++++++++++++++++++++- src/routes/+page.svelte | 1 - 3 files changed, 781 insertions(+), 2 deletions(-) diff --git a/src/app.css b/src/app.css index b5c61c9..f4d46c7 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,7 @@ @tailwind base; @tailwind components; @tailwind utilities; + +html { + @apply bg-gray-50 dark:bg-slate-900; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 2e511e0..513c33b 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,4 +2,780 @@ import '../app.css'; - + +
+ +
+ + + + +
+
+ + + + + +
    +
  1. + Application Layout + + + +
    2. +
  2. + Dashboard +
    3. +
+ +
+
+ + + + + + + +
+ +
+

Starter Pages & Examples

+

+ Application Layout: Sidebar & Header using Tailwind CSS +

+

+ This is a simple application layout with sidebar and header examples using Tailwind CSS. +

+
+ + + + + Get the source code + + + + + + Back to examples + +
+
+ +
+ + diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a8beed5..e69de29 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1 +0,0 @@ -
From 07b38c2caddfe6e8b03f4be4148efadd1fdf3ae3 Mon Sep 17 00:00:00 2001 From: Arnav Borborah Date: Fri, 25 Aug 2023 17:50:52 -0400 Subject: [PATCH 4/4] ROADM-7: Temporarily comment out colors until the right set is chosen --- tailwind.config.js | 41 +++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index ef5e252..ac97cdf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,25 +1,26 @@ /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{html,js,svelte,ts}', 'node_modules/preline/dist/*.js'], - theme: { - colors: { - // Rutgers red - primary: '#CA0037', - // True gray from Figma extended tailwind color palette - gray: { - 10: '#F5F5F5', - 50: '#FAFAFA', - 200: '#E5E5E5', - 300: '#D4D4D4', - 400: '#A3A3A3', - 500: '#737373', - 600: '#525252', - 700: '#404040', - 800: '#262626', - 900: '#262626' - } - }, - extend: {} - }, + // Temporarily comment out until we find right set of colors + // theme: { + // colors: { + // // Rutgers red + // primary: '#CA0037', + // // True gray from Figma extended tailwind color palette + // gray: { + // 10: '#F5F5F5', + // 50: '#FAFAFA', + // 200: '#E5E5E5', + // 300: '#D4D4D4', + // 400: '#A3A3A3', + // 500: '#737373', + // 600: '#525252', + // 700: '#404040', + // 800: '#262626', + // 900: '#171717' + // } + // }, + // extend: {} + // }, plugins: [require('preline/plugin')] };