From fdf0d5865b23de77c5f52f627cd48f534f26522d Mon Sep 17 00:00:00 2001 From: Brian Rogers Date: Tue, 2 Jun 2026 08:34:59 -0600 Subject: [PATCH] adding some more cards --- README.md | 120 ++++++++++++++++- package.json | 1 + src/components/cards/MkChartCard.vue | 47 +++++++ src/components/cards/MkDefaultInfoCard.vue | 3 + src/components/cards/MkMiniStatisticsCard.vue | 61 +++++++++ src/components/cards/MkTimelineItem.vue | 64 +++++++++ src/components/cards/MkTimelineList.vue | 30 +++++ src/index.js | 94 ++++++++++++++ src/views/ProfileView.vue | 2 +- src/views/ShowcaseView.vue | 121 +++++++++++++++++- src/views/TableListView.vue | 2 +- vite.config.js | 26 +++- 12 files changed, 563 insertions(+), 8 deletions(-) create mode 100644 src/components/cards/MkChartCard.vue create mode 100644 src/components/cards/MkMiniStatisticsCard.vue create mode 100644 src/components/cards/MkTimelineItem.vue create mode 100644 src/components/cards/MkTimelineList.vue create mode 100644 src/index.js diff --git a/README.md b/README.md index 11dbbca..dd9eb8f 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,119 @@ -# Vue Material Kit Design System +# MK Design System -This is a fork/derivative of [Creative Tim's Vue Material Kit 2](https://www.creative-tim.com/product/vue-material-kit), source found [here](https://github.com/creativetimofficial/vue-material-kit). +A Vue 3 + Tailwind CSS v4 design system derived from [Creative Tim's Vue Material Kit 2](https://github.com/creativetimofficial/vue-material-kit). Built to be handed off to another Claude instance for consistent UI work across projects. -I am going to iterate over it with an AI agent and extract styles and functionality into a design system that can be plugged in to another project. The end goal is to have a working directory than can be handed off to another AI agent that is used when building a new site to keep a consistent and clean design. +**30+ components** · **Design tokens in CSS** · **Roboto variable font** · **Material Icons Round** + +--- + +## Using in your project + +### Option A — Copy components (simplest) + +1. Copy `src/components/`, `src/composables/`, and `src/style.css` into your project. + +2. Ensure your project has Tailwind CSS v4 with `@tailwindcss/vite`. Your `style.css` must contain the `@import "tailwindcss"` line and the full `@theme` block from this project's `src/style.css`. + +3. Get the font files (4 woff2 files — see **Fonts** below) and place them in `public/fonts/`. + +4. Import components directly: + ```js + import MkButton from '@/components/MkButton.vue' + import MkInput from '@/components/MkInput.vue' + ``` + +### Option B — Build as a library + +```bash +pnpm build:lib +``` + +This outputs `dist/mk-design-system.es.js`, `dist/mk-design-system.cjs.js`, and `dist/style.css`. + +In the consuming project: + +```js +// main.js — global registration +import { MkDesignSystem } from './mk-design-system.es.js' +import './mk-design-system.css' // design tokens + @font-face +app.use(MkDesignSystem) +``` + +Or import components individually: + +```js +import { MkButton, MkInput, MkNavbar } from './mk-design-system.es.js' +``` + +--- + +## Development + +```bash +pnpm install +pnpm dev # dashboard + showcase at localhost:5173 +pnpm build # production app build → dist/ +pnpm build:lib # library build → dist/mk-design-system.* +``` + +--- + +## Fonts + +Place these woff2 files in `public/fonts/` before running the dev server: + +``` +public/fonts/roboto/ + Roboto-VariableFont_wdth-wght.woff2 + Roboto-Italic-VariableFont_wdth-wght.woff2 + +public/fonts/roboto-slab/ + RobotoSlab-VariableFont_wght.woff2 + +public/fonts/material-icons-round/ + material-icons-round-latin-400-normal.woff2 +``` + +Download script (run from `/app`): + +```bash +# Roboto (official Google Fonts variable build) +curl -L "https://github.com/google/fonts/raw/main/apache/roboto/Roboto%5Bwdth%2Cwght%5D.ttf" \ + -o public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2 + +# Material Icons Round +curl -L "https://cdn.jsdelivr.net/npm/@fontsource/material-icons-round@5/files/material-icons-round-latin-400-normal.woff2" \ + -o public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2 +``` + +--- + +## Design reference + +| File | Purpose | +|------|---------| +| `design-system.md` | Token reference, component patterns, 12 quick-start rules | +| `conformity.md` | 17-rule checklist — feed this + generated code to Claude to score conformity | +| `tokens.json` | Machine-readable design token values | +| `src/style.css` | Live source of truth — `@theme` block defines all tokens | + +--- + +## For Claude + +When starting a new project using this design system, provide Claude with: + +1. `design-system.md` — the rules to follow +2. `conformity.md` — to score and verify generated code +3. The component list from `src/index.js` — so it knows what's available + +Prompt template: +> "Use the MK Design System (design-system.md attached). Available components are listed in src/index.js. Build [feature]. After generating, score it against conformity.md." + +--- + +## Notes + +- `MkSocialButton` renders Font Awesome brand icons (`fab fa-*`). Load Font Awesome Free 6 externally if social icons are needed. +- `MkRotatingCard` requires its parent to set an explicit height (e.g. `style="height: 22rem"`). +- `MkNavbar` scroll-blur is automatic in `transparent` mode — no JS required. diff --git a/package.json b/package.json index df0b250..ae8a7b3 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "vite", "build": "vite build", + "build:lib": "BUILD_TARGET=lib vite build", "preview": "vite preview" }, "dependencies": { diff --git a/src/components/cards/MkChartCard.vue b/src/components/cards/MkChartCard.vue new file mode 100644 index 0000000..9ea5fa8 --- /dev/null +++ b/src/components/cards/MkChartCard.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/components/cards/MkDefaultInfoCard.vue b/src/components/cards/MkDefaultInfoCard.vue index ca7c1cd..9029e53 100644 --- a/src/components/cards/MkDefaultInfoCard.vue +++ b/src/components/cards/MkDefaultInfoCard.vue @@ -1,6 +1,9 @@ + + diff --git a/src/components/cards/MkTimelineItem.vue b/src/components/cards/MkTimelineItem.vue new file mode 100644 index 0000000..d03dc2d --- /dev/null +++ b/src/components/cards/MkTimelineItem.vue @@ -0,0 +1,64 @@ + + + diff --git a/src/components/cards/MkTimelineList.vue b/src/components/cards/MkTimelineList.vue new file mode 100644 index 0000000..6bdd553 --- /dev/null +++ b/src/components/cards/MkTimelineList.vue @@ -0,0 +1,30 @@ + + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..46a5fd6 --- /dev/null +++ b/src/index.js @@ -0,0 +1,94 @@ +// ── Core UI ─────────────────────────────────────────────────── +export { default as MkAlert } from './components/MkAlert.vue' +export { default as MkAvatar } from './components/MkAvatar.vue' +export { default as MkBadge } from './components/MkBadge.vue' +export { default as MkButton } from './components/MkButton.vue' +export { default as MkCheckbox } from './components/MkCheckbox.vue' +export { default as MkInput } from './components/MkInput.vue' +export { default as MkPagination } from './components/MkPagination.vue' +export { default as MkPaginationItem } from './components/MkPaginationItem.vue' +export { default as MkProgress } from './components/MkProgress.vue' +export { default as MkSocialButton } from './components/MkSocialButton.vue' +export { default as MkSwitch } from './components/MkSwitch.vue' +export { default as MkTable } from './components/MkTable.vue' +export { default as MkTextArea } from './components/MkTextArea.vue' + +// ── Cards ───────────────────────────────────────────────────── +export { default as MkBackgroundBlogCard } from './components/cards/MkBackgroundBlogCard.vue' +export { default as MkCenteredBlogCard } from './components/cards/MkCenteredBlogCard.vue' +export { default as MkDefaultCounterCard } from './components/cards/MkDefaultCounterCard.vue' +export { default as MkDefaultInfoCard } from './components/cards/MkDefaultInfoCard.vue' +export { default as MkDefaultReviewCard } from './components/cards/MkDefaultReviewCard.vue' +export { default as MkFilledInfoCard } from './components/cards/MkFilledInfoCard.vue' +export { default as MkHorizontalTeamCard } from './components/cards/MkHorizontalTeamCard.vue' +export { default as MkRotatingCard } from './components/cards/MkRotatingCard.vue' +export { default as MkRotatingCardBack } from './components/cards/MkRotatingCardBack.vue' +export { default as MkRotatingCardFront } from './components/cards/MkRotatingCardFront.vue' +export { default as MkTransparentBlogCard } from './components/cards/MkTransparentBlogCard.vue' +export { default as MkMiniStatisticsCard } from './components/cards/MkMiniStatisticsCard.vue' +export { default as MkChartCard } from './components/cards/MkChartCard.vue' +export { default as MkTimelineList } from './components/cards/MkTimelineList.vue' +export { default as MkTimelineItem } from './components/cards/MkTimelineItem.vue' + +// ── Layout ──────────────────────────────────────────────────── +export { default as MkBreadcrumbs } from './components/layout/MkBreadcrumbs.vue' +export { default as MkFooter } from './components/layout/MkFooter.vue' +export { default as MkFooterCentered } from './components/layout/MkFooterCentered.vue' +export { default as MkHeader } from './components/layout/MkHeader.vue' +export { default as MkNavbar } from './components/layout/MkNavbar.vue' + +// ── Composables ─────────────────────────────────────────────── +export { useCountUp } from './composables/useCountUp.js' + +// ── Vue plugin (global registration) ───────────────────────── +import MkAlert from './components/MkAlert.vue' +import MkAvatar from './components/MkAvatar.vue' +import MkBadge from './components/MkBadge.vue' +import MkButton from './components/MkButton.vue' +import MkCheckbox from './components/MkCheckbox.vue' +import MkInput from './components/MkInput.vue' +import MkPagination from './components/MkPagination.vue' +import MkPaginationItem from './components/MkPaginationItem.vue' +import MkProgress from './components/MkProgress.vue' +import MkSocialButton from './components/MkSocialButton.vue' +import MkSwitch from './components/MkSwitch.vue' +import MkTable from './components/MkTable.vue' +import MkTextArea from './components/MkTextArea.vue' +import MkBackgroundBlogCard from './components/cards/MkBackgroundBlogCard.vue' +import MkCenteredBlogCard from './components/cards/MkCenteredBlogCard.vue' +import MkDefaultCounterCard from './components/cards/MkDefaultCounterCard.vue' +import MkDefaultInfoCard from './components/cards/MkDefaultInfoCard.vue' +import MkDefaultReviewCard from './components/cards/MkDefaultReviewCard.vue' +import MkFilledInfoCard from './components/cards/MkFilledInfoCard.vue' +import MkHorizontalTeamCard from './components/cards/MkHorizontalTeamCard.vue' +import MkRotatingCard from './components/cards/MkRotatingCard.vue' +import MkRotatingCardBack from './components/cards/MkRotatingCardBack.vue' +import MkRotatingCardFront from './components/cards/MkRotatingCardFront.vue' +import MkTransparentBlogCard from './components/cards/MkTransparentBlogCard.vue' +import MkMiniStatisticsCard from './components/cards/MkMiniStatisticsCard.vue' +import MkChartCard from './components/cards/MkChartCard.vue' +import MkTimelineList from './components/cards/MkTimelineList.vue' +import MkTimelineItem from './components/cards/MkTimelineItem.vue' +import MkBreadcrumbs from './components/layout/MkBreadcrumbs.vue' +import MkFooter from './components/layout/MkFooter.vue' +import MkFooterCentered from './components/layout/MkFooterCentered.vue' +import MkHeader from './components/layout/MkHeader.vue' +import MkNavbar from './components/layout/MkNavbar.vue' + +const components = [ + MkAlert, MkAvatar, MkBadge, MkButton, MkCheckbox, MkInput, + MkPagination, MkPaginationItem, MkProgress, MkSocialButton, + MkSwitch, MkTable, MkTextArea, + MkBackgroundBlogCard, MkCenteredBlogCard, MkDefaultCounterCard, + MkDefaultInfoCard, MkDefaultReviewCard, MkFilledInfoCard, + MkHorizontalTeamCard, MkRotatingCard, MkRotatingCardBack, + MkRotatingCardFront, MkTransparentBlogCard, + MkMiniStatisticsCard, MkChartCard, MkTimelineList, MkTimelineItem, + MkBreadcrumbs, MkFooter, MkFooterCentered, MkHeader, MkNavbar, +] + +export const MkDesignSystem = { + install(app) { + components.forEach(c => app.component(c.__name, c)) + }, +} diff --git a/src/views/ProfileView.vue b/src/views/ProfileView.vue index 2392359..4013c7a 100644 --- a/src/views/ProfileView.vue +++ b/src/views/ProfileView.vue @@ -346,7 +346,7 @@ const memberColor = { PC: 'primary', JD: 'info', SR: 'success', ML: 'warning', A
-
diff --git a/src/views/ShowcaseView.vue b/src/views/ShowcaseView.vue index 8d22b11..737138d 100644 --- a/src/views/ShowcaseView.vue +++ b/src/views/ShowcaseView.vue @@ -28,6 +28,10 @@ import MkHorizontalTeamCard from '../components/cards/MkHorizontalTeamCard.vue' import MkRotatingCard from '../components/cards/MkRotatingCard.vue' import MkRotatingCardFront from '../components/cards/MkRotatingCardFront.vue' import MkRotatingCardBack from '../components/cards/MkRotatingCardBack.vue' +import MkMiniStatisticsCard from '../components/cards/MkMiniStatisticsCard.vue' +import MkChartCard from '../components/cards/MkChartCard.vue' +import MkTimelineList from '../components/cards/MkTimelineList.vue' +import MkTimelineItem from '../components/cards/MkTimelineItem.vue' // Layout import MkBreadcrumbs from '../components/layout/MkBreadcrumbs.vue' @@ -307,7 +311,122 @@ const breadcrumbRoutes = [ - + +
+

