kaltecss

v1.0.4

Published

12 days ago

Reusable Custom css Library

0High
0Medium
0Low

hollyfirst

css index

WHAT IS KALTE ?

KALTE is meant to be the ultimate css library for all kind of possible css for both animate and non animate ui.

HOW TO USE KALTE?

kalteCSS

A modern CSS library packed with ready-to-use UI components and visual effects — buttons, inputs, cards, animations, typography, utilities and more. Just plug it in and build.

Installation

npm install kaltecss

Or via CDN:

<link rel="stylesheet" href="https://unpkg.com/kaltecss/dist/kaltecss.min.css">

Usage

Import in your CSS or JS entry file:

import 'kaltecss/dist/kaltecss.min.css';

Or in your HTML:

<head>
  <link rel="stylesheet" href="node_modules/kaltecss/dist/kaltecss.min.css">
</head>

What's inside

Buttons

Every button style you'll ever need — solid, outlined, ghost, pill, icon, loading state and more.

<button class="kal-btn kal-btn-primary">Primary</button>
<button class="kal-btn kal-btn-outline">Outlined</button>
<button class="kal-btn kal-btn-ghost">Ghost</button>
<button class="kal-btn kal-btn-pill">Pill</button>

Inputs

All input text designs — default, filled, underline, floating label, with icons, with addons, error/success states and more.

<input class="kal-input" placeholder="Default input">
<input class="kal-input kal-input-filled" placeholder="Filled">
<input class="kal-input kal-input-underline" placeholder="Underline">
<input class="kal-input kal-input-pill" placeholder="Pill">
<input class="kal-input kal-input-error" placeholder="Error state">
<input class="kal-input kal-input-success" placeholder="Success state">

Cards

Clean card components for any content — simple, elevated, bordered, horizontal, and interactive.

<div class="kal-card">
  <h3>Card title</h3>
  <p>Card content goes here.</p>
</div>

Typography

Headings, paragraphs, badges, labels, highlights and text utilities with consistent spacing.

<h1 class="kal-heading">Main heading</h1>
<p class="kal-text-muted">Muted paragraph</p>
<span class="kal-badge kal-badge-success">Active</span>

Colors

A full color palette — primary, neutrals, and semantic colors (success, warning, danger, info) exposed as CSS variables.

color: var(--kal-primary);
background: var(--kal-success-light);
border-color: var(--kal-danger);

Utilities

Spacing, display, flexbox, grid, border-radius, opacity and visibility helpers.

<div class="kal-flex kal-gap-2 kal-mt-4">...</div>

Effects & animations

Ready-to-use CSS effects — hover lifts, fade in, slide in, pulse, shimmer loading skeleton, ripple and more.

<div class="kal-hover-lift">Lifts on hover</div>
<div class="kal-fade-in">Fades in on load</div>
<div class="kal-skeleton">Loading skeleton</div>
<div class="kal-pulse">Pulsing element</div>

Customization

kalteCSS is built on CSS variables so you can theme it to match your brand in seconds:

:root {
  --kal-primary: #6c47ff;
  --kal-radius: 10px;
  --kal-font: 'Inter', sans-serif;
}

Versioning

kalteCSS follows Semantic Versioning:

Patch x.x.1 — bug fixes
Minor x.1.x — new components or effects, fully backwards compatible
Major 1.x.x — breaking changes

To always get the latest minor/patch updates automatically:

"dependencies": {
  "kaltecss": "^1.0.0"
}

License

MIT — free to use in personal and commercial projects.

Made with care by [your name or handle].