Buttons

Various button styles for different actions.

<button>Primary</button>
<button class="outline">Outline</button>
<button class="secondary">Secondary</button>
<button class="destructive">Destructive</button>
<button class="ghost">Ghost</button>
<button class="fill">Fill</button>
<button class="fab">+</button>
<button class="fab secondary">+</button>
<button class="fab destructive">+</button>
<button class="fab outline">+</button>
<button class="fab fill">+</button>
<button class="fab ghost">+</button>
<a role="button">Link button</a>
<button role="button" class="secondary">Link button secondary</a>

Forms

Styles for inputs, textareas, selects, and floating labels.

<input type="text" placeholder="Standard Input">
<input class="fill" type="text" placeholder="Fill Input">
<select>...</select>
<select class="fill" >...</select>
<textarea placeholder="Textarea"></textarea>

<div class="floating">
  <input type="email" id="float" placeholder=" " />
  <label for="float">Floating Label</label>
</div>

 
<label  >
<input type="checkbox" name="switch" role="switch"  >
My switch
</label>
 
<fieldset>
    <legend>Personal Information</legend>
    <input type="text" placeholder="First Name">
    <input type="text" placeholder="Last Name">
    <input type="email" placeholder="Email">
    <button> Send</button>
</fieldset>

Typography

Semantic styling for all text elements.

Table

Responsive and clean tables.

Container

The .container class centers content with a max-width of 1120px.

<div class="container">
  Your content here...
</div> 

Lila.css core

     .container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 0.5rem;
  }
}
@media (max-width: 1440px) {
  .container {
    max-width: 100%;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 95%;
  }
}
    

Grid System

A responsive grid system using CSS Grid. Use .grid and column utilities like .cols-2, .cols-3.

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

Spacing Utilities

Utilities for gaps, margins, and paddings.

/* Gap (for flex/grid) */
.gap-1, .gap-2, .gap-3, .gap-4

/* Margin */
.mt-4, .mb-4

/* Padding */
.p-4

Accordion

A simple, semantic accordion using <details> and <summary>.

<details>
  <summary>Title</summary>
  <p>Content...</p>
</details>

Dialog (Modal)

Semantic modals using the <dialog> element. Includes a fullscreen variant.

<dialog id="myDialog" class="w-400-px w-100">
    <article>
      ... 
      <footer class="flex between items-center">
        <button class="ghost" onclick="myDialog.close()">Close</button>
        <button onclick="myDialog.close()"   >Send</button>
      </footer>
    </article>
</dialog>

Dropdown

A CSS-only dropdown menu, activated on hover.

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-content">
    <a class="dropdown-item">...</a>
  </div>
</div>

Snackbar

Import lila.js and usage with lila('snackbar', { ... }) ('component', { message...,duration...,type... })

<button class="primary" onclick="lila('snackbar', {
                                message: 'Hello! This is a Lila CSS snackbar.',
                                duration: 3000,
                                type: 'success'
                            })">Show Snackbar</button>
<button class="primary" onclick="lila('snackbar', {
    message: 'Hello! This is a Lila CSS snackbar.',
    duration: 3000,
    type: 'error'
})">Show Snackbar</button>
<button class="primary" onclick="lila('snackbar', {
    message: 'Hello! This is a Lila CSS snackbar.',
    duration: 3000,
    type: 'warning'
})">Show Snackbar</button>
<button class="primary" onclick="lila('snackbar', {
    message: 'Hello! This is a Lila CSS snackbar.',
    duration: 3000,
    type: 'info'
})">Show Snackbar</button>
                    

Flex & Sizing Utilities

A collection of utilities for flexbox layouts, sizing, and visibility.

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Sizing */
.w-full { width: 100%; }

/* Visibility */
.hidden { display: none !important; }

Responsive Visibility

Show or hide elements based on screen size using responsive utility classes.

<!-- Show only on specific breakpoints -->
<div class="visible-sm">Mobile only</div>
<div class="visible-md">Tablet only</div>
<div class="visible-lg">Desktop only</div>

<!-- Hide on specific breakpoints -->
<div class="hidden-sm">Hidden on Mobile</div>
<div class="hidden-md">Hidden on Tablet</div>
<div class="hidden-lg">Hidden on Desktop</div>

Shadows

Apply shadows using the .shadow class or CSS variables for more control.

<div class="shadow">...</div>
<div style="box-shadow: var(--shadow-md);">...</div>

Borders

Control border-radius and add borders with utility classes.

<div class="rounded-lg">...</div>
<div class="border">...</div>

Bottom Navigation Bar

A mobile-friendly bottom navigation bar that stays fixed to the bottom of the page. Useful for mobile layouts or Progressive Web Apps. You may combine it with the visible-sm utility class to show it only on small screens, or remove it to display the bar everywhere.

<nav class="bottom-nav visible-sm">
  <ul>
    <li><a href="/search">Search</a></li>
    <li><a href="/cart">Cart</a></li>
    <li><a href="/account">Account</a></li>
  </ul>
</nav>

The visible-sm class ensures the bar only appears on small screens. Remove the class if you want the bottom nav to be visible at all screen sizes.

Color Utilities

Apply colors using semantic classes like .bg-primary and .text-success, or use the full palette.

<div class="bg-primary">...</div>
<p class="text-success">Success message</p>
<div class="bg-red-500 text-red-50">...</div>

Full Color Palette