@bookklik/senangstart-css 0.1.1 → 0.1.3

package/docs/examples/cards.md

@@ -0,0 +1,116 @@
+# Card Examples
+
+Beautiful card components built with SenangStart CSS.
+
+## Basic Card
+
+```html
+<div
+  layout="flex col"
+  space="w:[320px] p:medium"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <h3 visual="font:bold text-size:big text:dark">Card Title</h3>
+  <p space="m-t:small" visual="text:grey">
+    Card description goes here with some helpful text.
+  </p>
+</div>
+```
+
+## Profile Card
+
+```html
+<div
+  layout="flex col"
+  space="w:[320px] p:medium"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <div layout="flex between" space="m-b:big">
+    <span visual="font:bold text-size:big text:dark">Profile</span>
+    <span visual="text:primary">Edit</span>
+  </div>
+  <div layout="flex col" space="g:small">
+    <label visual="text:grey text-size:small">Username</label>
+    <div visual="text:dark">@senang_dev</div>
+  </div>
+  <div layout="flex col" space="g:small m-t:medium">
+    <label visual="text:grey text-size:small">Email</label>
+    <div visual="text:dark">hello@senangstart.dev</div>
+  </div>
+  <button 
+    space="m-t:big p-y:small"
+    visual="bg:primary text:white rounded:medium font:medium hover:bg:[#2563EB]"
+  >
+    View Full Profile
+  </button>
+</div>
+```
+
+## Pricing Card
+
+```html
+<div
+  layout="flex col"
+  space="w:[300px] p:big"
+  visual="bg:white rounded:big shadow:medium text:center"
+>
+  <h3 visual="font:bold text-size:big text:dark">Pro Plan</h3>
+  <div space="m-t:small m-b:medium">
+    <span visual="text-size:vast font:bold text:dark">$29</span>
+    <span visual="text:grey">/month</span>
+  </div>
+  <div layout="flex col" space="g:small" visual="text:grey text:left">
+    <div>✓ Unlimited projects</div>
+    <div>✓ Priority support</div>
+    <div>✓ Advanced analytics</div>
+    <div>✓ Custom domains</div>
+  </div>
+  <button 
+    space="m-t:big p:small"
+    visual="bg:primary text:white rounded:medium font:bold"
+  >
+    Get Started
+  </button>
+</div>
+```
+
+## Feature Card
+
+```html
+<div
+  layout="flex col"
+  space="p:big"
+  visual="bg:white rounded:big shadow:small hover:shadow:big"
+>
+  <div space="m-b:medium" visual="text-size:giant">🚀</div>
+  <h3 space="m-b:small" visual="font:bold text-size:big text:dark">
+    Fast Performance
+  </h3>
+  <p visual="text:grey">
+    Lightning fast builds with optimized output. 
+    Your users will love the speed.
+  </p>
+</div>
+```
+
+## Horizontal Card
+
+```html
+<div
+  layout="flex row"
+  space="p:medium g:medium"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <div 
+    space="w:[80px] h:[80px]"
+    visual="bg:primary rounded:medium"
+  ></div>
+  <div layout="flex col" space="g:tiny">
+    <h3 visual="font:bold text:dark">Article Title</h3>
+    <p visual="text:grey text-size:small">
+      A brief description of the article content.
+    </p>
+    <span visual="text:primary text-size:small">Read more →</span>
+  </div>
+</div>
+```

package/docs/examples/forms.md

