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.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/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/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 @@ -
diff --git a/tailwind.config.js b/tailwind.config.js index bfe0bc2..ac97cdf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,26 @@ /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/*.{html,js,svelte,ts}'], - theme: { - extend: {} - }, - plugins: [] + content: ['./src/**/*.{html,js,svelte,ts}', 'node_modules/preline/dist/*.js'], + // 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')] };