v2.0

Keepsimple

The lightweight CSS framework that just works. 5KB gzipped, zero JS, no build step.

Download CSS GitHub

Quick Start

Add one <link> in your <head>:

<link rel="stylesheet" href="https://naufalrakha.my.id/keepsimple/style.css">

That's it. No npm install, no build step, no JavaScript.

No dependencies MIT License 6KB minified

Font Setup (optional)

Keepsimple uses Inter as default. Add it for best results:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">

Grid

`.grid` / `.grid-2` / `.grid-3` / `.grid-4`

Auto-fit responsive grid. Adjusts column count based on container width.

<div class="grid-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

.grid-3

`.row` + `.col`

Flexbox-based row with equal-width columns.

<div class="row">
  <div class="col">...</div>
  <div class="col">...</div>
</div>

.col

Fixed Columns

<div class="row">
  <div class="col-6">50%</div>
  <div class="col-6">50%</div>
</div>

.col-6

Class	Width
`.col-1`	8.33%
`.col-2`	16.66%
`.col-3`	25%
`.col-4`	33.33%
`.col-6`	50%
`.col-8`	66.66%
`.col-12`	100%

Components

Card

<div class="card">
  <h3>Title</h3>
  <p>Content here.</p>
</div>

<!-- Flat variant (no shadow, no hover lift) -->
<div class="card card-flat">...</div>

Standard

Hover to see lift effect.

Flat

Add .card-flat.

With Button

Combine with .btn.

Action

Button

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>

<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

Alert

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-error">...</div>

Success! Data saved.

Info: Update available.

Warning: Check your input.

Error: Connection lost.

Badge

<span class="badge badge-primary">New</span>

Primary Secondary Success Danger Warning

Table

<table class="table table-striped table-hover">
  <thead><tr><th>Name</th><th>Value</th></tr></thead>
  <tbody>
    <tr><td>Alpha</td><td>1</td></tr>
  </tbody>
</table>

Class	Description
`.table`	Base table
`.table-striped`	Alternating row colors
`.table-hover`	Highlight on hover
`.table-bordered`	Full border on all cells

Form

<div class="form-group">
  <label class="form-label">Name</label>
  <input type="text" class="input" placeholder="Name">
</div>

<div class="form-group">
  <label class="form-label">Category</label>
  <select class="select">
    <option>Option 1</option>
  </select>
</div>

<div class="form-group">
  <label class="form-label">Message</label>
  <textarea class="textarea" rows="4"></textarea>
</div>

Code

Use <code>inline code</code> for short snippets.

<pre>for block-level code
  with preserved formatting</pre>

Inline: console.log("hello")

const keepsimple = {
  size: "5KB",
  deps: 0,
  philosophy: "just works"
};

Spinner

<div class="spinner"></div>
<div class="spinner spinner-lg"></div>

Skeleton

<div class="skeleton" style="width:60%;height:1.5rem"></div>

Navbar

<nav class="navbar-con">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Utilities

Flex

.flex .flex-col .flex-wrap .flex-1 .items-start .items-center .items-end .justify-start .justify-center .justify-between .justify-end .gap-0 .gap-1 .gap-2 .gap-3 .gap-4

Spacing

Scale: 0 (0) · 1 (0.5rem) · 2 (1rem) · 3 (1.5rem) · 4 (2rem)

.m-0 .m-1 .m-2 .m-3 .m-4 .p-0 .p-1 .p-2 .p-3 .p-4 .mt-1 .mt-2 .mt-3 .mt-4 .mb-1 .mb-2 .mb-3 .mb-4 .ml-1 .ml-2 .mr-1 .mr-2 .pt-1 .pt-2 .pt-3 .pt-4 .pb-1 .pb-2 .pb-3 .pb-4

Text

.text-center .text-right .text-left .text-sm .text-lg .text-xl .text-muted .text-primary .text-success .text-danger .text-bold

Display & Image

.hidden .block .inline-block .w-100 .img-fluid .img-round .img-shadow .img-bordered .list-unstyled .list-inline

Customization

Override CSS variables to match your brand:

:root {
  --primary: #6366f1;     /* indigo */
  --success: #10b981;     /* emerald */
  --radius: 6px;          /* smaller radius */
  --font: 'Poppins', sans-serif;
}

Variable	Default	Purpose
`--bg`	#f8f9fa	Page background
`--text`	#212529	Text color
`--primary`	#007bff	Primary accent
`--secondary`	#6c757d	Secondary accent
`--success`	#28a745	Success state
`--danger`	#dc3545	Danger state
`--warning`	#ffc107	Warning state
`--info`	#17a2b8	Info state
`--border`	#dee2e6	Border color
`--radius`	12px	Border radius
`--shadow`	0 4px 6px -1px rgba(0,0,0,0.1)	Box shadow
`--font`	Inter, system-ui, sans-serif	Base font

Dark Mode

Add class .dark-mode to <body>:

<body class="dark-mode">  <!-- toggle with JS -->
  ...
</body>

Dark mode also activates automatically via prefers-color-scheme: dark unless you add class="light" to override.

Font Classes

Class	Font
`.font-mono`	JetBrains Mono / monospace
`.font-serif`	Georgia / serif
`.font-gothic`	Franklin Gothic Medium