@bomberstudios/css-library 1.1.0 → 1.1.3

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "proseWrap": "always"
+}

package/README.md

@@ -1,3 +1,23 @@
 # CSS Library
 
 A bunch of CSS styles that I use in my projects.
+
+## Demo
+
+See the styles in action [here](https://bomberstudios.github.io/css-library/index.html).
+
+## Usage
+
+In case it wasn't sufficiently clear, please do not use this in any of your projects unless you are me 😅.
+
+If you are me:
+
+```bash
+npm install @bomberstudios/css-library
+```
+
+And then include the styles. For example, in an Astro project you can add this to your base Layout:
+
+```jsx
+import '@bomberstudios/css-library/index.css'
+```

package/index.css

@@ -1,18 +1,20 @@
 :root {
   /* Spacing */
-  --gap: 10px;
+  --gap: 12px;
   --radius-small: 3px;
   --radius: 5px;
   --radius-large: 10px;
-  --padding-small: 5px;
-  --padding-medium: 8px;
-  --padding: 10px;
+  --padding-small: calc(var(--gap) / 2);
+  --padding: var(--gap);
+  --padding-large: calc(var(--gap) * 1.5);
 
   /* Color theme */
   color-scheme: light dark;
   accent-color: var(--brand);
   --brand: light-dark(#f60, #f60);
   --subtle: light-dark(#aaa, #666);
+  --fg-color: light-dark(#333, #ddd);
+  --bg-color: light-dark(white, #151515);
 
   /* Typography */
   --font-family: system-ui, sans-serif;
@@ -20,10 +22,11 @@
   --line-height: 1.3;
 
   /* Visual */
-  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
-  --shadow-medium: 0 2px 5px rgba(0, 0, 0, 0.3);
-  --shadow-large: 0 5px 10px rgba(0, 0, 0, 0.3);
-  --shadow-center: 0 0 10px rgba(0, 0, 0, 0.3);
+  --shadow-color: light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.3));
+  --shadow-small: 0 1px 3px var(--shadow-color);
+  --shadow-medium: 0 2px calc(var(--gap) / 2) var(--shadow-color);
+  --shadow-large: 0 5px var(--gap) var(--shadow-color);
+  --shadow-center: 0 0 var(--gap) var(--shadow-color);
 }
 
 /* Reset */
@@ -31,11 +34,11 @@
   margin: 0;
   padding: 0;
   list-style: none;
-  -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
+  height: max-content;
 }
 
 html,
@@ -46,6 +49,10 @@ body {
 body {
   font-family: var(--font-family);
   font-size: var(--font-size);
+  display: flex;
+  flex-direction: column;
+  color: var(--fg-color);
+  background-color: var(--bg-color);
 }
 
 /* Layout */
@@ -63,26 +70,23 @@ vstack {
   flex-direction: column;
 }
 
-hstack[align="center"],
-vstack[align="center"] {
+hstack[align='center'],
+vstack[align='center'] {
   justify-content: center;
 }
-hstack[align="right"],
-vstack[align="right"] {
+hstack[align='right'],
+vstack[align='right'] {
   align-items: end;
   justify-content: flex-end;
 }
-vstack[align="right"] > * {
+vstack[align='right'] > * {
   width: 100%;
 }
-hstack[align="space-between"],
-vstack[align="space-between"] {
+hstack[align='space-between'],
+vstack[align='space-between'] {
   justify-content: space-between;
 }
 /* TODO: top and bottom alignment */
-hstack[align="top"] {
-  align-items: start;
-}
 
 zstack {
   display: grid;
@@ -90,6 +94,9 @@ zstack {
   justify-items: center;
 }
 zstack > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   grid-area: 1/1/1/1;
 }
 
@@ -107,6 +114,20 @@ hstack divider {
   height: 100%;
 }
 
+/* Grid */
+.cols-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.cols-4 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+.cols-6 {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
 /* Typography */
 h1,
 h2,
@@ -114,11 +135,29 @@ h3,
 h4,
 h5,
 h6 {
-  margin: 1em 0;
+  margin: 1em 0 0.5em 0;
 }
 body {
   line-height: var(--line-height);
 }
+a {
+  color: var(--brand);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  text-decoration-skip-ink: true;
+  transition: all 0.2s;
+  &:hover {
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-underline-offset: 5px;
+    text-decoration-thickness: 1px;
+  }
+}
+p {
+  /* margin: 0 0 1em 0; */
+}
 
 /* UI Elements */
 button,
@@ -127,9 +166,13 @@ button,
   background-color: var(--brand);
   color: white;
   cursor: pointer;
-  padding: var(--padding-medium) var(--padding);
+  padding: var(--padding) var(--padding-large);
   border-radius: var(--radius);
   transition: all 0.2s;
+  &.fit {
+    width: fit-content;
+  }
+
   &:hover {
     background-color: lch(from var(--brand) calc(l - 10) c h);
   }
@@ -138,20 +181,40 @@ button,
   }
 }
 
+card {
+  background-color: var(--bg-color);
+  border: 1px solid var(--subtle);
+  border-radius: var(--radius);
+  padding: var(--padding-large);
+  box-shadow: var(--shadow-medium);
+  transition: all 0.2s;
+  &:hover {
+    box-shadow: var(--shadow-large);
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+}
+
 /* Effects */
 .glass {
   background-color: #6666;
   backdrop-filter: blur(20px);
 }
 .shadow {
-  box-shadow: var(--shadow-small)
+  box-shadow: var(--shadow-small);
 }
 .shadow-medium {
-  box-shadow: var(--shadow-medium)
+  box-shadow: var(--shadow-medium);
 }
 .shadow-large {
-  box-shadow: var(--shadow-large)
+  box-shadow: var(--shadow-large);
 }
 .shadow-center {
-  box-shadow: var(--shadow-center)
-}
+  box-shadow: var(--shadow-center);
+}

package/index.html

@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CSS Library Demo</title>
-    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet" href="index.css" />
     <style>
+      :root {
+        --brand: #3e8fe6;
+      }
+
       body {
         width: 50%;
         margin: 0 auto;
@@ -30,10 +33,37 @@
     <h1>CSS Library Demo</h1>
 
     <p>
-      This is a collection of utility classes and components that I use in my projects. It's a work in progress and I'll
-      keep adding more as I go.
+      This is a collection of utility classes and components that I use in my
+      projects. It's a work in progress and I'll keep adding more as I go. Feel
+      free to use it in your projects, and if you have any suggestions or
+      feedback, please
+      <a href="https://github.com/bomberstudios/css-library">let me know</a>!
     </p>
 
+    <h2>Colors</h2>
+    <vstack>
+      <hstack align="left">
+        <span>--brand</span>
+        <div class="chip" style="background-color: var(--brand)"></div>
+      </hstack>
+      <p>
+        This is overridden in this HTML from the default value, which is
+        (unsurprisingly) a nice shadow of orange.
+      </p>
+      <hstack>
+        <span>--subtle</span>
+        <div class="chip" style="background-color: var(--subtle)"></div>
+      </hstack>
+      <hstack>
+        <span>--fg-color</span>
+        <div class="chip" style="background-color: var(--fg-color)"></div>
+      </hstack>
+      <hstack>
+        <span>--bg-color</span>
+        <div class="chip" style="background-color: var(--bg-color)"></div>
+      </hstack>
+    </vstack>
+
     <h2>Stacks</h2>
 
     <h3>Vertical Stack</h3>
@@ -43,6 +73,15 @@
       <div>Item 3</div>
     </vstack>
 
+    <h3>Vertical Stack, with dividers</h3>
+    <vstack>
+      <div>Item 1</div>
+      <divider></divider>
+      <div>Item 2</div>
+      <divider></divider>
+      <div>Item 3</div>
+    </vstack>
+
     <h3>Vertical Stack, align=center</h3>
     <vstack align="center">
       <div>Item 1</div>
@@ -57,19 +96,19 @@
       <div>Item 3</div>
     </vstack>
 
-    <h3>Vertical Stack, with dividers</h3>
-    <vstack>
+    <h3>Horizontal Stack</h3>
+    <hstack>
       <div>Item 1</div>
-      <divider></divider>
       <div>Item 2</div>
-      <divider></divider>
       <div>Item 3</div>
-    </vstack>
+    </hstack>
 
-    <h3>Horizontal Stack</h3>
+    <h3>Horizontal Stack, with dividers</h3>
     <hstack>
       <div>Item 1</div>
+      <divider></divider>
       <div>Item 2</div>
+      <divider></divider>
       <div>Item 3</div>
     </hstack>
 
@@ -81,7 +120,7 @@
     </hstack>
 
     <h3>Horizontal Stack, align=right</h3>
-    <hstack align="right">
+    <hstack align=" right">
       <div>Item 1</div>
       <div>Item 2</div>
       <div>Item 3</div>
@@ -94,21 +133,35 @@
       <div>Item 3</div>
     </hstack>
 
-    <h3>Horizontal Stack, with dividers</h3>
-    <hstack>
-      <div>Item 1</div>
-      <divider></divider>
-      <div>Item 2</div>
-      <divider></divider>
-      <div>Item 3</div>
-    </hstack>
-
     <h3>Z Stack</h3>
-    <zstack>
-      <div>Item 1</div>
-      <div>Item 2</div>
-      <div>Item 3</div>
-    </zstack>
+    <vstack>
+      <p>Great if you need to stack a bunch of elements on top of each other</p>
+      <zstack>
+        <div
+          style="width: 150px; height: 150px; background-color: var(--brand)"
+        >
+          1
+        </div>
+        <div
+          style="
+            width: 100px;
+            height: 100px;
+            background-color: lch(from var(--brand) calc(l + 10) c h);
+          "
+        >
+          2
+        </div>
+        <div
+          style="
+            width: 50px;
+            height: 50px;
+            background-color: lch(from var(--brand) calc(l + 20) c h);
+          "
+        >
+          3
+        </div>
+      </zstack>
+    </vstack>
 
     <h3>Nested Stacks</h3>
     <vstack>
@@ -118,7 +171,7 @@
         <div>Item 3</div>
       </hstack>
       <divider></divider>
-      <hstack align="center" style="align-items: start;">
+      <hstack align="center" style="align-items: start">
         <div>Item 4</div>
         <divider></divider>
         <vstack>
@@ -133,45 +186,47 @@
       </hstack>
     </vstack>
 
-    <h2>Colors</h2>
+    <h2>UI Elements</h2>
+    <h3>Button</h3>
     <vstack>
-      <hstack align="left">
-        <p>--brand</p>
-        <div class="chip" style="background-color: var(--brand);"></div>
-      </hstack>
-      <hstack>
-        <p>--subtle</p>
-        <div class="chip" style="background-color: var(--subtle);"></div>
-      </hstack>
+      <span>Default button:</span>
+      <button>Click me</button>
+      <span>With '.fit' class:</span>
+      <button class="fit">Click me</button>
     </vstack>
 
-    <h2>UI Elements</h2>
-    <h3>Button</h3>
-    <button>Click me</button>
+    <h3>Card</h3>
+    <hstack class="cols-2">
+      <card>
+        <h3>Card Title</h3>
+        <p>Card content goes here</p>
+      </card>
+      <card>
+        <h3>Card Title</h3>
+        <p>Card content goes here</p>
+      </card>
+    </hstack>
 
     <h2>Shadows</h2>
     <vstack>
-      <hstack>
-        <p>--shadow-small, .shadow</p>
+      <hstack class="cols-2">
+        <span>--shadow-small, .shadow</span>
         <div class="shadow chip"></div>
       </hstack>
-      <hstack>
-        <p>--shadow-medium, .shadow-medium</p>
+      <hstack class="cols-2">
+        <span>--shadow-medium, .shadow-medium</span>
         <div class="shadow-medium chip"></div>
       </hstack>
-      <hstack>
-        <p>--shadow-large, .shadow-large</p>
+      <hstack class="cols-2">
+        <span>--shadow-large, .shadow-large</span>
         <div class="shadow-large chip"></div>
       </hstack>
-      <hstack>
-        <p>--shadow-center, .shadow-center</p>
+      <hstack class="cols-2">
+        <span>--shadow-center, .shadow-center</span>
         <div class="shadow-center chip"></div>
       </hstack>
     </vstack>
 
-    <footer>
-      Enjoy life!
-    </footer>
+    <footer>Enjoy life!</footer>
   </body>
-
-</html>
+</html>

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@bomberstudios/css-library",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "A bunch of CSS code I reuse between projects",
   "main": "index.css",
   "scripts": {
-    "release": "npm publish --access public"
+    "start": "npx reload -b",
+    "release": "npm version patch && npm publish --access public"
   },
   "author": "Ale Muñoz",
   "license": "MIT"