ciamik

v1.1.0

Published

8 days ago

Ciamik — Custom Bootstrap Derivative. Elegant, themeable CSS framework built on Bootstrap 5.3.

0High
0Medium
0Low

pinoruswana

css framework bootstrap ui design-system ciamik

Ciamik

Modern Bootstrap Derivative — Elegant, modern, and themeable CSS framework built on Bootstrap 5.3.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik.min.css">

Install

npm install ciamik

Themes

Ciamik comes with 7 built-in themes. Each theme has unique colors, border-radius, shadows, and spacing.

| Theme | Primary | Radius | File | |-------|---------|--------|------| | Default | #1D4ED8 | 0.25rem | ciamik.min.css | | Strawberry | #e11d48 | 0.70rem | ciamik-strawberry.min.css | | Alpukat | #65a30d | 0.40rem | ciamik-alpukat.min.css | | Orange | #ea580c | 0.25rem | ciamik-orange.min.css | | Cocoa | #92400e | 0.50rem | ciamik-cocoa.min.css | | Auto | #6366f1 | 0.50rem | ciamik-auto.min.css | | Pino | #1D4ED8 | 0.50rem | ciamik-pino.min.css |

CDN (jsDelivr)

<!-- Default -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik.min.css">

<!-- Strawberry -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-strawberry.min.css">

<!-- Alpukat -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-alpukat.min.css">

<!-- Orange -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-orange.min.css">

<!-- Cocoa -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-cocoa.min.css">

<!-- Auto -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-auto.min.css">

<!-- Pino -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ciamik-pino.min.css">

Quick Start

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App</title>
  <link rel="stylesheet" href="node_modules/ciamik/dist/css/ciamik.min.css">
</head>
<body>
  <div class="container py-5">
    <h1>Hello, Ciamik!</h1>
    <button class="btn btn-primary">Click Me</button>
    <div class="card mt-4">
      <div class="card-body">A modern card component.</div>
    </div>
  </div>
  <script src="node_modules/ciamik/dist/js/ciamik.bundle.js"></script>
</body>
</html>

JavaScript

<script src="node_modules/ciamik/dist/js/ciamik.bundle.js"></script>

All Bootstrap 5.3 components included — Modals, Offcanvas, Tooltips, Popovers, Dropdowns, Tabs, Accordion, Carousel, Toasts, etc.

Custom Themes

Create your own theme by adding two files to src/scss/themes/.

_mytheme-variables.scss — color overrides:

$primary:         #7c3aed;
$secondary:       #a78bfa;
$primary-bg-subtle:     #ede9fe;
$primary-text-emphasis:  #5b21b6;
$link-hover-color:      #5b21b6;

_mytheme-config.scss — design token overrides (full list):

$enable-shadows:            true;
$enable-gradients:          true;

$border-radius:             .5rem;
$border-radius-sm:          .35rem;
$border-radius-lg:          .75rem;
$border-radius-xl:          1rem;
$border-radius-2xl:         1.25rem;
$border-radius-pill:        50rem;

$box-shadow:                0 3px 12px rgba(124, 58, 237, .07), 0 1px 3px rgba(0,0,0,.04);
$box-shadow-sm:             0 1px 5px rgba(124, 58, 237, .05);
$box-shadow-lg:             0 8px 30px rgba(124, 58, 237, .09), 0 2px 8px rgba(0,0,0,.04);
$box-shadow-xl:             0 16px 50px rgba(124, 58, 237, .11), 0 4px 14px rgba(0,0,0,.06);
$box-shadow-inset:          inset 0 2px 5px rgba(0,0,0,.05);

$btn-padding-y:             .6rem;
$btn-padding-x:             1.6rem;

$input-padding-y:           .6rem;
$input-padding-x:           1rem;

$badge-padding-y:           .35em;
$badge-padding-x:           .7em;

$card-border-color:         rgba(124, 58, 237, .12);

mytheme.scss — entry point:

@import 'mytheme-variables';
@import 'mytheme-config';
@import '../variables';
@import '../../../node_modules/bootstrap/scss/bootstrap';
@import '../bootswatch';

Then add a build script in package.json:

"build:mytheme": "sass src/scss/themes/mytheme.scss dist/css/ciamik-mytheme.css --style=expanded && sass src/scss/themes/mytheme.scss dist/css/ciamik-mytheme.min.css --style=compressed"

Development

# Build all themes
npm run build

# Watch mode (default theme only)
npm run dev

# Build a specific theme
npm run build:strawberry
npm run build:alpukat
npm run build:orange
npm run build:cocoa
npm run build:auto
npm run build:pino

What's Included

ciamik/
├── dist/
│   ├── css/
│   │   ├── ciamik.css              (Default, expanded)
│   │   ├── ciamik.min.css           (Default, minified)
│   │   ├── ciamik-strawberry.min.css
│   │   ├── ciamik-alpukat.min.css
│   │   ├── ciamik-orange.min.css
│   │   ├── ciamik-cocoa.min.css
│   │   ├── ciamik-auto.min.css
│   │   └── ciamik-pino.min.css
│   └── js/
│       └── ciamik.bundle.js         (Bootstrap JS bundle)
├── src/
│   └── scss/
│       ├── _variables.scss           (All configurable variables)
│       ├── _bootswatch.scss          (Custom component styles)
│       ├── ciamik.scss              (Entry point)
│       └── themes/                   (Theme system)
├── tools/
│   └── generate-palette.js           (Theme color generator)
└── demo/
    └── index.html                    (Interactive component demo)

Browser Support

All browsers supported by Bootstrap 5.3 — Chrome, Firefox, Safari, Edge.

License

MIT