@medyll/css-base

Modern CSS design system — Chrome/Edge 125+

Typography

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Heading 4 — The quick brown fox

Heading 5 — The quick brown fox
Heading 6 — The quick brown fox

This is a paragraph. The quick brown fox jumps over the lazy dog. Strong text and emphasized text are supported.

Muted text — color: var(--color-text-muted)

inline code
/* Code block */
function hello() {
  console.log("Hello, world!");
}

Badges

Default Primary Success Warning Error Neutral

Alerts

Information
This is an informational message.
Success
Your changes have been saved.
Warning
Please review before continuing.
Error
Something went wrong. Please try again.

Cards

Card Title

Card content goes here. This is a sample card component.

Another Card

Cards can contain any content. They support headers, bodies, and footers.

New Active

Form Elements

This is a hint message.
This field is required.
@
Choose file...
Fieldset Group

Table

Name Email Role Status
John Doe john@example.com Admin Active
Jane Smith jane@example.com Editor Pending
Bob Wilson bob@example.com Viewer Inactive

Utility Classes

Display:
.flex .grid .hidden .block
Flex:
.flex-col .items-center .justify-between
Spacing:
.p-4 .gap-4 .mt-2
Colors:
.text-primary .text-critical .text-success .text-muted

Responsive Utilities

Resize the window to see responsive classes in action.

sm: md: lg: xl:

attr() — Dynamic Styling

Chrome 139+ (CSS Values & Units Level 5). No classes needed — just data attributes.

Rotation
15°
30°
45°
Opacity
1.0
0.75
0.5
0.25
Elevation
xs
sm
md
lg
xl
2xl
Inset (Sunken)
xs
sm
md
lg
xl
2xl
Z-Index
dropdown
overlay
modal
toast
Typography
xs normal
sm medium
base semibold
lg bold
xl primary
2xl error
Spacing
pad-xs
pad-sm
pad-md
pad-lg
margin-lg
Scale
0.9
0.95
1
1.05
1.1
1.2
Aspect Ratio
Grid Columns & Rows
1 column
2 columns
2 columns
3 cols × 2 rows
3 cols × 2 rows
3 cols × 2 rows
3 cols × 2 rows
3 cols × 2 rows
3 cols × 2 rows
4 cols
4 cols
4 cols
4 cols
Subgrid

Nested grids align with parent columns.

Card 1
Content aligned
Card 2
Content aligned
Card 3
Content aligned
Blur
sm
md
lg
xl
Combined
Dynamic Card
rotate + opacity + elevation + pad + radius + bg