Utila Styles - Lightweight CSS Framework for Developers

Getting Started

📖 Introduction

UtilaCSS is a lightweight, modern UI framework built for speed, simplicity, and clean design. Inspired by Bootstrap and Tailwind — but much lighter and easier to use.

⚡

Lightweight

Minimal footprint, maximum performance

🎨

Beautiful

Modern design with Sky Blue theme

📱

Responsive

Mobile-first and fully responsive

🌓

Dark Mode

Built-in light and dark themes

Setup

⚡ Installation

Getting started with UtilaCSS is incredibly simple. Just add one line to your project:

CDN Method (Recommended)

HTML

<link rel="stylesheet" href="http://utila.vercel.app/utila.css" />

SvelteKit Setup

Add this to your +layout.svelte file:

Svelte

<svelte:head>
  <link rel="stylesheet" href="http://utila.vercel.app/utila.css" />
</svelte:head>

Tutorial

🚀 Quick Start

Create your first page with UtilaCSS in seconds:

HTML

<div class="container">
  <h1 class="title">Welcome to UtilaCSS</h1>
  <p class="subtitle">Build beautiful UIs faster</p>
  
  <div class="card">
    <div class="card-body">
      <h3>Your First Card</h3>
      <p>This is a simple card component.</p>
      <button class="btn btn-primary">Get Started</button>
    </div>
  </div>
</div>

Foundation

📐 Layout

UtilaCSS provides flexible container classes for your layouts:

Container

<div class="container">
  <!-- Content with max-width 1200px -->
</div>

Container Sizes

<div class="container-sm">540px max-width</div>
<div class="container-md">720px max-width</div>
<div class="container-lg">960px max-width</div>
<div class="container-xl">1140px max-width</div>
<div class="container-fluid">Full width</div>

Layout

🎯 Grid System

Powerful 12-column responsive grid system:

Basic Grid

<div class="row">
  <div class="col-6">Half width</div>
  <div class="col-6">Half width</div>
</div>

<div class="row">
  <div class="col-4">One third</div>
  <div class="col-4">One third</div>
  <div class="col-4">One third</div>
</div>

Responsive Grid

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">
    Responsive column
  </div>
</div>

• col-sm-* for tablets (≥576px)

• col-md-* for desktops (≥768px)

• col-lg-* for large screens (≥992px)

Content

✍️ Typography

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<!-- Display headings -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

Text Utilities

<p class="text-center">Centered text</p>
<p class="text-muted">Muted text</p>
<p class="text-primary">Primary color</p>
<p class="text-uppercase">Uppercase</p>
<p class="font-weight-bold">Bold text</p>

Components

🔘 Buttons

Button Styles

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

Button Sizes

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-lg">Large</button>

Components

📝 Forms

Form Controls

<input class="form-control" placeholder="Text input" />
<textarea class="form-control" rows="3"></textarea>
<select class="form-select">
  <option>Select option</option>
</select>

Form Groups

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-control" />
  <small class="form-text">Helper text here</small>
</div>

Components

📦 Cards

Card Header

Card Title

This is card body content with some example text.

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    <h4>Card Title</h4>
    <p>Card content here</p>
    <button class="btn btn-primary">Action</button>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

Components

⚠️ Alerts

✓ Success alert message

ℹ Info alert message

⚠ Warning alert message

✕ Danger alert message

<div class="alert alert-success">Success message</div>
<div class="alert alert-info">Info message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-danger">Danger message</div>

Components

📊 Tables

Name	Role	Status
Ahmed Ali	Developer	Active
Sara Mohamed	Designer	Active

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ahmed Ali</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

Components

🪟 Modals

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <button class="close">×</button>
    </div>
    <div class="modal-body">
      Modal content here
    </div>
    <div class="modal-footer">
      <button class="btn btn-secondary">Close</button>
      <button class="btn btn-primary">Save</button>
    </div>
  </div>
</div>

💡 Add show class to display the modal

Components

🧭 Navbar

<nav class="navbar">
  <div class="navbar-brand">UtilaCSS</div>
  <div class="navbar-nav">
    <a href="#" class="nav-link">Home</a>
    <a href="#" class="nav-link">Docs</a>
  </div>
</nav>

Helpers

🛠️ Utilities

📏 Spacing

m-0 to m-5 mt-*, mb-*, ms-*, me-* p-0 to p-5 px-*, py-*

🔄 Flexbox

d-flex justify-content-* align-items-* flex-column

📐 Sizing

w-25, w-50, w-75, w-100 h-25, h-50, h-75, h-100 mw-100, mh-100

🎨 Colors

text-primary text-success bg-primary border-primary

💫 Shadows

shadow-none shadow-sm shadow shadow-lg

🔲 Borders

border rounded rounded-circle rounded-pill

Customization

🎨 Theming

Dark Mode

Toggle dark mode by setting the data-theme attribute:

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

// Switch back to light
document.documentElement.setAttribute('data-theme', 'light');

CSS Variables

Customize colors by overriding CSS variables:

:root 
  --utila-primary: #0e74e9;
  --utila-secondary: #1e40af;
  --utila-success: #10b981;
  --utila-danger: #ef4444;
  --utila-warning: #f59e0b;
  --utila-info: #0693d4;