lotte css

Utility Classes

Flexbox Layout

Display Flex

Item 1
Item 2
Item 3
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Flex Direction

flex-row

Items arranged horizontally in a row (default behavior)

Item 1
Item 2
Item 3
Item 4
<div class="flex flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

flex-col

Items stacked vertically in a column

Item 1
Item 2
Item 3
<div class="flex flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Content

justify-start

Items aligned to the start of the container

Item 1
Item 2
Item 3
<div class="flex justify-start">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

justify-center

Items centered in the container

Item 1
Item 2
Item 3
<div class="flex justify-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

justify-end

Items aligned to the end of the container

Item 1
Item 2
Item 3
<div class="flex justify-end">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

justify-between

Items evenly distributed with first item at start and last item at end

Item 1
Item 2
Item 3
<div class="flex justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

justify-around

Items evenly distributed with equal space around each item

Item 1
Item 2
Item 3
<div class="flex justify-around">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Align Items

items-start

Items aligned to the start of the cross axis

Item 1
Tall Item
Item 3
<div class="flex items-start">
  <div>Item 1</div>
  <div style="height: 100px;">Tall Item</div>
  <div>Item 3</div>
</div>

items-center

Items centered along the cross axis

Item 1
Tall Item
Item 3
<div class="flex items-center">
  <div>Item 1</div>
  <div style="height: 100px;">Tall Item</div>
  <div>Item 3</div>
</div>

items-end

Items aligned to the end of the cross axis

Item 1
Tall Item
Item 3
<div class="flex items-end">
  <div>Item 1</div>
  <div style="height: 100px;">Tall Item</div>
  <div>Item 3</div>
</div>

Flex Wrap

Items wrap to next line when they run out of space

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="flex flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  <div>Item 8</div>
</div>

Grid Layout

Basic Grid

Grid with 3 equal-width columns

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

Column Spans

Control how many columns an element spans

col-span-2
col-span-2
col-span-1
col-span-3
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">col-span-2</div>
  <div class="col-span-2">col-span-2</div>
  <div class="col-span-1">col-span-1</div>
  <div class="col-span-3">col-span-3</div>
</div>

Spacing Utilities

Margin

Margin utilities for adding space around elements (0, 0.25rem, 0.5rem, 1rem, 2rem)

m-0
m-1
m-2
m-4
m-8
<div class="m-0">m-0</div>
<div class="m-1">m-1</div>
<div class="m-2">m-2</div>
<div class="m-4">m-4</div>
<div class="m-8">m-8</div>

Padding

Padding utilities for adding space inside elements (0, 0.25rem, 0.5rem, 1rem, 2rem)

p-0
p-1
p-2
p-4
p-8
<div class="p-0">p-0</div>
<div class="p-1">p-1</div>
<div class="p-2">p-2</div>
<div class="p-4">p-4</div>
<div class="p-8">p-8</div>

Display Utilities

Display Types

Change how an element is displayed

display: block
display: inline-block
display: inline
display: flex
display: grid
<div class="block">display: block</div>
<div class="inline-block">display: inline-block</div>
<div class="inline">display: inline</div>
<div class="flex">display: flex</div>
<div class="grid">display: grid</div>

Border Utilities

Utilities for adding borders to elements

border (all sides)
border-t (top only)
border-r (right only)
border-b (bottom only)
border-l (left only)
<div class="border">border (all sides)</div>
<div class="border-t">border-t (top only)</div>
<div class="border-r">border-r (right only)</div>
<div class="border-b">border-b (bottom only)</div>
<div class="border-l">border-l (left only)</div>

rounded, rounded-lg, rounded-full

Utilities for controlling border radius

rounded
rounded-lg
rounded-full
<div class="rounded">rounded</div>
<div class="rounded-lg">rounded-lg</div>
<div class="rounded-full">rounded-full</div>

Responsive Utilities

Container / Card

Container makes stuff full width. Card gives it a border and bg

This container adapts to different screen sizes (resize browser)

<div class="container card">
  <p>Content here</p>
</div>

Responsive Display

Apply styles at specific breakpoints (sm: 640px, md: 768px, lg: 1024px)

Visible on small screens, hidden from medium screens 
<div class="hidden md:block">Hidden on small screens, visible from medium screens</div>
<div class="block md:hidden">Visible on small screens, hidden from medium screens</div>