From e9712dc50b8a226e8040ed5a34122fd875555482 Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Thu, 8 May 2025 10:58:16 +0800 Subject: [PATCH] Adding instructions for bun, pnpm and yarn --- docs/src/_includes/partials/sidebar.njk | 13 ++++++- docs/src/assets/styles.css | 3 ++ docs/src/installation.njk | 52 +++++++++++++++++++++---- packages/css/package.json | 4 +- 4 files changed, 62 insertions(+), 10 deletions(-) diff --git a/docs/src/_includes/partials/sidebar.njk b/docs/src/_includes/partials/sidebar.njk index 9cf763b..d11f6ab 100644 --- a/docs/src/_includes/partials/sidebar.njk +++ b/docs/src/_includes/partials/sidebar.njk @@ -13,7 +13,18 @@ {% call popover( trigger=trigger, trigger_attrs={"class": "btn-ghost p-2 h-12 w-full flex items-center justify-start"}, - content_attrs={"data-side": "right", "data-align": "end", "class": "w-80"} + content_attrs={ + "data-side": "right", + "data-align": "end", + "class": "w-80", + "x-init": " + if (window.innerWidth < 768) { + $el.setAttribute('data-side', 'top'); + $el.setAttribute('data-align', 'start'); + $el.classList.add('w-full'); + } + " + } ) %}
diff --git a/docs/src/assets/styles.css b/docs/src/assets/styles.css index 41e3d1f..1283994 100644 --- a/docs/src/assets/styles.css +++ b/docs/src/assets/styles.css @@ -498,6 +498,9 @@ .w-max { width: max-content; } + .max-w-80 { + max-width: calc(var(--spacing) * 80); + } .max-w-\[75\%\] { max-width: 75%; } diff --git a/docs/src/installation.njk b/docs/src/installation.njk index e93ff48..eb10ab1 100644 --- a/docs/src/installation.njk +++ b/docs/src/installation.njk @@ -25,6 +25,7 @@ toc: --- {% from "macros/code_block.njk" import code_block %} +{% from "tabs.njk" import tabs %}

Install the CSS

@@ -46,8 +47,17 @@ toc:

Add Basecoat to your Tailwind CSS file.

- {% set code %}npm install basecoat-css{% endset %} - {{ code_block(code, "bash") }} + {% set code_npm %}npm install basecoat-css{% endset %} + {% set code_bun %}bun install basecoat-css{% endset %} + {% set code_pnpm %}pnpm install basecoat-css{% endset %} + {% set code_yarn %}yarn add basecoat-css{% endset %} + {% set tabsets = [ + { tab: "npm", panel: code_block(code_npm, class="") }, + { tab: "pnpm", panel: code_block(code_pnpm, class="") }, + { tab: "bun", panel: code_block(code_bun, class="") }, + { tab: "yarn", panel: code_block(code_yarn, class="") } + ] %} + {{ tabs(id="npm-install", tabsets=tabsets) }}

Alternatively, you can directly copy the basecoat.css file into your project.

@@ -95,10 +105,23 @@ toc:

Use the CLI

-

If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. Dialog). It will copy the JS and `.html.jinja or .njk macros into your code.

-

For example, to add the Dialog component, run:

- {% set code %}npx basecoat-cli add dialog{% endset %} - {{ code_block(code, "bash") }} +

If you're using Nunjucks or Jinja, you can use the CLI to install the CSS and macros for any of the complex components(e.g. Dialog). It will copy the JS and .html.jinja or .njk macros into your code.

+

For example, to add the Dialog component, run one of the following commands:

+
+ +{% set code_npm_exec %}npx basecoat-cli add dialog{% endset %} +{% set code_bun_exec %}bunx basecoat-cli add dialog{% endset %} +{% set code_pnpm_exec %}pnpm dlx basecoat-cli add dialog{% endset %} +{% set code_yarn_exec %}yarn dlx basecoat-cli add dialog{% endset %} +{% set exec_tabsets = [ + { tab: "npm", panel: code_block(code_npm_exec, class="") }, + { tab: "pnpm", panel: code_block(code_pnpm_exec, class="") }, + { tab: "bun", panel: code_block(code_bun_exec, class="") }, + { tab: "yarn", panel: code_block(code_yarn_exec, class="") } +] %} +{{ tabs(id="cli-execution", tabsets=exec_tabsets, label="Execute CLI commands to add components:") }} + +

You will be asked to confirm the template engine and destination directory for the Javascript and macros.

@@ -152,4 +175,19 @@ toc: About shadcn/ui theming {% lucide "arrow-right" %} -
\ No newline at end of file + + +

Customization

+ +
+

You can override default styles using Tailwind:

+ {% set code %}{% endset %} + {{ code_block(code, "html") }} +

You can also obviously extend and/or override the existing styles with your own Tailwind files:

+ {% set code %}@import "tailwindcss"; +@import "basecoat-css"; +@import "theme.css";{% endset %} + {{ code_block(code, "css") }} +

You can also use use the theme variables to customize many aspects of the components (colors, fonts, sizes, etc).

+

If you want to make more drastic changes, I recommend copying the basecoat.css file into your project and making your changes there.

+
diff --git a/packages/css/package.json b/packages/css/package.json index a9ba9eb..b345641 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -1,7 +1,7 @@ { "name": "basecoat-css", "version": "0.1.0", - "description": "CSS for Basecoat UI components", + "description": "Tailwind CSS for Basecoat components", "author": { "name": "hunvreus", "url": "https://x.com/hunvreus" @@ -37,4 +37,4 @@ "url": "https://github.com/hunvreus/basecoat/issues" }, "homepage": "https://basecoatui.com/installation#install-css" -} +} \ No newline at end of file