Documentation

Documentation - Responsive Design.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Documentation - Responsive. +

Startup

Basic concepts

Utilities

Components

Responsive design

Marssel integrates a complete responsive design system based on pre-finished breakpoints. Simply prefix your classes with the desired breakpoint to adapt your styles to different screen sizes, with support for min-max ranges and compact syntax.

Breakpoints

Marssel uses 6 predefined breakpoints to manage responsive design:

xs:  320px
sm:  576px
md:  768px
lg:  992px
xl:  1200px
xxl: 1400px

Syntax

Prefix your classes with one or more breakpoints separated by --:

<!-- Single breakpoint -->
<div class="md--w-[500px]">...</div>

<!-- Multiple breakpoints -->
<div class="sm--md--w-[300px]">...</div>

Compact syntax

Use --- to apply multiple styles to a component with breakpoint:

<div class="md--card---[bg-[ffffff]+p-[20px]+rounded-[8px]]">...</div>

Max-width

Use m in front of the breakpoint for max-width:

<!-- Hide on mobile -->
<div class="mmd--d-[none]">Visible only on desktop</div>

Order of priority

Breakpoints follow an order of priority which depends on the type of media query:

For min-width (standard breakpoints)

The order is ascending: from smallest to largest breakpoint.

<!-- Generated CSS order -->
.col-\[12\] { ... }                    /* Base : 100% */

@media (min-width: 768px) {
    .md--col-\[6\] { ... }             /* md et plus : 50% */
}

@media (min-width: 992px) {
    .lg--col-\[4\] { ... }             /* lg et plus : 33.33% ✅ PRIORITAIRE */
}

For max-width ('m' prefix)

The order is descending: from the largest to the smallest breakpoint.

<!-- Generated CSS order -->
.col-\[12\] { ... }                    /* Base : 100% */

@media (max-width: 991px) {
    .mlg--col-\[8\] { ... }            /* lg et moins : 66.67% */
}

@media (max-width: 575px) {
    .msm--col-\[10\] { ... }           /* sm et moins : 83.33% ✅ PRIORITAIRE */
}

💡 Trick : The larger the breakpoint (lg > md > sm), the more priority it has with min-width. It's the opposite with max-width where small breakpoints (msm) overwrite large ones (mlg).

Example of priority

This element changes width depending on the screen size:

Preview

Responsive width
Large screen: 33.33% Medium screen: 50% Small screen: 100%

<!-- ≥ 992px → 33.33% (priority lg) -->
<!-- 768px - 991px → 50% (priority md) -->
<!-- &lt; 768px → 100% (priority base) -->
<div class="lg--col-[4] md--col-[6] col-[12]">
    Responsive content
</div>

Tidy

Combine min and max to target a specific range:

<!-- Visible only between sm and md -->
<div class="sm--md--d-[block]">...</div>

Practical examples