Litura

A minimalist CSS library focused on content

Prose

The prose component automatically styles HTML elements within articles, blogs, and documentation. It provides readable typography while maintaining heading hierarchy.

Heading H1

Heading H2

Heading H3

This is a content-focused library. Bold text, italic, highlighted, deleted, inserted.

Keyboard shortcuts: Ctrl + C to copy.

Minimalism ≠ poverty. It's focusing on what matters.
npm i litura
  • First list item
  • Second list item
HTML 
<article class="prose">
  <h1>Header H1</h1>
  <h2>Header H2</h2>
  <h3>Header H3</h3>
  <p>This is a content-focused library. <strong>Bold text</strong>, <em>italic</em>, 
  <mark>highlighted</mark>, <del>deleted</del>, <ins>inserted</ins>.</p>
  <p>Keyboard shortcuts: <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
  <blockquote>Minimalism ≠ poverty. It's focusing on what matters.</blockquote>
  <pre><code>npm i litura</code></pre>
  <ul>
    <li>First list item</li>
    <li>Second list item</li>
  </ul>
</article>

CSS Classes

.prose
Main prose component class - applies typographic styles to all HTML elements inside

Buttons

Button system with three main variants. Uses CSS custom properties for consistent styling across all color schemes.

HTML 
<button class="btn">Default</button>
<button class="btn btn--ghost">Ghost</button>
<button class="btn btn--soft">Soft</button>
<button class="btn" disabled>Disabled</button>

CSS Classes

.btn
Basic button class - solid background in accent color
.btn--ghost
Ghost variant - transparent background with border
.btn--soft
Soft variant - semi-transparent background (15% opacity)

Dialogs

Modal dialogs with backdrop overlay. CSS-only implementation using details/summary with optional JavaScript enhancement for focus management and ESC key support.

Open dialog

Dialog Title

This is dialog content. You can put any HTML content here.

Dialog has a backdrop that can be clicked to close (with JavaScript enhancement).

HTML 
<details class="dialog">
  <summary class="btn">Open dialog</summary>
  <div class="dialog__backdrop">
    <div class="dialog__content">
      <div class="dialog__header">
        <h3 class="dialog__title">Dialog Title</h3>
        <button class="dialog__close" aria-label="Close dialog">×</button>
      </div>
      <div class="dialog__body">
        <p>This is dialog content.</p>
      </div>
      <div class="dialog__footer">
        <button class="btn btn--ghost">Cancel</button>
        <button class="btn">Confirm</button>
      </div>
    </div>
  </div>
</details>
🔧

JavaScript Enhancement

Optional - dialogs work fully without JavaScript. File js/dialog-alert-enhancement.js adds:

  • Click backdrop to close - close on backdrop click
  • ESC key support - close with Escape key
  • Focus management - automatic focus and focus trap
  • Focus restore - return focus to element that opened dialog

To disable: remove line <script src="./js/dialog-alert-enhancement.js">

CSS Classes

.dialog
Main dialog container (details element)
.dialog__backdrop
Semi-transparent background behind dialog - fullscreen overlay
.dialog__content
Main dialog content container - centered on screen
.dialog__header
Dialog header with title and close button
.dialog__title
Dialog title
.dialog__close
Dialog close button (×)
.dialog__body
Main dialog content
.dialog__footer
Dialog footer with action buttons
.dialog--small
Smaller dialog (max-width: 20rem)
.dialog--large
Larger dialog (max-width: 48rem)
.dialog--fullscreen
Full screen dialog on mobile

Alerts

Notification system with 4 types (info, success, warning, error) and solid variants. Supports positioning in different parts of the screen and auto-dismiss with JavaScript.

Information
This is an example of informational alert.
Operation completed successfully!
Warning (standard)!
Error during operation execution!
Success in solid version!
Small informational alert.
Large error
This is a larger error alert with title.
HTML 
<!-- Informational alert -->
<div class="alert alert--info">
  <div class="alert__icon">
    <svg viewBox="0 0 20 20">...</svg>
  </div>
  <div class="alert__content">
    <div class="alert__title">Information</div>
    <div class="alert__message">This is an example of informational alert.</div>
  </div>
  <button class="alert__close" aria-label="Close">×</button>
</div>

<!-- Success alert -->
<div class="alert alert--success">
  <div class="alert__icon">...</div>
  <div class="alert__content">
    <div class="alert__message">Operation completed successfully!</div>
  </div>
</div>

<!-- Warning alert -->
<div class="alert alert--warning">
  <div class="alert__content">
    <div class="alert__message">Warning (standard)!</div>
  </div>
</div>

<!-- Error alert -->
<div class="alert alert--error">
  <div class="alert__content">
    <div class="alert__message">Error during operation execution!</div>
  </div>
