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

Done with introduction, now moving on to front-page

Browse Source
This commit is contained in:
Ronan Berder
2025-05-06 20:24:37 +08:00
parent 2f4855bc66
commit cb81d366fa
11 changed files with 67 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/src/_includes/partials/sidebar.njk
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="grid gap-4 p-4">
<header class="grid gap-1.5">
<h2 class="font-semibold">I hope you like Basecoat...</h2>
<p class="text-muted-foreground text-sm">I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>) because I thought it'd be helpful to others. If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
<p class="text-muted-foreground text-sm">My name is <a href="https://ronanberder.com" target="_blank">Ronan</a> and I made this (and <a class="underline underline-offset-4" href="https://pagescms.org" target="_target">other things</a>). If you find it useful, please consider sponsoring me on GitHub or following me on X.</p>
</header>
<footer class="grid gap-2">
<a href="https://github.com/sponsors/hunvreus" class="btn-sm" target="_blank">Sponsor me on GitHub</a>
docs/src/assets/styles.css
-92
View File
@@ -223,9 +223,6 @@
}
}
@layer utilities {
.\@container {
container-type: inline-size;
}
.pointer-events-none {
pointer-events: none;
}
@@ -258,9 +255,6 @@
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-1 {
top: calc(var(--spacing) * 1);
}
.top-1\/2 {
top: calc(1/2 * 100%);
}
@@ -273,9 +267,6 @@
.right-3 {
right: calc(var(--spacing) * 3);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.left-1\/2 {
left: calc(1/2 * 100%);
}
@@ -336,9 +327,6 @@
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.-ml-1 {
margin-left: calc(var(--spacing) * -1);
}
.-ml-1\.5 {
margin-left: calc(var(--spacing) * -1.5);
}
@@ -383,10 +371,6 @@
width: calc(var(--spacing) * 2.5);
height: calc(var(--spacing) * 2.5);
}
.size-3 {
width: calc(var(--spacing) * 3);
height: calc(var(--spacing) * 3);
}
.size-3\.5 {
width: calc(var(--spacing) * 3.5);
height: calc(var(--spacing) * 3.5);
@@ -448,15 +432,9 @@
.min-h-\[350px\] {
min-height: 350px;
}
.w-1 {
width: calc(var(--spacing) * 1);
}
.w-1\/2 {
width: calc(1/2 * 100%);
}
.w-2 {
width: calc(var(--spacing) * 2);
}
.w-2\/3 {
width: calc(2/3 * 100%);
}
@@ -529,42 +507,21 @@
.flex-1 {
flex: 1;
}
.flex-shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.border-collapse {
border-collapse: collapse;
}
.-translate-x-1 {
--tw-translate-x: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-x-1\/2 {
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1 {
--tw-translate-y: calc(var(--spacing) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.-translate-y-1\/2 {
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0 {
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.translate-y-0\.5 {
--tw-translate-y: calc(var(--spacing) * 0.5);
translate: var(--tw-translate-x) var(--tw-translate-y);
}
.transform {
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
}
.animate-pulse {
animation: var(--animate-pulse);
}
@@ -574,24 +531,15 @@
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.scroll-m-20 {
scroll-margin: calc(var(--spacing) * 20);
}
.scroll-mt-14 {
scroll-margin-top: calc(var(--spacing) * 14);
}
.scroll-mt-16 {
scroll-margin-top: calc(var(--spacing) * 16);
}
.list-decimal {
list-style-type: decimal;
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -622,9 +570,6 @@
.justify-start {
justify-content: flex-start;
}
.gap-0 {
gap: calc(var(--spacing) * 0);
}
.gap-0\.5 {
gap: calc(var(--spacing) * 0.5);
}
@@ -680,9 +625,6 @@
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
}
}
.gap-x-1 {
column-gap: calc(var(--spacing) * 1);
}
.gap-x-1\.5 {
column-gap: calc(var(--spacing) * 1.5);
}
@@ -761,9 +703,6 @@
.border-amber-50 {
border-color: var(--color-amber-50);
}
.border-border {
border-color: var(--border);
}
.border-border\/50 {
border-color: var(--border);
@supports (color: color-mix(in lab, red, red)) {
@@ -791,9 +730,6 @@
.bg-sidebar-primary {
background-color: var(--sidebar-primary);
}
.mask-repeat {
mask-repeat: repeat;
}
.object-cover {
object-fit: cover;
}
@@ -830,9 +766,6 @@
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
@@ -4581,26 +4514,6 @@
inherits: false;
initial-value: 0;
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
@@ -4815,11 +4728,6 @@
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
--tw-rotate-x: initial;
--tw-rotate-y: initial;
--tw-rotate-z: initial;
--tw-skew-x: initial;
--tw-skew-y: initial;
--tw-space-y-reverse: 0;
--tw-space-x-reverse: 0;
--tw-border-style: solid;
docs/src/components/alert-dialog.njk
+1 -1
View File
@@ -69,7 +69,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% set footer %}
<button class="btn-outline" @click="open = false">Cancel</button>
docs/src/components/combobox.njk
+1 -1
View File
@@ -81,7 +81,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>select()</code> macro directly, making sure to set <code>is_combobox</code> to <code>True</code> (or <code>true</code> for Nunjucks). <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% call select(
listbox_attrs={"data-empty": "No framework found."},
docs/src/components/dialog.njk
+1 -1
View File
@@ -100,7 +100,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% set footer %}
<button class="btn-outline" @click="open = false">Cancel</button>
docs/src/components/dropdown-menu.njk
+1 -1
View File
@@ -124,7 +124,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% call dropdown_menu(
id="dropdown-menu",
docs/src/components/popover.njk
+1 -1
View File
@@ -99,7 +99,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<section class="prose">
<p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p>If you use Jinja (or Nunjucks), you can use the <code>popover()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
</section>
{% set raw_code %}{% raw %}{% call popover(
docs/src/components/select.njk
+1 -1
View File
@@ -118,7 +118,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>dropdown_menu()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% call select(name="select-js") %}
<div role="group" aria-labelledby="fruit-options-label">
docs/src/components/tabs.njk
+1 -1
View File
@@ -118,7 +118,7 @@ document.addEventListener('alpine:init', () => {
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
<p class="prose">If you use Jinja (or Nunjucks), you can use the <code>tabs()</code> macro directly. <a href="/installation/#install-macros">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
{% set raw_code %}{% raw %}{% set account_panel %}
<div class="card">
docs/src/installation.njk
+1 -1
View File
@@ -88,7 +88,7 @@ toc:
<p>All of the components try and implement WAI-ARIA standards to make them accessible.</p>
</div>
<h2 id="install-cli">Use the CLI</h2>
<h2 id="install-cli"><a href="#install-cli">Use the CLI</a></h2>
<div class="prose">
<p>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. <a href="/components/dialog">Dialog</a>). It will copy the JS and `<code>.html.jinja</code> or <code>.njk</code> macros into your code.</p>
docs/src/introduction.njk
+58 -1
View File
@@ -1,6 +1,63 @@
---
layout: layouts/page.njk
title: Introduction
description: Basecoat is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.
description: Basecoat is a set of components built with Tailwind CSS. It is designed to be used with any traditional web stack
toc:
- label: Why Basecoat?
id: why
- label: How it works
id: how-it-works
- label: How can I help?
id: how-can-i-help
---
<h2 id="why"><a href="#why">Why Basecoat?</a></h2>
<div class="prose">
<p><b>Basecoat brings the magic of <a href="https://ui.shadcn.com/">shadcn/ui</a> to any traditional web stack: no React required.</b></p>
<p>Tailwind won. But building UIs with utility classes alone kinda sucks. Most Tailwind libraries like Flowbite, Preline, or even Tailwind UI ask you to copy walls of unreadable classes into your HTML. It works, but it's messy and hard to maintain.</p>
<p>shadcn/ui avoids that by wrapping everything in React components. It also gives you a killer design system, theme support, a CLI, and a growing ecosystem.</p>
<p>But maybe you're not using React. Maybe your app is built with plain HTML. Or Flask. Or Rails. Or Laravel. Or Django. Or whatever.</p>
<p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>
<ul>
<li><b>Lightweight</b>: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.</li>
<li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
<li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
<li><b>Accessible</b>: components follow accessibility best practices.</li>
<li><b>Dark mode ready</b>: respects your Tailwind config.</li>
<li><b>Extendable</b>: tweak styles with Tailwind or CSS variables.</li>
<li><b>Themable</b>: fully compatible with shadcn/ui themes.</li>
<li><b>Readable</b>: no class soup, just clean markup.</li>
<li><b>Free and open source</b>: MIT licensed.</li>
</ul>
</div>
<h2 id="how-it-works"><a href="#how-it-works">How it works</a></h2>
<div class="prose">
<p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>form</code>, or <code>card</code>.</p>
<p>Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.</p>
<p>There's also a CLI to help you scaffold components and get set up fast.</p>
<p><a href="/docs/installation">Check out the installation guide</a> to get started.</p>
</div>
<h2 id="how-can-i-help"><a href="#how-can-i-help">How can I help?</a></h2>
<div class="prose">
<p>Basecoat is 100% open source and free.</p>
<ul>
<li><a href="https://github.com/basecoat-ui/basecoat">Star it on GitHub</a></li>
<li><a href="https://github.com/basecoat-ui/basecoat/issues">Report bugs or request features</a></li>
<li><a href="https://github.com/basecoat-ui/basecoat/pulls">Submit a pull request</a></li>
<li><a href="https://github.com/sponsors/hunvreus">Sponsor the project</a></li>
</ul>
</div>