@bomberstudios/css-library 1.1.0 → 1.1.2

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,12 +1,12 @@
 :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;
@@ -21,9 +21,9 @@
 
   /* 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-medium: 0 2px calc(var(--gap) / 2) rgba(0, 0, 0, 0.3);
+  --shadow-large: 0 5px var(--gap) rgba(0, 0, 0, 0.3);
+  --shadow-center: 0 0 var(--gap) rgba(0, 0, 0, 0.3);
 }
 
 /* Reset */
@@ -36,6 +36,7 @@
   outline: none;
   border: none;
   text-decoration: none;
+  height: max-content;
 }
 
 html,
@@ -46,6 +47,8 @@ body {
 body {
   font-family: var(--font-family);
   font-size: var(--font-size);
+  display: flex;
+  flex-direction: column;
 }
 
 /* Layout */
@@ -63,26 +66,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 +90,9 @@ zstack {
   justify-items: center;
 }
 zstack > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   grid-area: 1/1/1/1;
 }
 
@@ -107,6 +110,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 +131,26 @@ 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: dotted underline;
+  text-decoration-skip-ink: true;
+  text-underline-offset: 3px;
+  transition: all 0.2s;
+  &:hover {
+    text-decoration: wavy underline;
+    text-underline-offset: 5px;
+    text-decoration-thickness: 1px;
+  }
+}
+p {
+  margin: 0 0 1em 0;
+}
 
 /* UI Elements */
 button,
@@ -127,9 +159,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 +174,40 @@ button,
   }
 }
 
+card {
+  background-color: white;
+  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,29 @@
     <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>
+    </vstack>
+
     <h2>Stacks</h2>
 
     <h3>Vertical Stack</h3>
@@ -43,6 +65,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 +88,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 +112,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,20 +125,30 @@
       <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>
+    <p>Great if you need to stack a bunch of elements on top of each other</p>
     <zstack>
-      <div>Item 1</div>
-      <div>Item 2</div>
-      <div>Item 3</div>
+      <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>
 
     <h3>Nested Stacks</h3>
@@ -118,7 +159,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 +174,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.2",
   "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"