hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-12 05:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated build script

Browse Source
This commit is contained in:
Ronan Berder
2025-06-15 08:11:00 +08:00
parent 386d139fe2
commit 9f5ffe6f51
12 changed files with 417 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/components/combobox.njk
+6 -1
View File
@@ -57,7 +57,12 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank"><code>select.js</code></a> file. It is recommended to also include the <a href="https://github.com/oddbird/css-anchor-positioning" target="_blank">CSS anchor positioning polyfill</a> to support older browsers. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/css-anchor-positioning.min.js");
}
</script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/dropdown-menu.njk
+6 -1
View File
@@ -86,7 +86,12 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/dropdown-menu.js" target="_blank"><code>dropdown-menu.js</code></a> file. It is recommended to also include the <a href="https://github.com/oddbird/css-anchor-positioning" target="_blank">CSS anchor positioning polyfill</a> to support older browsers. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/dropdown-menu.min.js" defer></script>
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/css-anchor-positioning.min.js");
}
</script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/popover.njk
+5 -1
View File
@@ -69,7 +69,11 @@ toc:
<p>It is recommended to include the <a href="https://github.com/oddbird/css-anchor-positioning" target="_blank">CSS anchor positioning polyfill</a> to support older browsers. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/css-anchor-positioning.min.js");
}
</script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/select.njk
+6 -1
View File
@@ -88,7 +88,12 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank"><code>select.js</code></a> file. It is recommended to also include the <a href="https://github.com/oddbird/css-anchor-positioning" target="_blank">CSS anchor positioning polyfill</a> to support older browsers. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/select.min.js" defer></script>
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/css-anchor-positioning.min.js");
}
</script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/sidebar.njk
+1 -1
View File
@@ -32,7 +32,7 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/sidebar.js" target="_blank"><code>sidebar.js</code></a> file. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/sidebar.min.js" defer></script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/tabs.njk
+1 -1
View File
@@ -86,7 +86,7 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/tabs.js" target="_blank"><code>tabs.js</code></a> file. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/tabs.min.js" defer></script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
docs/src/components/test.njk
-17
View File
@@ -1,17 +0,0 @@
---
layout: layouts/base.njk
---
<div id="my-popover" open popover="manual">
SOMETHING
SOMETHING
SOMETHING
SOMETHING
SOMETHING
</div>
<button popovertarget="my-popover">
TOGGLE SIDEBAR
</button>
docs/src/components/toast.njk
+5 -3
View File
@@ -30,7 +30,7 @@ toc:
{% set code_server_side %}<button
class="btn-outline"
hx-trigger="click"
hx-get="/fragments/toast/error"
hx-get="/fragments/toast/success"
hx-target="#toaster"
hx-swap="beforeend"
>
@@ -67,7 +67,7 @@ toc:
<p>Include the <a href="https://github.com/hunvreus/basecoat/blob/main/src/js/toast.js" target="_blank"><code>toast.js</code></a> file. Add this to the <code>&lt;head&gt;</code> of your page:</p>
</section>
{% set code_script %}{% raw %}<script src="https://unpkg.com/css-anchor-positioning"></script>{% endraw %}{% endset %}
{% set code_script %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/toast.min.js" defer></script>{% endset %}
{{ code_block(code_script | prettyHtml, "html") }}
<div class="flex flex-wrap gap-2 my-6">
@@ -138,7 +138,7 @@ toc:
<section class="prose">
<dl>
<dt><code class="highlight language-html">&lt;div class="toast"&gt;</code></dt>
<dd>Wraps around the toast component.
<dd>Wraps around the toast component. You can add a <code>data-duration</code> attribute to set the duration of the toast in milliseconds (e.g. <code>data-duration="5000"</code> for 5 seconds). If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for <code>error</code> toasts.
<dl>
<dt><code class="highlight language-html">&lt;div class="toast-content"&gt;</code></dt>
<dd>The content of the toast.
@@ -176,6 +176,8 @@ toc:
<section class="prose">
<dl>
<dt><code>duration</code> <span class="badge-secondary">Optional</span></dt>
<dd>The duration of the toast in milliseconds. If not provided, the default duration is 3000ms (3 seconds) or 5000ms (5 seconds) for <code>error</code> toasts.</dd>
<dt><code>category</code> <span class="badge-secondary">Optional</span></dt>
<dd>Category of the toast, either <code>success</code>, <code>info</code>, <code>warning</code>, or <code>error</code>.</dd>
<dt><code>title</code></dt>
docs/src/installation.njk
+86 -33
View File
@@ -3,17 +3,23 @@ layout: layouts/page.njk
title: Installation
description: How to install and use Basecoat in your app.
toc:
- label: Installing the CSS
id: install-css
- label: Quickstart
id: install-quickstart
- label: Install using the CDN
id: install-cdn
- label: Installing using NPM
id: install-npm
children:
- label: Add Tailwind CSS
id: install-css
id: install-npm-tailwind
- label: Add Basecoat
id: install-css-basecoat
id: install-npm-basecoat
- label: Import basecoat in your CSS
id: install-css-import
id: install-npm-import
- label: (Optional) Add JavaScript files
id: install-npm-js
- label: That's it
id: install-css-done
id: install-npm-done
- label: Components with JavaScript
id: install-js
- label: Use the CLI
@@ -27,18 +33,53 @@ toc:
{% from "macros/code_block.njk" import code_block %}
{% from "tabs.njk" import tabs %}
<h2 id="install-css">Install the CSS</h2>
<h2 id="install-quickstart"><a href="#install-quickstart">Quickstart</a></h2>
<section class="prose">
<p>The fastest way to get up and running is to load the CSS and all of the components' JavaScript using the CDN. Add the following to the <code>&lt;head&gt;</code> of your HTML file:</p>
</section>
{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/cdn.min.css">
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/all.min.js" defer></script>
<script type="module">
if (!("anchorName" in document.documentElement.style)) {
import("https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/css-anchor-positioning.min.js");
}
</script>{% endset %}
{{ code_block(code, "html") }}
<section class="prose">
<p>If you're not using all of the components requiring JavaScript (<a href="#install-js">Dropdown Menu</a>, <a href="#install-js">Select</a>, <a href="#install-js">Sidebar</a>, <a href="#install-js">Tabs</a> and <a href="#install-js">Toast</a>), follow the instructions below to only include the JavaScript files you actually need.</p>
</section>
<h2 id="install-cdn"><a href="#install-cdn">Install using the CDN</a></h2>
<section class="prose">
<p>The easiest way to use Basecoat is use the CDN. First, add the CSS to the <code>&lt;head&gt;</code> of your HTML file:</p>
</section>
{% set code %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/cdn.min.css">{% endset %}
{{ code_block(code, "html") }}
<section class="prose">
<p>Depending on the components you want to use, you may also need to add JavaScript files as instructed on the component's page. For example, for the <a href="/components/tabs">Tabs</a> component, you would add the following:</p>
</section>
{% set code %}<script src="https://cdn.jsdelivr.net/npm/basecoat-css@{{ pkg.version }}/dist/js/tabs.min.js"></script>{% endset %}
{{ code_block(code, "html") }}
<h2 id="install-npm"><a href="#install-npm">Install using NPM</a></h2>
<ol class="[&>h3]:step steps mb-12 md:ml-4 md:border-l md:pl-8">
<li class="step">
<h4 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-tailwind"><a href="#install-css-tailwind">Add Tailwind CSS</a></h4>
<h4 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-tailwind"><a href="#install-npm-tailwind">Add Tailwind CSS</a></h4>
<div class="prose">
<p>Basecoat uses Tailwind CSS. You need to install it in your project.</p>
<p><a href="https://tailwindcss.com/docs/installation" target="_blank">Follow the Tailwind CSS installation instructions to get started.</a></p>
</div>
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-basecoat"><a href="#install-css-basecoat">Add Basecoat</a></h3>
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-basecoat"><a href="#install-npm-basecoat">Add Basecoat</a></h3>
<div class="prose">
<p>Add Basecoat to your Tailwind CSS file.</p>
</div>
@@ -58,13 +99,19 @@ toc:
</div>
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-import"><a href="#install-css-import">Import basecoat in your CSS</a></h3>
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-import"><a href="#install-npm-import">Import basecoat in your CSS</a></h3>
{% set code %}@import "tailwindcss";
@import "basecoat-css";{% endset %}
{{ code_block(code, "css") }}
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-css-done"><a href="#install-css-done">That's it</a></h3>
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-js"><a href="#install-npm-js">(Optional) Add JavaScript files</a></h3>
<div class="prose">
<p>Some of the components <a href="#install-js">may require some JavaScript</a>, for example the <a href="/components/tabs">Tabs component</a>. Follow the instructions on the component's page.</p>
</div>
</li>
<li class="step mt-8">
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-done"><a href="#install-npm-done">That's it</a></h3>
<div class="prose">
<p>You can now use any of the Basecoat classes in your project (e.g. <code>btn</code>, <code>card</code>, <code>input</code>, etc). Read the documentation about each component to get started (e.g. <a href="/components/button">button</a>, <a href="/components/card">card</a>, <a href="/components/input">input</a>, etc).</p>
<p>Some components (e.g. <a href="/components/select">Select</a>) require <a href="#install-js">JavaScript code to work</a>.</p>
@@ -75,26 +122,21 @@ toc:
<h2 id="install-js"><a href="#install-js">Components with JavaScript</a></h2>
<div class="prose">
<p><b>Some components require JavaScript code to work.</b></p>
<p>The documentation provides Alpine.js code snippets to cover that. <a href="https://alpinejs.dev/docs/installation" target="_blank">Make sure to install Alpine.js if you decide to use them.</a></p>
<p>For simple components like <a href="/components/accordion">Accordion</a> or <a href="/components/slider">Slider</a>, you will notice some inline Alpine.js code that you can just copy along with the rest of the HTML.</p>
<p>For more complex components (<a href="/components/dialog">Dialog</a>, <a href="/components/dropdown-menu">Dropdown Menu</a>, <a href="/components/popover">Popover</a>, <a href="/components/select">Select</a>, <a href="/components/tabs">Tabs</a> and <a href="/components/tooltip">Toast</a>), you have one of 2 options:
<p><b>Some components may require JavaScript code to work.</b></p>
<p>If a component requires JavaScript, the documentation page will provide instructions. There are 2 options to add the JavaScript code to your project:</p>
<ul>
<li>Copy the JavaScript snippet provided in the documentation page into your project.</li>
<li>
<p><a href="https://github.com/hunvreus/basecoat/tree/main/src/js" target="_blank">Download the script as a separate file</a> and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). <b>If you use this approach, make sure to load the file before the Alpine.js core JS file and register the component on the <code>alpine:init</code> event.</b> For example:</p>
{% set code %}<script src="/assets/js/dialog.js" defer></script>
<script>
document.addEventListener('alpine:init', () => {
window.basecoat.registerDialog(Alpine);
});
</script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>{% endset %}
{{ code_block(code, "html") }}
</li>
<li><b>CDN</b>: you add the <code>&lt;script&gt;</code> tag provided on the component's page to the <code>&lt;head&gt;</code> of your HTML file.</li>
<li><b>Local file</b>: you download the script as a separate file and include it in your project (<a href="#install-cli">or let the CLI do it for you</a>). Make sure keep the <code>defer</code> attribute on the <code>&lt;script&gt;</code> tag when doing so.</p>
</ul>
<p>A few things to keep in mind:</p>
<ul>
<li>Most components (e.g. <a href="/components/button">Button</a>, <a href="/components/card">Card</a>, <a href="/components/input">Input</a>, etc) do not require any JavaScript at all to work.</li>
<li>Some of the JavaScript is optional. For example the <a href="/components/dropdown-menu">Dropdown Menu component</a> suggest to add the <a href="https://github.com/oddbird/css-anchor-positioning" target="_blank">CSS anchor positioning polyfill</a> to support older browser, as well as a <code>dropdown-menu.js</code> to improve accessiblity (WAI-ARIA) and usability (keyboard navigation).</li>
<li>Only a handful of components require JavaScript to work (e.g. <a href="/components/sidebar">Sidebar</a>, <a href="/components/toast">Toast</a>, ...).</li>
</ul>
<p>You are also welcome to write your own JavaScript.</p>
<p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
</div>
<h2 id="install-cli"><a href="#install-cli">Use the CLI</a></h2>
@@ -175,14 +217,25 @@ toc:
<h2 id="install-customization"><a href="#install-manual">Customization</a></h2>
<div class="prose">
<p>You can override default styles using Tailwind:</p>
<section class="prose">
<p>You can override default styles using Tailwind:</p>
</section>
{% set code %}<button class="btn font-normal ">Click me</button>{% endset %}
{{ code_block(code, "html") }}
<p>You can also obviously extend and/or override the existing styles with your own Tailwind files:</p>
<section class="prose">
<p>You can also extend or override the existing styles in your own Tailwind files:</p>
</section>
{% set code %}@import "tailwindcss";
@import "basecoat-css";
@import "theme.css";{% endset %}
{{ code_block(code, "css") }}
<p>You can also use use the <a href="#install-theming">theme variables</a> to customize many aspects of the components (colors, fonts, sizes, etc).</p>
<p><b>If you want to make more drastic changes</b>, I recommend <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copying the <code>basecoat.css</code> file</a> into your project and making your changes there.</p>
<section class="prose">
<p>More importantly, you can use the <a href="#install-theming">theme variables</a> to customize many aspects of the components (colors, fonts, sizes, etc).</p>
<p><b>If you want to make more drastic changes</b>, you can <a href="https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css" target="_blank">copy the <code>basecoat.css</code> file</a> into your project and make your changes there.</p>
</section>
</div>