Merge pull request #79 from schalkneethling/release-0-1-0

release: cleanup and make everything namespace driven

README.md

@@ -1,17 +1,26 @@
-# minimalist
+# Introduction to Minimalist
 
-A minimal pure CSS starter library for most web projects.
+**Minimalist** is a lightweight and modern CSS library designed to provide a simple yet elegant foundation for styling base HTML elements. It serves as a starting point for building websites and applications, offering thoughtfully crafted styles for the elements developers encounter most frequently.
 
-## Getting minimalist
+For more information on customization and supported features, consult the [official reference documentation](https://minimalist-docs.netlify.app/).
 
-You can easily add minimalist to your existing or new project using the CLI.
+## Key Features
 
-```bash
-npm create minimalist@latest
-```
+- **Minimal and Elegant:** Focuses on essential styles to ensure a clean and consistent visual foundation without unnecessary bloat.
+- **Modern Design:** Leverages modern CSS features for better performance, flexibility, and compatibility with current development standards.
+- **Customizable:** Uses namespaced CSS custom properties, allowing users to easily adjust and extend styles to fit their specific needs. Both namespaced variables and default values are thoroughly documented.
+- **Lightweight:** Designed to maintain minimal complexity, size, and byte footprint, ensuring fast load times and ease of use.
 
-You will be prompted to enter the desctination directory into which the files will be copied.
-Please ensure that this is relative to your project's root folder.
+## What Minimalist Is _Not_
 
-All that is left is to link the CSS in your project. The `main` file you must add is `minimalist.css`.
-You will fnd this in `your-target-dir/minimalist/minimalist.css`.
+While Minimalist includes a small number of utility classes for convenience, it is **not** a general-purpose utility library and will not evolve into one. Its focus remains on providing foundational styles, not an exhaustive set of utilities.
+
+### Contributing to Minimalist
+
+Minimalist is open source and welcomes community contributions. Users are encouraged to:
+
+- Report issues and bugs.
+- Suggest new features or improvements.
+- Contribute to the codebase.
+
+Contributions should align with Minimalist’s guiding principle: to remain minimal in size, complexity, and purpose.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-minimalist",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "A minimal pure CSS starter library for most web projects.",
   "type": "module",
   "exports": "./src/index.js",

src/minimalist/atoms/button.css

@@ -1,16 +1,20 @@
+.button,
+.button-ghost {
+  cursor: pointer;
+}
+
 .button-ghost {
   background: none;
   border: 0;
-  cursor: pointer;
 }
 
 .button {
   /* to ensure a border is visible on Windows high-contrast mode */
-  border: var(--border-transparent);
-  cursor: pointer;
+  border: var(--minimalist-button-border-default, var(--border-transparent));
   display: inline-block;
   max-inline-size: max-content;
-  padding: var(--size-8) var(--size-16);
+  padding-block: var(--minimalist-button-padding-block, var(--size-8));
+  padding-inline: var(--minimalist-button-padding-inline, var(--size-16));
   text-decoration: none;
 
   &:active {
@@ -19,43 +23,67 @@
   }
 
   &.rounded {
-    border-radius: var(--border-radius-default);
+    border-radius: var(
+      --minimalist-button-border-radius-default,
+      var(--border-radius-default)
+    );
   }
 
   &.bordered {
-    border: var(--border-primary-border);
+    border: var(
+      --minimalist-button-primary-border,
+      var(--border-primary-border)
+    );
   }
 
   &.outline {
     background-color: transparent;
-    border: var(--border-primary-border);
+    border: var(
+      --minimalist-button-primary-border,
+      var(--border-primary-border)
+    );
   }
 
   &.solid {
-    background-color: var(--color-neutral-90);
-    border: var(--color-neutral-90);
-    color: var(--color-neutral-inverted);
+    background-color: var(
+      --minimalist-button-bg-color,
+      var(--color-neutral-90)
+    );
+    border-color: var(
+      --minimalist-button-solid-border-color,
+      var(--color-neutral-90)
+    );
+    color: var(
+      --minimalist-button-solid-txt-color,
+      var(--color-neutral-inverted)
+    );
     transition: background-color 0.2s ease-in;
 
     &:focus,
     &:hover {
-      background-color: var(--color-neutral-80);
-      border: var(--color-neutral-80);
+      background-color: var(
+        --minimalist-button-hover-bg-color,
+        var(--color-neutral-80)
+      );
+      border-color: var(
+        --minimalist-button-solid-hover-border-color,
+        var(--color-neutral-80)
+      );
     }
   }
 }
 
 .button-icon {
   align-items: center;
   display: flex;
-  gap: var(--size-8);
+  gap: var(--minimalist-button-icon-gap, var(--size-8));
 
   &.inline-end {
     flex-direction: row-reverse;
   }
 
   svg {
-    block-size: auto;
-    inline-size: 1.5rem;
+    block-size: var(--minimalist-icon-default-size, var(--icon-default-size));
+    inline-size: var(--minimalist-icon-default-size, var(--icon-default-size));
   }
 }

src/minimalist/atoms/forms.css

@@ -1,30 +1,45 @@
 fieldset {
-  margin-block: var(--size-12);
+  margin-block: var(--minimalist-fieldset-margin-block, var(--size-12));
 }
 
 .form-field {
   display: grid;
-  gap: var(--size-12);
-  margin-block-end: var(--size-12);
+  gap: var(--minimalist-form-field-gap, var(--size-12));
+  margin-block-end: var(
+    --minimalist-form-field-margin-block-end,
+    var(--size-12)
+  );
 }
 
 input,
 select:not(.custom-select),
 textarea {
-  border: var(--size-2) solid var(--color-neutral-70);
-  padding: var(--size-6);
+  border: var(--minimalist-input-border, var(--border-primary-border));
+  padding: var(--minimalist-input-padding, var(--size-6));
 }
 
 input:user-valid,
 textarea:user-valid {
-  border-color: var(--color-valid-border);
-  outline-color: var(--color-valid-outline);
+  border-color: var(
+    --minimalist-input-border-valid-color,
+    var(--color-valid-border)
+  );
+  outline-color: var(
+    --minimalist-input-border-valid-outline,
+    var(--color-valid-outline)
+  );
 }
 
 input:user-invalid,
 textarea:user-invalid {
-  border-color: var(--color-error-border);
-  outline-color: var(--color-error-outline);
+  border-color: var(
+    --minimalist-input-border-critical-color,
+    var(--color-critical-border)
+  );
+  outline-color: var(
+    --minimalist-input-border-critical-outline,
+    var(--color-critical-outline)
+  );
 }
 
 input:user-valid,
@@ -38,6 +53,12 @@ textarea:focus:invalid:not(:user-invalid) {
 
 input:focus:invalid:not(:user-invalid),
 textarea:focus:invalid:not(:user-invalid) {
-  border-color: var(--color-warning-border);
-  outline-color: var(--color-warning-outline);
+  border-color: var(
+    --minimalist-input-border-warning-color,
+    var(--color-warning-border)
+  );
+  outline-color: var(
+    --minimalist-input-border-warning-outline,
+    var(--color-warning-outline)
+  );
 }

src/minimalist/atoms/media.css

@@ -1,18 +1,24 @@
 figure {
-  border: var(--figure-border);
+  border: var(--minimalist-figure-border, var(--figure-border));
   display: grid;
   margin: 0;
-  margin-block: var(--size-16);
+  margin-block: var(--minimalist-figure-margin-block, var(--size-16));
   max-width: max-content;
 
   img {
     width: 100%;
   }
 
   figcaption {
-    background-color: var(--figcaption-background-color);
-    color: var(--figcaption-foreground-color);
-    padding: var(--figcaption-spacing);
+    background-color: var(
+      --minimalist-figcaption-background-color,
+      var(--figcaption-background-color)
+    );
+    color: var(
+      --minimalist-figcaption-foreground-color,
+      var(--figcaption-foreground-color)
+    );
+    padding: var(--minimalist-figcaption-spacing, var(--figcaption-spacing));
   }
 }
 
@@ -25,8 +31,14 @@ figure.overlap {
   }
 
   figcaption {
-    background-color: var(--figcaption-overlap-background-color);
-    color: var(--figcaption-overlap-foreground-color);
+    background-color: var(
+      --minimalist-figcaption-overlap-background-color,
+      var(--figcaption-overlap-background-color)
+    );
+    color: var(
+      --minimalist-figcaption-overlap-foreground-color,
+      var(--figcaption-overlap-foreground-color)
+    );
     place-self: end;
   }
 }

src/minimalist/atoms/table.css

@@ -1,36 +1,54 @@
 table {
-  border: var(--table-border);
-  width: var(--table-width);
+  border: var(--minimalist-table-border, var(--table-border));
+  width: var(--minimalist-table-width, var(--table-width));
 }
 
 caption {
-  font: var(--table-caption-font);
-  margin-block-end: var(--table-caption-spacing-block-end);
-  text-align: var(--table-caption-align);
+  font: var(
+    --minimalist-table-caption-font-size,
+    var(--table-caption-font-size)
+  );
+  margin-block-end: var(
+    --minimalist-table-caption-margin-block-end,
+    var(--table-caption-margin-block-end)
+  );
+  text-align: var(--minimalist-table-caption-align, var(--table-caption-align));
 }
 
 thead {
-  background-color: var(--table-thead-background);
-  color: var(--table-thead-foreground);
+  background-color: var(
+    --minimalist-table-thead-bg-color,
+    var(--table-thead-bg-color)
+  );
+  color: var(--minimalist-table-thead-color, var(--table-thead-color));
 
   th {
-    padding: var(--table-cell-spacing);
-    text-align: var(--table-thead-align);
+    padding: var(--minimalist-table-cell-padding, var(--table-cell-padding));
+    text-align: var(--minimalist-table-thead-align, var(--table-thead-align));
   }
 }
 
 tbody {
   td {
-    border-block-end: var(--table-cell-border);
-    padding: var(--table-cell-spacing);
+    border-block-end: var(
+      --minimalist-table-cell-border,
+      var(--table-cell-border)
+    );
+    padding: var(--minimalist-table-cell-padding, var(--table-cell-padding));
   }
 
   tr:nth-child(odd) {
-    background-color: var(--table-tbody-background-odd);
+    background-color: var(
+      --minimalist-table-tbody-bg-odd,
+      var(--table-tbody-bg-odd)
+    );
   }
 
   tr:nth-child(even) {
-    background-color: var(--table-tbody-background-even);
+    background-color: var(
+      --minimalist-table-tbody-bg-even,
+      var(--table-tbody-bg-even)
+    );
   }
 
   tr:last-child td {
@@ -39,11 +57,21 @@ tbody {
 }
 
 tfoot {
-  background-color: var(--table-tfoot-background);
-  color: var(--table-tfoot-foreground);
+  background-color: var(
+    --minimalist-table-tfoot-bg-color,
+    var(--table-tfoot-bg-color)
+  );
+  color: var(--minimalist-table-tfoot-color, var(--table-tfoot-color));
 
   /* stylelint-disable-next-line no-descending-specificity */
   td {
-    padding: var(--table-tfoot-spacing);
+    padding-block: var(
+      --minimalist-table-tfoot-padding-block,
+      var(--table-tfoot-padding-block)
+    );
+    padding-inline: var(
+      --minimalist-table-tfoot-padding-inline,
+      var(--table-tfoot-padding-inline)
+    );
   }
 }