@@ -0,0 +1,207 @@
+# Form Examples
+
+Form components and layouts built with SenangStart CSS.
+
+## Basic Input
+
+```html
+<div layout="flex col" space="g:small">
+  <label visual="text:dark font:medium text-size:small">Email</label>
+  <input
+    type="email"
+    space="p:small w:[100%]"
+    visual="border:grey border-w:[1px] rounded:small focus:border:primary"
+    placeholder="you@example.com"
+  />
+</div>
+```
+
+## Input with Icon
+
+```html
+<div layout="flex col" space="g:small">
+  <label visual="text:dark font:medium">Search</label>
+  <div layout="flex relative">
+    <span 
+      layout="absolute" 
+      space="p-l:small" 
+      style="top: 50%; transform: translateY(-50%);"
+      visual="text:grey"
+    >
+      🔍
+    </span>
+    <input
+      type="text"
+      space="p:small p-l:big w:[100%]"
+      visual="border:grey border-w:[1px] rounded:small"
+      placeholder="Search..."
+    />
+  </div>
+</div>
+```
+
+## Button Styles
+
+```html
+<div layout="flex wrap" space="g:small">
+  <!-- Primary -->
+  <button
+    space="p-x:medium p-y:small"
+    visual="bg:primary text:white rounded:medium hover:bg:[#2563EB]"
+  >
+    Primary
+  </button>
+  
+  <!-- Secondary -->
+  <button
+    space="p-x:medium p-y:small"
+    visual="bg:white text:dark rounded:medium border:grey border-w:[1px] hover:bg:light"
+  >
+    Secondary
+  </button>
+  
+  <!-- Danger -->
+  <button
+    space="p-x:medium p-y:small"
+    visual="bg:danger text:white rounded:medium hover:bg:[#DC2626]"
+  >
+    Danger
+  </button>
+  
+  <!-- Ghost -->
+  <button
+    space="p-x:medium p-y:small"
+    visual="bg:[transparent] text:primary hover:bg:light rounded:medium"
+  >
+    Ghost
+  </button>
+</div>
+```
+
+## Login Form
+
+```html
+<div
+  layout="flex col"
+  space="w:[400px] p:big"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <h2 space="m-b:big" visual="font:bold text-size:big text:dark text:center">
+    Welcome Back
+  </h2>
+  
+  <div layout="flex col" space="g:small m-b:medium">
+    <label visual="text:dark font:medium text-size:small">Email</label>
+    <input
+      type="email"
+      space="p:small"
+      visual="border:grey border-w:[1px] rounded:small focus:border:primary"
+      placeholder="you@example.com"
+    />
+  </div>
+  
+  <div layout="flex col" space="g:small m-b:medium">
+    <label visual="text:dark font:medium text-size:small">Password</label>
+    <input
+      type="password"
+      space="p:small"
+      visual="border:grey border-w:[1px] rounded:small focus:border:primary"
+      placeholder="••••••••"
+    />
+  </div>
+  
+  <div layout="flex between" space="m-b:medium">
+    <label layout="flex center" space="g:tiny">
+      <input type="checkbox" />
+      <span visual="text:grey text-size:small">Remember me</span>
+    </label>
+    <a visual="text:primary text-size:small">Forgot password?</a>
+  </div>
+  
+  <button
+    space="p:small"
+    visual="bg:primary text:white rounded:medium font:medium hover:bg:[#2563EB]"
+  >
+    Sign In
+  </button>
+  
+  <p space="m-t:medium" visual="text:grey text:center text-size:small">
+    Don't have an account? <a visual="text:primary">Sign up</a>
+  </p>
+</div>
+```
+
+## Contact Form
+
+```html
+<div
+  layout="flex col"
+  space="max-w:[600px] p:big"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <h2 space="m-b:big" visual="font:bold text-size:big text:dark">
+    Get in Touch
+  </h2>
+  
+  <div layout="flex" space="g:medium m-b:medium">
+    <div layout="flex col" space="g:small w:[50%]">
+      <label visual="text:dark font:medium text-size:small">First Name</label>
+      <input
+        type="text"
+        space="p:small"
+        visual="border:grey border-w:[1px] rounded:small"
+      />
+    </div>
+    <div layout="flex col" space="g:small w:[50%]">
+      <label visual="text:dark font:medium text-size:small">Last Name</label>
+      <input
+        type="text"
+        space="p:small"
+        visual="border:grey border-w:[1px] rounded:small"
+      />
+    </div>
+  </div>
+  
+  <div layout="flex col" space="g:small m-b:medium">
+    <label visual="text:dark font:medium text-size:small">Email</label>
+    <input
+      type="email"
+      space="p:small"
+      visual="border:grey border-w:[1px] rounded:small"
+    />
+  </div>
+  
+  <div layout="flex col" space="g:small m-b:medium">
+    <label visual="text:dark font:medium text-size:small">Message</label>
+    <textarea
+      space="p:small"
+      visual="border:grey border-w:[1px] rounded:small"
+      rows="4"
+    ></textarea>
+  </div>
+  
+  <button
+    space="p:small"
+    visual="bg:primary text:white rounded:medium font:medium"
+  >
+    Send Message
+  </button>
+</div>
+```
+
+## Select Dropdown
+
+```html
+<div layout="flex col" space="g:small">
+  <label visual="text:dark font:medium text-size:small">Country</label>
+  <select
+    space="p:small"
+    visual="border:grey border-w:[1px] rounded:small bg:white"
+  >
+    <option>Select a country</option>
+    <option>United States</option>
+    <option>United Kingdom</option>
+    <option>Canada</option>
+  </select>
+</div>
+```

