SenangStart CSS

English

Bahasa Melayu

English

Bahasa Melayu

Appearance

Getting Started ​

Get up and running with SenangStart CSS in minutes.

CDN (Zero Build) Recommended for prototyping ​

The fastest way to try SenangStart — no build step required:

html
<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <!-- Just add this single script -->
  <script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>
</head>
<body>
  <div
    layout="flex col center"
    space="p:big"
    visual="bg:primary text:white rounded:big"
  >
    <h1 visual="text-size:giant font:bold">Hello SenangStart!</h1>
    <p space="m-t:small">Zero config, instant styling.</p>
  </div>
</body>
</html>

How CDN JIT Works ​

  1. Scans DOM — Finds all layout, space, and visual attributes
  2. Generates CSS — Compiles styles on-the-fly in the browser
  3. Injects Styles — Creates <style> tags with compiled CSS
  4. Watches Changes — Uses MutationObserver for dynamic updates

Custom CDN Config ​

html
<script type="senangstart/config">
{
  "theme": {
    "colors": {
      "brand": "#8B5CF6",
      "accent": "#EC4899"
    }
  }
}
</script>
<script src="https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js"></script>

WARNING

CDN JIT is perfect for prototyping and learning. For production, use the CLI build for better performance.

CLI (Production) Recommended for production ​

Installation ​

bash
# Install globally
npm install -g @bookklik/senangstart-css

# Or use npx
npx @bookklik/senangstart-css init

Initialize Config ​

bash
senangstart init

This creates senangstart.config.js in your project root.

Add to HTML ​

html
<head>
  <link rel="stylesheet" href="./public/senangstart.css">
</head>

Start Development ​

bash
senangstart dev

This watches your files and rebuilds on changes.

Build for Production ​

bash
senangstart build --minify

Your First Component ​

Let's create a simple 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">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>

What's happening:

  • layout="flex col" — Flexbox, vertical direction
  • space="w:[320px] p:medium" — 320px width, medium padding
  • visual="bg:white rounded:big shadow:medium" — White background, rounded corners, shadow

Next Steps ​