</div>

<!-- Alert solid -->
<div class="alert alert--success-solid">
  <div class="alert__content">
    <div class="alert__message">Success in solid version!</div>
  </div>
</div>

<!-- Small alert -->
<div class="alert alert--small alert--info">
  <div class="alert__content">
    <div class="alert__message">Small informational alert.</div>
  </div>
</div>

<!-- Large alert -->
<div class="alert alert--large alert--error">
  <div class="alert__content">
    <div class="alert__title">Large error</div>
    <div class="alert__message">This is a larger error alert with title.</div>
  </div>
</div>
🔧

JavaScript Enhancement

Optional - alerts work fully without JavaScript. File js/dialog-alert-enhancement.js adds:

  • Auto-dismiss - automatic closing after time (data-auto-dismiss="5000")
  • Programmatic creation - creating alerts with JavaScript
  • Progress bar - visual countdown to auto-dismiss
  • Smooth animations - smooth show/hide animations

JavaScript API:

// Create alert programmatically
window.DialogAlertEnhancement.createAlert({
  type: 'success',
  title: 'Success!',
  message: 'Operation completed successfully',
  position: 'top-right',
  autoDismiss: 5000
});

To disable: remove line <script src="./js/dialog-alert-enhancement.js">

CSS Classes

.alert
Basic alert class - info type by default
.alert--info
Informational alert (blue)
.alert--success
Success alert (green)
.alert--warning
Warning alert (orange)
.alert--error
Error alert (red)
.alert--*-solid
Solid variants with full background in alert color
.alert__icon
Container for alert icon
.alert__content
Main alert content
.alert__title
Alert title (optional)
.alert__message
Alert message content
.alert__close
Alert close button
.alert--small
Smaller version of alert
.alert--large
Larger version of alert
.alert-container--*
Position containers: top-right, top-left, bottom-right, bottom-left, top-center, bottom-center

Forms

Comprehensive form system with smart validation, custom controls and full accessibility. Supports all input types, checkboxes, radio, switch, range and file upload.

Basic Fields

Input, textarea, select with smart validation and styling.

Enter your real name
HTML 
<form class="form">
  <div class="form-group">
    <label for="name" class="required">Name</label>
    <input type="text" id="name" required placeholder="Enter name">
    <div class="form-hint">Enter your real name</div>
  </div>
  
  <div class="form-row">
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="email@example.com">
    </div>
    <div class="form-group">
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="+48 123 456 789">
    </div>
  </div>
  
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" rows="4" placeholder="Your message..."></textarea>
  </div>
</form>

Checkboxes

Custom styled checkboxes with group support and validation.

HTML 
<!-- Single checkbox -->
<label class="form-checkbox">
  <input type="checkbox" checked>
  <span>Checked checkbox</span>
</label>

<!-- Checkbox group -->
<div class="form-group">
  <label>Preferences</label>
  <div class="form-checkbox-group">
    <label class="form-checkbox">
      <input type="checkbox" name="prefs" value="email">
      <span>Email notifications</span>
    </label>
    <label class="form-checkbox">
      <input type="checkbox" name="prefs" value="sms">
      <span>SMS notifications</span>
    </label>
  </div>
</div>

Radio Buttons

Custom radio buttons with group support and orientation.

HTML 
<!-- Vertical radio group -->
<div class="form-group">
  <label>Gender</label>
  <div class="form-radio-group">
    <label class="form-radio">
      <input type="radio" name="gender" value="male" checked>
      <span>Male</span>
    </label>
    <label class="form-radio">
      <input type="radio" name="gender" value="female">
      <span>Female</span>
    </label>
  </div>
</div>

<!-- Inline radio group -->
<div class="form-group">
  <label>PSubscription plans</label>
  <div class="form-radio-group--inline">
    <label class="form-radio">
      <input type="radio" name="plan" value="basic">
      <span>Basic</span>
    </label>
    <label class="form-radio">
      <input type="radio" name="plan" value="pro">
      <span>Pro</span>
    </label>
  </div>
</div>

Switch Toggle

iOS/Android style toggles - perfect for on/off settings.

HTML 
<label class="form-switch">
  <input type="checkbox" checked>
  <span>Notifications enabled</span>
</label>

<label class="form-switch">
  <input type="checkbox">
  <span>Dark mode</span>
</label>

Range Slider

Sliders for selecting values from range with optional labels.

0 100
100 2,500 10,000
HTML 
<div class="form-group">
  <label>Volume</label>
  <div class="form-range">
    <input type="range" min="0" max="100" value="75">
    <div class="form-range-labels">
      <span>0</span>
      <span>100</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Price (EUR)</label>
  <div class="form-range">
    <input type="range" min="100" max="10000" value="2500" step="100">
    <div class="form-range-labels">
      <span>100</span>
      <span>2,500</span>
      <span>10,000</span>
    </div>
  </div>