package/docs/examples/hero.md

@@ -0,0 +1,150 @@
+# Hero Section Examples
+
+Landing page hero sections built with SenangStart CSS.
+
+## Simple Hero
+
+```html
+<section
+  layout="flex col center"
+  space="p:giant min-h:[80vh]"
+  visual="bg:dark text:white"
+>
+  <h1 visual="text-size:vast font:bold text:center">
+    Welcome
+  </h1>
+  <p space="m-t:medium max-w:[600px]" visual="text:light text:center text-size:big">
+    Build beautiful interfaces with natural language.
+  </p>
+  <button
+    space="m-t:big p-x:big p-y:small"
+    visual="bg:primary text:white rounded:medium hover:bg:[#2563EB]"
+  >
+    Get Started
+  </button>
+</section>
+```
+
+## Hero with Two Buttons
+
+```html
+<section
+  layout="flex col center"
+  space="p:giant min-h:[100vh]"
+  visual="bg:dark text:white"
+>
+  <h1 space="m-b:small" visual="text-size:vast font:bold text:center">
+    The Intent-First CSS Engine
+  </h1>
+  <p space="max-w:[600px] m-b:big" visual="text:light text-size:big text:center">
+    Speak Human. Compile to Logic.<br>
+    Stop memorizing scales. Start describing intent.
+  </p>
+  <div layout="flex" space="g:medium">
+    <button 
+      space="p-x:big p-y:small"
+      visual="bg:primary text:white rounded:medium font:bold hover:bg:[#2563EB]"
+    >
+      Get Started
+    </button>
+    <button 
+      space="p-x:big p-y:small"
+      visual="bg:[transparent] text:white rounded:medium border:white border-w:[2px] hover:bg:[rgba(255,255,255,0.1)]"
+    >
+      Learn More
+    </button>
+  </div>
+</section>
+```
+
+## Hero with Image
+
+```html
+<section
+  layout="flex col lap:row center"
+  space="p:big lap:p:giant"
+  visual="bg:light"
+>
+  <div layout="flex col" space="w:[100%] lap:w:[50%] p:medium">
+    <h1 visual="text-size:giant font:bold text:dark">
+      Build Faster, Ship Sooner
+    </h1>
+    <p space="m-t:medium" visual="text:grey text-size:big">
+      SenangStart CSS lets you write styling that reads like prose.
+    </p>
+    <div layout="flex" space="g:small m-t:big">
+      <button 
+        space="p-x:big p-y:small"
+        visual="bg:primary text:white rounded:medium"
+      >
+        Start Free
+      </button>
+      <button 
+        space="p-x:big p-y:small"
+        visual="bg:white text:dark rounded:medium shadow:small"
+      >
+        View Demo
+      </button>
+    </div>
+  </div>
+  <div space="w:[100%] lap:w:[50%] p:medium">
+    <div 
+      space="w:[100%] h:[400px]"
+      visual="bg:primary rounded:big"
+    >
+      <!-- Image placeholder -->
+    </div>
+  </div>
+</section>
+```
+
+## Gradient Hero
+
+```html
+<section
+  layout="flex col center"
+  space="p:giant min-h:[100vh]"
+  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
+>
+  <h1 visual="text-size:vast font:bold text:white text:center">
+    Beautiful Gradients
+  </h1>
+  <p space="m-t:medium max-w:[500px]" visual="text:white text:center opacity:[0.9]">
+    Combine SenangStart with inline styles for custom effects.
+  </p>
+  <button
+    space="m-t:big p-x:big p-y:small"
+    visual="bg:white text:dark rounded:round font:bold hover:shadow:big"
+  >
+    Explore Now
+  </button>
+</section>
+```
+
+## Responsive Hero
+
+```html
+<section
+  layout="flex col center"
+  space="p:medium tab:p:big lap:p:giant min-h:[80vh]"
+  visual="bg:dark text:white"
+>
+  <h1 
+    visual="text-size:big tab:text-size:giant lap:text-size:vast font:bold text:center"
+  >
+    Responsive Hero
+  </h1>
+  <p 
+    space="m-t:small tab:m-t:medium max-w:[600px]" 
+    visual="text:light text:center text-size:medium tab:text-size:big"
+  >
+    This hero adapts to all screen sizes.
+  </p>
+  <button
+    space="m-t:medium tab:m-t:big p-x:medium tab:p-x:big p-y:small"
+    visual="bg:primary text:white rounded:medium"
+  >
+    Get Started
+  </button>
+</section>
+```

