mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-11 04:38:18 +00:00
Cleaning up installation
This commit is contained in:
Ronan Berder
+9
-5
@@ -79,10 +79,14 @@
|
||||
}
|
||||
.step {
|
||||
counter-increment: step;
|
||||
}
|
||||
.step:before {
|
||||
@apply md:absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
|
||||
@apply md:ml-[-50px] md:mt-[-4px];
|
||||
content: counter(step);
|
||||
|
||||
&:before {
|
||||
@apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
|
||||
@apply md:ml-[-50px] md:mt-[-4px];
|
||||
content: counter(step);
|
||||
}
|
||||
> h3 {
|
||||
@apply max-md:ml-10 min-h-8 flex items-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,5 +7,5 @@ export default {
|
||||
x: "@hunvreus"
|
||||
},
|
||||
url: process.env.ELEVENTY_ENV === 'development' ? "http://localhost:8080" : "https://basecoatui.com",
|
||||
version: "beta"
|
||||
version: "0.2.0"
|
||||
};
|
||||
+42
-130
@@ -5,7 +5,6 @@
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--color-amber-50: oklch(98.7% 0.022 95.277);
|
||||
@@ -64,13 +63,6 @@
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
|
||||
--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--animate-spin: spin 1s linear infinite;
|
||||
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
@@ -253,9 +245,6 @@
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.\@container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
.pointer-events-none {
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -291,9 +280,6 @@
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1 {
|
||||
top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
@@ -303,15 +289,9 @@
|
||||
.top-22 {
|
||||
top: calc(var(--spacing) * 22);
|
||||
}
|
||||
.right-2 {
|
||||
right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.right-2\.5 {
|
||||
right: calc(var(--spacing) * 2.5);
|
||||
}
|
||||
.left-1 {
|
||||
left: calc(var(--spacing) * 1);
|
||||
}
|
||||
.left-1\/2 {
|
||||
left: calc(1/2 * 100%);
|
||||
}
|
||||
@@ -357,6 +337,9 @@
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mt-6 {
|
||||
margin-top: calc(var(--spacing) * 6);
|
||||
}
|
||||
.mt-8 {
|
||||
margin-top: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -375,9 +358,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);
|
||||
}
|
||||
@@ -422,10 +402,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);
|
||||
@@ -490,15 +466,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%);
|
||||
}
|
||||
@@ -580,42 +550,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);
|
||||
}
|
||||
@@ -625,9 +574,6 @@
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.resize {
|
||||
resize: both;
|
||||
}
|
||||
.scroll-m-20 {
|
||||
scroll-margin: calc(var(--spacing) * 20);
|
||||
}
|
||||
@@ -673,9 +619,6 @@
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.gap-0 {
|
||||
gap: calc(var(--spacing) * 0);
|
||||
}
|
||||
.gap-0\.5 {
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@@ -731,9 +674,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);
|
||||
}
|
||||
@@ -823,9 +763,6 @@
|
||||
.border-amber-50 {
|
||||
border-color: var(--color-amber-50);
|
||||
}
|
||||
.border-border {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
.border-border\/50 {
|
||||
border-color: var(--color-border);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -862,9 +799,6 @@
|
||||
.bg-sidebar-primary {
|
||||
background-color: var(--color-sidebar-primary);
|
||||
}
|
||||
.mask-repeat {
|
||||
mask-repeat: repeat;
|
||||
}
|
||||
.object-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
@@ -907,9 +841,6 @@
|
||||
.px-\[0\.3rem\] {
|
||||
padding-inline: 0.3rem;
|
||||
}
|
||||
.py-1 {
|
||||
padding-block: calc(var(--spacing) * 1);
|
||||
}
|
||||
.py-1\.5 {
|
||||
padding-block: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@@ -4508,42 +4439,48 @@
|
||||
}
|
||||
.step {
|
||||
counter-increment: step;
|
||||
}
|
||||
.step:before {
|
||||
margin-right: calc(var(--spacing) * 2);
|
||||
display: inline-flex;
|
||||
height: calc(var(--spacing) * 8);
|
||||
width: calc(var(--spacing) * 8);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: calc(infinity * 1px);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 4px;
|
||||
border-color: var(--color-background);
|
||||
background-color: var(--color-muted);
|
||||
text-align: center;
|
||||
text-indent: -1px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
@media (width >= 48rem) {
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin-right: calc(var(--spacing) * 2);
|
||||
display: inline-flex;
|
||||
height: calc(var(--spacing) * 8);
|
||||
width: calc(var(--spacing) * 8);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: calc(infinity * 1px);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 4px;
|
||||
border-color: var(--color-background);
|
||||
background-color: var(--color-muted);
|
||||
text-align: center;
|
||||
text-indent: -1px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
--tw-font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 9);
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
margin-top: -4px;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
margin-left: -50px;
|
||||
}
|
||||
content: counter(step);
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
height: calc(var(--spacing) * 9);
|
||||
> h3 {
|
||||
display: flex;
|
||||
min-height: calc(var(--spacing) * 8);
|
||||
align-items: center;
|
||||
@media (width < 48rem) {
|
||||
margin-left: calc(var(--spacing) * 10);
|
||||
}
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
width: calc(var(--spacing) * 9);
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
margin-top: -4px;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
margin-left: -50px;
|
||||
}
|
||||
content: counter(step);
|
||||
}
|
||||
}
|
||||
:root {
|
||||
@@ -4938,26 +4875,6 @@ code.hljs {
|
||||
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;
|
||||
@@ -5172,11 +5089,6 @@ code.hljs {
|
||||
--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;
|
||||
|
||||
@@ -57,7 +57,7 @@ toc:
|
||||
|
||||
<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-npm-tailwind"><a href="#install-npm-tailwind">Add Tailwind CSS</a></h4>
|
||||
<h3 class="mb-4 scroll-m-20 font-semibold tracking-tight" id="install-npm-tailwind"><a href="#install-npm-tailwind">Add Tailwind CSS</a></h3>
|
||||
<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>
|
||||
@@ -92,7 +92,32 @@ toc:
|
||||
<li class="step mt-8">
|
||||
<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>
|
||||
<p>Some components <a href="#install-js">need some JavaScript/a> (e.g. the <a href="/components/tabs">Tabs</a> component). There are two ways to get it into your project:</p>
|
||||
|
||||
<h4 class="mt-6 font-semibold">Using a build tool (Vite, Webpack…)</h4>
|
||||
<p>If your project is ESM-aware you can directly import the scripts. To include all components:</p>
|
||||
</div>
|
||||
{% set code %}{% raw %}import 'basecoat-css/all';{% endraw %}{% endset %}
|
||||
{{ code_block(code, "js") }}
|
||||
<div class="prose">
|
||||
<p>Or cherry-pick specific components, for example:</p>
|
||||
</div>
|
||||
{% set code %}{% raw %}import 'basecoat-css/popover';
|
||||
import 'basecoat-css/tabs';{% endraw %}{% endset %}
|
||||
{{ code_block(code, "js") }}
|
||||
<div class="prose">
|
||||
<h4 class="mt-6 font-semibold">Without a build tool</h4>
|
||||
<p>Copy the pre-built files from <code>node_modules</code> into your public directory (one-off command):</p>
|
||||
</div>
|
||||
{% set code %}npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat{% endset %}
|
||||
{{ code_block(code, "bash") }}
|
||||
<div class="prose">
|
||||
<p>Then reference the script you need:</p>
|
||||
</div>
|
||||
{% set code %}<script src="/js/basecoat/tabs.min.js" defer></script>{% endset %}
|
||||
{{ code_block(code, "html") }}
|
||||
<div class="prose">
|
||||
<p>See each component page for the minimal script required.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="step mt-8">
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat",
|
||||
"version": "0.2.0-beta.1",
|
||||
"version": "0.2.0",
|
||||
"description": "shadcn/ui for the rest of us",
|
||||
"author": "hunvreus",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat-cli",
|
||||
"version": "0.2.0-beta.1",
|
||||
"version": "0.2.0",
|
||||
"description": "Add Basecoat components to your project",
|
||||
"author": "hunvreus",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "basecoat-css",
|
||||
"version": "0.2.0-beta.1",
|
||||
"version": "0.2.0",
|
||||
"description": "Tailwind CSS for Basecoat components",
|
||||
"author": {
|
||||
"name": "hunvreus",
|
||||
@@ -36,5 +36,24 @@
|
||||
"bugs": {
|
||||
"url": "https://github.com/hunvreus/basecoat/issues"
|
||||
},
|
||||
"homepage": "https://basecoatui.com/installation#install-css"
|
||||
"homepage": "https://basecoatui.com/installation#install-npm",
|
||||
"exports": {
|
||||
".": "./dist/basecoat.css",
|
||||
"./css": "./dist/basecoat.css",
|
||||
"./all": "./dist/js/all.js",
|
||||
"./all.min": "./dist/js/all.min.js",
|
||||
"./dropdown-menu": "./dist/js/dropdown-menu.js",
|
||||
"./dropdown-menu.min": "./dist/js/dropdown-menu.min.js",
|
||||
"./popover": "./dist/js/popover.js",
|
||||
"./popover.min": "./dist/js/popover.min.js",
|
||||
"./select": "./dist/js/select.js",
|
||||
"./select.min": "./dist/js/select.min.js",
|
||||
"./sidebar": "./dist/js/sidebar.js",
|
||||
"./sidebar.min": "./dist/js/sidebar.min.js",
|
||||
"./tabs": "./dist/js/tabs.js",
|
||||
"./tabs.min": "./dist/js/tabs.min.js",
|
||||
"./toast": "./dist/js/toast.js",
|
||||
"./toast.min": "./dist/js/toast.min.js",
|
||||
"./package.json": "./package.json"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user