Dashboard Cards

+

mini statistics · chart holder · timeline

+ + +
+ + + + +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + + + + +
+
+ +

Counter, Review & Team Cards

animated counters · star ratings · horizontal profile

diff --git a/src/views/TableListView.vue b/src/views/TableListView.vue index a3a12e1..3c7b5f8 100644 --- a/src/views/TableListView.vue +++ b/src/views/TableListView.vue @@ -17,7 +17,7 @@ const rows = [
Authors Table
-
diff --git a/vite.config.js b/vite.config.js index 367413a..370bc65 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,10 +1,32 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite' +import { resolve } from 'path' + +const isLib = process.env.BUILD_TARGET === 'lib' export default defineConfig({ plugins: [ - tailwindcss(), + // Tailwind only for the app build — consuming projects bring their own + !isLib && tailwindcss(), vue(), - ], + ].filter(Boolean), + + build: isLib + ? { + lib: { + entry: resolve(__dirname, 'src/index.js'), + name: 'MkDesignSystem', + fileName: format => `mk-design-system.${format}.js`, + formats: ['es', 'cjs'], + }, + rollupOptions: { + // Vue must be provided by the consuming project + external: ['vue'], + output: { globals: { vue: 'Vue' } }, + }, + // Emit a separate CSS file (design-system.css) consumers can import + cssCodeSplit: false, + } + : {}, })