package/docs/examples/index.md

@@ -0,0 +1,87 @@
+# Examples
+
+Ready-to-use component examples built with SenangStart CSS.
+
+## Quick Links
+
+- [Cards](/examples/cards) — Profile cards, pricing cards, feature cards
+- [Navigation](/examples/navigation) — Navbars, sidebars, menus
+- [Hero Sections](/examples/hero) — Landing page heroes
+- [Forms](/examples/forms) — Inputs, buttons, form layouts
+
+## Getting Started
+
+All examples use the SenangStart CDN for zero-config usage:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
+</head>
+<body>
+  <!-- Paste any example here -->
+</body>
+</html>
+```
+
+## Simple Card
+
+```html
+<div
+  layout="flex col"
+  space="w:[320px] p:medium"
+  visual="bg:white rounded:big shadow:medium"
+>
+  <h3 visual="font:bold text-size:big text:dark">Card Title</h3>
+  <p space="m-t:small" visual="text:grey">
+    Card description goes here.
+  </p>
+  <button
+    space="m-t:medium p-y:small"
+    visual="bg:primary text:white rounded:medium"
+  >
+    Action
+  </button>
+</div>
+```
+
+## Basic Navigation
+
+```html
+<nav
+  layout="flex between center"
+  space="p-x:big p-y:small"
+  visual="bg:white shadow:small"
+>
+  <div visual="font:bold text-size:big text:primary">Logo</div>
+  <div layout="flex" space="g:medium">
+    <a visual="text:dark hover:text:primary">Home</a>
+    <a visual="text:grey hover:text:primary">About</a>
+    <a visual="text:grey hover:text:primary">Contact</a>
+  </div>
+</nav>
+```
+
+## Hero Section
+
+```html
+<section
+  layout="flex col center"
+  space="p:giant min-h:[80vh]"
+  visual="bg:dark text:white"
+>
+  <h1 visual="text-size:vast font:bold text:center">
+    Welcome
+  </h1>
+  <p space="m-t:medium max-w:[600px]" visual="text:light text:center text-size:big">
+    Build beautiful interfaces with natural language.
+  </p>
+  <button
+    space="m-t:big p-x:big p-y:small"
+    visual="bg:primary text:white rounded:medium hover:bg:[#2563EB]"
+  >
+    Get Started
+  </button>
+</section>
+```

package/docs/examples/navigation.md

@@ -0,0 +1,144 @@
+# Navigation Examples
+
+Navigation patterns built with SenangStart CSS.
+
+## Simple Navbar
+
+```html
+<nav
+  layout="flex between center"
+  space="p-x:big p-y:small"
+  visual="bg:white shadow:small"
+>
+  <div visual="font:bold text-size:big text:primary">Logo</div>
+  <div layout="flex" space="g:medium">
+    <a visual="text:dark hover:text:primary">Home</a>
+    <a visual="text:grey hover:text:primary">About</a>
+    <a visual="text:grey hover:text:primary">Contact</a>
+  </div>
+</nav>
+```
+
+## Fixed Navigation
+
+```html
+<nav
+  layout="flex between center fixed z:top"
+  space="w:[100%] p-x:big p-y:small"
+  visual="bg:white shadow:small"
+>
+  <div visual="font:bold text-size:big text:primary">Logo</div>
+  <div layout="flex" space="g:medium">
+    <a visual="text:dark hover:text:primary font:medium">Home</a>
+    <a visual="text:grey hover:text:primary">Products</a>
+    <a visual="text:grey hover:text:primary">Pricing</a>
+    <a visual="text:grey hover:text:primary">About</a>
+  </div>
+  <button
+    space="p-x:medium p-y:tiny"
+    visual="bg:primary text:white rounded:medium hover:bg:[#2563EB]"
+  >
+    Sign Up
+  </button>
+</nav>
+```
+
+## Responsive Navigation
+
+```html
+<!-- Mobile menu button (hidden on tablet+) -->
+<button layout="block tab:hidden" visual="text:dark">
+  ☰ Menu
+</button>
+
+<!-- Desktop navigation (hidden on mobile) -->
+<nav
+  layout="hidden tab:flex between center"
+  space="p-x:big p-y:small"
+  visual="bg:white"
+>
+  <div visual="font:bold text-size:big">Logo</div>
+  <div layout="flex" space="g:medium">
+    <a visual="text:dark hover:text:primary">Home</a>
+    <a visual="text:grey hover:text:primary">About</a>
+  </div>
+</nav>
+```
+
+## Sidebar Navigation
+
+```html
+<aside
+  layout="flex col"
+  space="w:[250px] h:[100vh] p:medium"
+  visual="bg:dark"
+>
+  <div space="m-b:big" visual="font:bold text-size:big text:white">
+    Dashboard
+  </div>
+  
+  <nav layout="flex col" space="g:tiny">
+    <a 
+      space="p:small"
+      visual="text:white bg:[rgba(255,255,255,0.1)] rounded:small"
+    >
+      🏠 Home
+    </a>
+    <a 
+      space="p:small"
+      visual="text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small"
+    >
+      📊 Analytics
+    </a>
+    <a 
+      space="p:small"
+      visual="text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small"
+    >
+      👥 Users
+    </a>
+    <a 
+      space="p:small"
+      visual="text:light hover:bg:[rgba(255,255,255,0.1)] rounded:small"
+    >
+      ⚙️ Settings
+    </a>
+  </nav>
+</aside>
+```
+
+## Breadcrumb
+
+```html
+<nav layout="flex" space="g:small p:small">
+  <a visual="text:primary hover:text:[#2563EB]">Home</a>
+  <span visual="text:grey">/</span>
+  <a visual="text:primary hover:text:[#2563EB]">Products</a>
+  <span visual="text:grey">/</span>
+  <span visual="text:dark">Current Page</span>
+</nav>
+```
+
+## Tab Navigation
+
+```html
+<div layout="flex" space="g:none" visual="border-b:light">
+  <button 
+    space="p-x:medium p-y:small"
+    visual="text:primary border-b:[2px] border:primary"
+  >
+    Tab 1
+  </button>
+  <button 
+    space="p-x:medium p-y:small"
+    visual="text:grey hover:text:dark"
+  >
+    Tab 2
+  </button>
+  <button 
+    space="p-x:medium p-y:small"
+    visual="text:grey hover:text:dark"
+  >
+    Tab 3
+  </button>
+</div>
+```