</div>

File Upload

Drag & drop file upload z progress indicator i compact variant.

📁
Click to select or drag files here
PNG, JPG, PDF do 10MB
📎
Choose files
HTML 
<!-- Standard file upload -->
<div class="form-file">
  <input type="file" accept=".jpg,.png,.pdf">
  <div class="form-file-label">
    <div class="form-file-icon">📁</div>
    <div class="form-file-text">
      <strong>Click to select</strong> or drag files here
      <br><small>PNG, JPG, PDF do 10MB</small>
    </div>
  </div>
</div>

<!-- Compact file upload -->
<div class="form-file form-file--compact">
  <input type="file" multiple>
  <div class="form-file-label">
    <div class="form-file-icon">📎</div>
    <div class="form-file-text">
      <strong>Choose files</strong>
    </div>
  </div>
</div>

Klasy CSS - Podstawowe

.form
Main form container - sets grid layout with proper spacing
.form-group
Form field group (label + input + hint) with vertical layout
.form-row
Row container - responsive flexbox
.form-hint
Helper text below form field
.required
Label modifier - adds red asterisk (*)

Klasy CSS - Custom Controls

.form-checkbox
Custom checkbox - label with flexbox layout, input uses appearance: none
.form-checkbox-group
Vertical checkbox group
.form-checkbox-group--inline
Horizontal checkbox group
.form-radio
Custom radio button - label with flexbox layout, input uses appearance: none
.form-radio-group
Vertical radio button group
.form-radio-group--inline
Horizontal grupa radio buttons
.form-switch
iOS-style switch toggle
.form-range
Range slider container
.form-range-labels
Labels for min/max values
.form-file
File upload kontener
.form-file-label
Visual file upload element (drag & drop area)
.form-file--compact
Compact file upload variant (button-style)
.form-file-progress
Progress bar for file upload

Tables

Responsive tables with multiple styling variants. Support hover, striped rows and mobile-first approach.

Example table with data
Name Status Price
Product A Available $99.99
Product B Unavailable $149.99
Product C Available $79.99
HTML 
<table class="table table--striped">
  <caption>Example table with data</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>Available</td>
      <td>$99.99</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>Unavailable</td>
      <td>$149.99</td>
    </tr>
  </tbody>
</table>

CSS Classes

.table
Basic table class with border-collapse and tabular-nums
.table--striped
Striped background every other row
.table--compact
Smaller paddings in cells
.table--borderless
Removes all borders
.table--fixed
Fixed column width (table-layout: fixed)
.table--responsive
Horizontal scroll on small screens
.table--stack
Transforms table into cards on mobile

Definition Lists

Styled definition lists with four variants: default, inline, cards and bordered. Perfect for presenting key-value pairs, statistics and metadata.

Default

Basic vertical layout with margins between elements.

Product name
Litura
Version
0.1.0
Author
Your organisation
Licence
MIT
HTML 
<dl class="dl">
  <dt>Product name</dt>
  <dd>Litura</dd>
  
  <dt>Version</dt>
  <dd>0.1.0</dd>
  
  <dt>Author</dt>
  <dd>Your organisation</dd>
</dl>

Inline

Layout inline

Status:
Active
Last update:
2024-01-15
File size:
12.3 KB
Typ:
CSS Library
HTML 
<dl class="dl dl--inline">
  <dt>Status:</dt>
  <dd>Active</dd>
  
  <dt>Last update:</dt>
  <dd>2024-01-15</dd>
  
  <dt>File size:</dt>
  <dd>12.3 KB</dd>
</dl>

Cards

Each dt/dd pair as separate card - perfect for statistics and metrics.

Users
1,234
Sesje
5,678
Conversion
89
Revenue
$12,345
Bounce Rate
23%
Avg. Session
4:32
HTML 
<dl class="dl dl--cards">
  <div>
    <dt>Users</dt>
    <dd>1,234</dd>
  </div>
  <div>
    <dt>Sesje</dt>
    <dd>5,678</dd>
  </div>
  <div>
    <dt>Conversions</dt>
    <dd>89</dd>
  </div>
</dl>

Bordered

Bordered sections with separated pairs - like settings list.

Configuration
Main system settings and user preferences
Security
Access settings, passwords and two-factor authentication
Notifications
Managing email, SMS and push notification alerts
Integrations
Connections with external services and API
HTML 
<dl class="dl dl--bordered">
  <dt>Konfiguracja</dt>
  <dd>Main system settings and user preferences</dd>
  
  <dt>Security</dt>
  <dd>Access settings, passwords and two-factor authentication</dd>
  
  <dt>Notifications</dt>
  <dd>Managing email, SMS and push notification alerts</dd>
