zenkit-css

v1.4.1

Published

5 days ago

A minimal, modern CSS framework for peaceful development

Downloads

1,529

0High
0Medium
0Low

sayedabdul

css framework scss sass responsive utilities components grid flexbox dark-mode

ZenKit CSS

The most intuitive and lightweight CSS framework for building modern, responsive websites. Built with CSS Grid, Flexbox, and CSS Variables - zero JavaScript dependencies.

Why ZenKit?

Minimal - Only what you need, nothing more (~500KB minified)
Modern - CSS Grid, Flexbox, CSS Custom Properties
Accessible - WCAG AA compliant color contrasts
Dark Mode - Built-in light/dark theme support
Mobile First - Responsive from the ground up
48+ Components - Buttons, Cards, Modal, Forms, Tables & more
1000+ Utilities - Spacing, Flex, Grid, Colors, Typography
No JavaScript - Pure CSS, zero dependencies

Quick Start

CDN

<link rel="stylesheet" href="https://unpkg.com/zenkit-css@latest/dist/zenkit.min.css">

npm

npm install zenkit-css

SCSS

@use 'zenkit-css/scss/zenkit';

Starter Template

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/zenkit-css@latest/dist/zenkit.min.css">
  <title>Hello ZenKit!</title>
</head>
<body>
  <div class="container py-5">
    <h1 class="text-4xl font-bold mb-4">Hello, ZenKit!</h1>
    <p class="text-muted mb-4">Start building beautiful interfaces.</p>
    <button class="btn btn-primary">Get Started</button>
  </div>
</body>
</html>

Components

Dark Mode

Toggle with data-theme attribute:

<html data-theme="dark">

Or via JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');

Customization

Override CSS variables:

:root {
  --primary: #your-color;
  --radius: 8px;
  --font-sans: 'Your Font', sans-serif;
}

Or customize with SCSS:

$primary: #your-color;
$border-radius: 8px;

@use 'zenkit-css/scss/zenkit';

Breakpoints

| Breakpoint | Min Width | Class Prefix | |------------|-----------|--------------| | xs | 0 | - | | sm | 576px | sm: | | md | 768px | md: | | lg | 1024px | lg: | | xl | 1280px | xl: | | 2xl | 1536px | 2xl: |

Browser Support

Development

# Install dependencies
npm install

# Build CSS
npm run build

# Watch for changes
npm run watch

# Start dev server
npm run dev

Community

Get updates on ZenKit's development and chat with the community:

Follow @sayedabdulkarim on Twitter
Read and subscribe to The Official ZenKit Blog

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

License

Code released under the MIT License.