remx.css
The simplest CSS framework based on 1rem
What does it do?
- Minimalist: Built on a single unit of measurement (
1rem). - Lightweight: ~90KB minified, broken down into 18 independent modules.
- Predictable: Consistent scaling and naming conventions.
- Performance: Zero runtime overhead, just pure CSS.
Usage
npm install remx.css
<link rel="stylesheet" href="https://unpkg.com/remx.css/dist/remx.min.css">
Container
container
<div class="container">...</div>
| Префикс | Мин. ширина | Max-width контейнера |
|---|---|---|
- |
0px | 100% |
xxs |
360px | col-xxs-6 |
xs |
480px | col-xs-6 |
s |
576px | col-s-6 |
m |
768px | col-m-4 |
l |
992px | col-l-3 |
xl |
1200px | col-xl-3 |
xxl |
1400px | col-xxl-2 |
3xl |
1600px | col-3xl-2 |
4xl |
1920px | col-4xl-1 |
5xl |
2560px | col-5xl-1 |
Grid
12-column grid system based on CSS Grid.
col-12
col-6
col-6
col-4
col-4
col-4
<div class="grid-row gap-m">
<div class="col-12">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
<div class="col-12">...</div>
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
| Prefix | Min. width | Example |
|---|---|---|
- |
0px | col-12 |
xxs |
360px | col-xxs-6 |
xs |
480px | col-xs-6 |
s |
576px | col-s-6 |
m |
768px | col-m-4 |
l |
992px | col-l-3 |
xl |
1200px | col-xl-3 |
xxl |
1400px | col-xxl-2 |
3xl |
1600px | col-3xl-2 |
4xl |
1920px | col-4xl-1 |
5xl |
2560px | col-5xl-1 |
Spacing (Margin / Padding)
xxsxssmlxlxxl3xl4xl5xl
m
<div class="p-m">Content</div>
Content
| Suffix | Value (rem) | Value (px) |
|---|---|---|
xxs |
0.25rem | 4px |
xs |
0.5rem | 8px |
s |
0.75rem | 12px |
m |
1rem | 16px |
l |
1.25rem | 20px |
xl |
1.5rem | 24px |
xxl |
2rem | 32px |
3xl |
3rem | 48px |
4xl |
4rem | 64px |
5xl |
7.5rem | 120px |
Gap
Item 1
Item 2
Item 3
xxsxssmlxlxxl3xl4xl5xl
m
<div class="d-flex gap-m">...</div>
Typography
xxsxssmlxlxxl3xl4xl5xl
m
400
<p class="fs-m fw-400">The quick brown fox jumps over
the lazy dog</p>
The quick brown fox jumps over the lazy dog
| Class | Value (rem) | Value (px) |
|---|---|---|
fs-xxs |
0.625rem | 10px |
fs-xs |
0.75rem | 12px |
fs-s |
0.875rem | 14px |
fs-m |
1rem | 16px |
fs-l |
1.25rem | 20px |
fs-xl |
1.5rem | 24px |
fs-xxl |
2rem | 32px |
fs-3xl |
2.5rem | 40px |
fs-4xl |
3rem | 48px |
fs-5xl |
4rem | 64px |
Radius
Radius
nonexxsxssmlxlxxl3xl4xl5xlfull
rounded-m
<div class="rounded-m">...</div>
| Class | Value |
|---|---|
rounded-none |
0 |
rounded-xxs |
0.25rem (4px) |
rounded-xs |
0.5rem (8px) |
rounded-s |
0.75rem (12px) |
rounded-m |
1rem (16px) |
rounded-l |
1.25rem (20px) |
rounded-xl |
1.5rem (24px) |
rounded-xxl |
2rem (32px) |
rounded-3xl |
3rem (48px) |
rounded-4xl |
4rem (64px) |
rounded-5xl |
7.5rem (120px) |
rounded-full |
100% |
rounded-circle |
50% |
rounded-pill |
9999px |
Positioning
top-0 left-0
top-0 right-0
bottom-0 left-0
bottom-0 right-0
<div class="position-relative">
<div class="position-absolute top-0 right-0">...</div>
</div>
<div class="position-absolute top-0 right-0">...</div>
</div>
Line Clamp
<p class="line-clamp-3">...</p>
1
2
3
4
5
6
7
8
9
10
5
This is an example of long text that will be truncated after a specific number of lines. Line clamp is very useful for product cards, news articles, and other elements where you need to limit the text height. If the text is too long, it will automatically get an ellipsis at the end. Try changing the number of lines using the slider below to see how it works.
Aspect Ratio
<div class="aspect-16-9">...</div>
16:9