</dl>

CSS Classes

.dl
Basic definition list class - default vertical layout
.dl--inline
Inline variant - dt and dd side by side in one line
.dl--cards
Cards variant - each dt/dd pair as separate card with background
.dl--bordered
Bordered variant - bordered sections between pairs

Info Panels

Information panels for displaying structural data, API documentation and notifications. Support various color variants, icons and sizes.

Basic Panel

Default panel with title and structural data - perfect for API documentation.

Info Panel Classes

.info-panel
Main container for info panel
.info-panel__title
Title heading for the panel
.info-panel__item
Individual item within panel
.info-panel__label
Label text within an item
.info-panel__description
Description text within an item
.info-panel__icon
Icon container for with-icon variant
HTML 
<div class="info-panel">
  <h3 class="info-panel__title">Info Panel Classes</h3>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel</div>
    <div class="info-panel__description">Main container for info panel</div>
  </div>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel__title</div>
    <div class="info-panel__description">Title heading for the panel</div>
  </div>
  <div class="info-panel__item">
    <div class="info-panel__label">.info-panel__item</div>
    <div class="info-panel__description">Individual item within panel</div>
  </div>
</div>

Color Variants

Info, success, warning, error - various semantic variants with colors.

Information

Panel informacyjny w kolorze niebieskim.

Sukces

Panel sukcesu w kolorze zielonym.

Warning

Warning panel in orange color.

Error

Error panel in red color.

HTML 
<div class="info-panel info-panel--info">
  <h4 class="info-panel__title">Information</h4>
  <p>Panel informacyjny w kolorze niebieskim.</p>
</div>

<div class="info-panel info-panel--success">
  <h4 class="info-panel__title">Sukces</h4>
  <p>Panel sukcesu w kolorze zielonym.</p>
</div>

<div class="info-panel info-panel--warning">
  <h4 class="info-panel__title">Warning</h4>
  <p>Warning panel in orange color.</p>
</div>

<div class="info-panel info-panel--error">
  <h4 class="info-panel__title">Error</h4>
  <p>Error panel in red color.</p>
</div>

With icons

Panel with icon on the left side - uses flex layout.

ℹī¸

Information with icon

Information panel with emoji as icon.

✅

Success with icon

Success panel with emoji as icon.

⚠ī¸

Warning with icon

Warning panel with emoji as icon.

HTML 
<div class="info-panel info-panel--info info-panel--with-icon">
  <div class="info-panel-icon">ℹī¸</div>
  <div>
    <h4 class="info-panel__title">Information with icon</h4>
    <p>Information panel with emoji as icon.</p>
  </div>
</div>

<div class="info-panel info-panel--success info-panel--with-icon">
  <div class="info-panel-icon">✅</div>
  <div>
    <h4 class="info-panel__title">Success with icon</h4>
    <p>Success panel with emoji as icon.</p>
  </div>
</div>

Sizes and variants

Dense, large, borderless and bordered - various sizes and styles.

Panel Kompaktowy

Smaller paddings - --dense variant.

Large Panel

Larger paddings and fonts - variant --large.

No border

Panel without left border - --borderless variant.

With Full Border

Panel with full border around - variant --bordered.

HTML 
<div class="info-panel info-panel--dense">
  <h4 class="info-panel__title">Dense Panel</h4>
  <p>Smaller paddings - --dense variant.</p>
</div>

<div class="info-panel info-panel--large">
  <h4 class="info-panel__title">Large Panel</h4>
  <p>Larger paddings and fonts - variant --large.</p>
</div>

<div class="info-panel info-panel--borderless">
  <h4 class="info-panel__title">Borderless Panel</h4>
  <p>Panel without left border - --borderless variant.</p>
</div>

<div class="info-panel info-panel--bordered">
  <h4 class="info-panel__title">With Full Border</h4>
  <p>Panel with full border around - variant --bordered.</p>
</div>

CSS Classes

.info-panel
Basic information panel class
.info-panel__title
Panel title
.info-panel__item
Individual item within panel
.info-panel__label
Element label (highlighted with monospace)
.info-panel__description
Element description (muted text)
.info-panel__icon
Panel icon (used with --with-icon)
.info-panel--info
Informational variant (blue)
.info-panel--success
Success variant (green)
.info-panel--warning
Warning variant (orange)
.info-panel--error
Error variant (red)
.info-panel--with-icon
Variant with icon (flex layout)
.info-panel--dense
Compact version with smaller paddings
.info-panel--large
Larger version with bigger paddings
.info-panel--borderless
Version without left border
.info-panel--bordered
Full border instead of just left