Utility Classes
Ready-to-use classes for spacing, layout, typography, colors, images, and cursors
2-Minute Setup
1 Include Utility CSS Files
Required Files • HTML
<!-- Core grid (always required) -->
<link rel="stylesheet" href="styles/grid.css" />
<!-- Utility classes -->
<link rel="stylesheet" href="styles/helper-classes.css" />
<link rel="stylesheet" href="styles/colors.css" />
<link rel="stylesheet" href="styles/images.css" />
<link rel="stylesheet" href="styles/cursor-styles.css" />
2 Start Using Utilities
Example Usage • HTML
<div class="rsl-center rsl-p-3">
<h2 class="rsl-mb-2">Welcome!</h2>
<p class="rsl-success">Your account is active</p>
<img src="profile.jpg" class="circle shadow" alt="Profile" />
</div>
✓ Done! You now have access to RSL's complete utility class system.
Spacing Utilities (Margin & Padding)
Spacing Scale: RSL uses a 5-step scale from 0-4
- 0 = 0rem (no spacing)
- 1 = 0.25rem (4px)
- 2 = 0.5rem (8px)
- 3 = 1rem (16px)
- 4 = 1.5rem (24px)
Margin Classes
| Class |
Property |
Example |
.rsl-m-{0-4} |
Margin all sides |
.rsl-m-3 = 1rem margin |
.rsl-mt-{0-4} |
Margin top |
.rsl-mt-2 = 0.5rem top margin |
.rsl-mb-{0-4} |
Margin bottom |
.rsl-mb-4 = 1.5rem bottom margin |
.rsl-ml-{0-4} |
Margin left |
.rsl-ml-1 = 0.25rem left margin |
.rsl-mr-{0-4} |
Margin right |
.rsl-mr-0 = 0 right margin |
Padding Classes
| Class |
Property |
Example |
.rsl-p-{0-4} |
Padding all sides |
.rsl-p-3 = 1rem padding |
.rsl-pt-{0-4} |
Padding top |
.rsl-pt-2 = 0.5rem top padding |
.rsl-pb-{0-4} |
Padding bottom |
.rsl-pb-4 = 1.5rem bottom padding |
.rsl-pl-{0-4} |
Padding left |
.rsl-pl-1 = 0.25rem left padding |
.rsl-pr-{0-4} |
Padding right |
.rsl-pr-0 = 0 right padding |
Spacing Example
Code • HTML
<div class="rsl-p-4 rsl-mb-3">
<h3 class="rsl-mt-0 rsl-mb-2">Card Title</h3>
<p class="rsl-mb-0">Content with controlled spacing</p>
</div>
Layout & Alignment
Flexbox Alignment
| Class |
Effect |
Use Case |
.rsl-center |
Centers content horizontally and vertically |
Center icons, buttons, or text blocks |
.rsl-center-vertical |
Centers content vertically only |
Align items in horizontal layouts |
Text Alignment
| Class |
Effect |
Responsive Behavior |
.rsl-left |
Left-align text |
All screen sizes |
.rsl-right |
Right-align text |
All screen sizes |
.rsl-mobile-left |
Left-align on mobile only |
Resets to inherit on desktop (≥992px) |
.rsl-mobile-center |
Center on mobile only |
Resets to inherit on desktop (≥992px) |
.rsl-mobile-right |
Right-align on mobile only |
Resets to inherit on desktop (≥992px) |
Container Utilities
| Class |
Width |
Max Width |
.container |
80% |
1200px |
.container-full |
100% |
None |
.container-fluid |
90% |
None |
.container-flex |
100% (flexbox, centered) |
None |
Typography
Font Sizes
| Class |
Font Size |
Use Case |
.rsl-p-xs |
0.8rem |
Small print, captions |
.rsl-p-sm |
0.9rem |
Secondary text |
.rsl-p-lg |
1.1rem |
Emphasized paragraphs |
.rsl-p-xl |
1.3rem |
Lead paragraphs |
Font Styles
| Class |
Effect |
.rsl-bold |
Bold text (font-weight: bold) |
.rsl-light |
Light text (font-weight: 300) |
.rsl-italic |
Italic text |
.rsl-underline |
Underlined text |
Special Styles
| Class |
Effect |
.rsl-well |
Light gray background box with padding and border |
Color Utilities
Text Colors
| Class |
Color |
Hex |
Use Case |
.success or .rsl-success |
● |
#28a745 |
Success messages |
.danger or .rsl-danger |
● |
#dc3545 |
Error messages, warnings |
.info or .rsl-info |
● |
#17a2b8 |
Informational text |
.warning or .rsl-warning |
● |
#ffc107 |
Caution messages |
Background Colors
| Class |
Background |
Text Color |
.rsl-bg-success |
Green |
White |
.rsl-bg-danger |
Red |
White |
.rsl-bg-info |
Blue |
White |
.rsl-bg-warning |
Yellow |
White |
Color Example
Code • HTML
<p class="rsl-success">✓ Payment successful!</p>
<p class="rsl-danger">✗ Invalid password</p>
<div class="rsl-bg-info rsl-p-3">
<strong>Tip:</strong> Save your work frequently
</div>
Image Utilities
Responsive Sizing
| Class |
Effect |
.responsive-img |
Width: 100%, height: auto (scales to container) |
.full-width |
Same as .responsive-img |
.thumbnail |
Max-width: 150px |
.min-width-100 |
Minimum width: 100px |
.min-width-200 |
Minimum width: 200px |
.min-width-300 |
Minimum width: 300px |
.max-width-100 |
Maximum width: 100px |
.max-width-200 |
Maximum width: 200px |
.max-width-300 |
Maximum width: 300px |
.max-width-400 |
Maximum width: 400px |
.max-width-500 |
Maximum width: 500px |
Border Radius
| Class |
Border Radius |
.rounded-sm |
4px |
.rounded |
8px |
.rounded-lg |
16px |
.circle |
50% (perfect circle for square images) |
Borders & Shadows
| Class |
Effect |
.bordered |
2px solid border with 4px padding |
.bordered-thick |
4px solid border with 8px padding |
.shadow |
Subtle drop shadow |
.shadow-lg |
Large drop shadow |
Object Fit & Aspect Ratios
| Class |
Effect |
.cover |
object-fit: cover (fills container, crops overflow) |
.contain |
object-fit: contain (fits inside container) |
.aspect-square |
1:1 aspect ratio with cover |
.aspect-video |
16:9 aspect ratio with cover |
.aspect-portrait |
3:4 aspect ratio with cover |
Special Effects
| Class |
Effect |
.center |
Centers image horizontally (display: block, margin: auto) |
.grayscale |
Grayscale filter, reverts to color on hover |
Image Utility Examples
Code • HTML
<!-- Profile photo: circular with shadow -->
<img src="avatar.jpg" class="circle shadow max-width-200" alt="User avatar" />
<!-- Hero image: 16:9 aspect ratio -->
<img src="hero.jpg" class="aspect-video shadow-lg" alt="Hero banner" />
<!-- Product thumbnail: rounded corners and border -->
<img src="product.jpg" class="rounded bordered max-width-300" alt="Product" />
<!-- Grayscale gallery image -->
<img src="gallery.jpg" class="grayscale rounded" alt="Gallery item" />
Cursor Utilities
Common Cursors
| Class |
Cursor Type |
Use Case |
.pointer |
Pointing hand |
Clickable elements |
.grab |
Open hand |
Draggable elements (before drag) |
.grabbing |
Closed hand |
Draggable elements (during drag) |
.not-allowed |
No entry symbol |
Disabled elements |
.help |
Question mark |
Help tooltips |
.wait |
Loading spinner |
Processing states |
.text |
I-beam |
Text selection areas |
.move |
Four-way arrows |
Movable elements |
.crosshair |
Crosshair |
Precision selection |
.zoom-in |
Magnifying glass (+) |
Zoomable images |
.zoom-out |
Magnifying glass (-) |
Zoom out action |
Resize Cursors
| Class |
Direction |
.n-resize |
North (up) |
.s-resize |
South (down) |
.e-resize |
East (right) |
.w-resize |
West (left) |
.ne-resize |
Northeast (diagonal) |
.nw-resize |
Northwest (diagonal) |
.se-resize |
Southeast (diagonal) |
.sw-resize |
Southwest (diagonal) |
.col-resize |
Column resize (horizontal) |
.row-resize |
Row resize (vertical) |
Special Cursor Classes
| Class |
Effect |
.cursor-event-none |
Disables pointer events (pointer-events: none) |
.default |
Default arrow cursor |
.none |
Hides cursor completely |
Cursor Example
Code • HTML
<!-- Clickable card -->
<div class="pointer rsl-p-3">Click me</div>
<!-- Draggable element -->
<div class="grab rsl-p-3">Drag me</div>
<!-- Disabled button -->
<button class="not-allowed" disabled>Unavailable</button>
<!-- Zoomable image -->
<img src="photo.jpg" class="zoom-in" alt="Click to zoom" />
Pro Tips
✨ Tip 1: Combine utilities for powerful layouts. Example: class="rsl-center rsl-p-4 rsl-bg-info" creates a centered, padded, colored box
✨ Tip 2: Use .rsl-m-0 or .rsl-p-0 to remove default spacing when needed
✨ Tip 3: The .rsl-mobile-* alignment classes automatically adjust for desktop, perfect for responsive text
✨ Tip 4: Combine image utilities: class="circle shadow max-width-200" for professional-looking avatars
✨ Tip 5: Use .aspect-video on images to maintain 16:9 ratio, preventing layout shift during page load
⚠ Remember: RSL's grid system handles most layout needs via data-cols-* attributes—use utilities for fine-tuning, not primary layout
Common Utility Patterns
1. Alert Box
Code • HTML
<div class="rsl-bg-success rsl-p-3 rsl-mb-3">
<strong>Success!</strong> Your changes have been saved.
</div>
2. Card with Avatar
Code • HTML
<div class="rsl-well rsl-p-3">
<img src="avatar.jpg" class="circle shadow max-width-100 rsl-mb-2" alt="User" />
<h3 class="rsl-mt-0 rsl-mb-1">John Doe</h3>
<p class="rsl-p-sm rsl-mb-0">Product Designer</p>
</div>
3. Centered Call-to-Action
Code • HTML
<div class="rsl-center rsl-p-4">
<h2 class="rsl-mb-2">Get Started Today</h2>
<p class="rsl-p-lg rsl-mb-3">Join thousands of satisfied customers</p>
<button class="pointer">Sign Up Now</button>
</div>
4. Image Gallery Grid
Code • HTML
<div class="slot-layout" data-cols-xs="2" data-cols-md="4">
<div class="slot-item">
<img src="photo1.jpg" class="aspect-square rounded shadow pointer" alt="Photo 1" />
</div>
<div class="slot-item">
<img src="photo2.jpg" class="aspect-square rounded shadow pointer" alt="Photo 2" />
</div>
<!-- More images... -->
</div>