Documentation
Documentation - Dimensions.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Dimensions
Dimensions properties allow you to control the size of elements on your page. Marssel offers a flexible syntax for defining widths, heights, as well as their minimum and maximum values. All these properties support different units (px, %, rem, vh, vw) and can be combined with breakpoints for a responsive design.
Width
100px
25%
10rem
50vw
100% → 75% → 50%
<!-- Pixels -->
<div class="w-[100px] h-[50px] bg-[e0e0e0] mb-[10px]">
100px
</div>
<!-- Percentages -->
<div class="w-[25%] h-[50px] bg-[0B63F3] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
25%
</div>
<!-- REM (relative to root font size) -->
<div class="w-[10rem] h-[50px] bg-[e0e0e0] mb-[10px]">
10rem
</div>
<!-- Viewport width -->
<div class="w-[50vw] h-[50px] bg-[10b981] c-[fff] mb-[10px] d-[flex] items-[center] justify-[center]">
50vw
</div>
<!-- Adaptive width according to breakpoint -->
<div class="w-[100%] md--w-[75%] lg--w-[50%] h-[60px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
100% → 75% → 50%
</div>Height
50px
25%
50vh (50% of viewport height)
100px → 200px → 300px
<!-- Different heights -->
<div class="w-[100px] h-[50px] bg-[e0e0e0] d-[flex] items-[center] justify-[center]">
50px
</div>
<!-- Percentage heights -->
<div class="w-[100px] h-[25%] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
25%
</div>
<!-- Viewport height -->
<div class="w-[100%] h-[50vh] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center] mb-[10px]">
50vh (50% of viewport height)
</div>
<!-- Adaptive height -->
<div class="w-[100%] h-[100px] md--h-[200px] lg--h-[300px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center]">
100px → 200px → 300px
</div>Min-Width
min-w-[200px] (can't be smaller)
<!-- Minimum width -->
<div class="min-w-[200px] h-[60px] bg-[e0e0e0] mb-[10px] d-[flex] items-[center] justify-[center]">
min-w-[200px] (can't be smaller)
</div>Max-Width
max-w-[300px] (can't be wider)
Container centered
This container has a maximum width of 800px and is centered horizontally using mx-[auto].
<!-- Maximum width -->
<div class="max-w-[300px] h-[60px] bg-[e0e0e0] mb-[10px] d-[flex] items-[center] justify-[center]">
max-w-[300px] (can't be wider)
</div>
<!-- Container centré avec max-width -->
<div class="max-w-[800px] mx-[auto] bg-[f5f5f5] p-[24px] rounded-[8px]">
<h3 class="m-[0] mb-[16px]">Container centered</h3>
<p class="m-[0] c-[666]">
This container has a maximum width of 800px and is centered horizontally using mx-[auto].
</p>
</div>Min-Height
min-h-[150px]
Little content
Little content
min-h-[150px]
Lots of content that exceeds the minimum height.
The div expands automatically.
To contain all text.
Lots of content that exceeds the minimum height.
The div expands automatically.
To contain all text.
<div class="d-[flex] gap-[10px]">
<!-- Minimum height with little content -->
<div class="w-[200px] min-h-[150px] bg-[e0e0e0] p-[10px]">
min-h-[150px]
<br>Little content
</div>
<!-- Minimum height with lots of content -->
<div class="w-[200px] min-h-[150px] bg-[e0e0e0] p-[10px]">
min-h-[150px]
<br>Lots of content that exceeds the minimum height.
<br>The div expands automatically.
<br>To contain all text.
</div>
</div>Max-Height
max-h-[100px] with scroll:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
max-h-[150px] with hidden overflow:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Le texte est coupé.
<!-- Maximum height with overflow -->
<div class="max-h-[100px] bg-[e0e0e0] p-[10px] overflow-[auto] mb-[10px]">
<strong>max-h-[100px] with scroll:</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="max-h-[150px] bg-[e0e0e0] p-[10px] overflow-[hidden]">
<strong>max-h-[150px] with hidden overflow:</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Le texte est coupé.</p>
</div>Min/max combinations
min-w-[300px] + max-w-[600px]
Flexible width between 300px and 600px
Flexible width between 300px and 600px
min-h-[100px] + max-h-[200px]
Flexible height between 100px and 200px
With scroll if the content exceeds
Flexible height between 100px and 200px
With scroll if the content exceeds
<!-- Min and max width together -->
<div class="min-w-[300px] max-w-[600px] bg-[0B63F3] c-[fff] p-[20px] mb-[10px]">
min-w-[300px] + max-w-[600px]
<br>Flexible width between 300px and 600px
</div>
<!-- Min and max height together -->
<div class="w-[100%] min-h-[100px] max-h-[200px] bg-[10b981] c-[fff] p-[20px] overflow-[auto]">
min-h-[100px] + max-h-[200px]
<br>Flexible height between 100px and 200px
<br>With scroll if the content exceeds
</div>Full responsive dimensions
Card responsive
This card adapts its width according to the screen size:
- Mobile: 100% width
- Small: 90% width
- Medium: 600px fixed
- Wide: 800px fixed
<!-- Responsive card with adaptive dimensions -->
<div class="w-[100%] sm--w-[90%] md--w-[600px] lg--w-[800px] mx-[auto] min-h-[200px] bg-[fff] rounded-[12px] shadow-[0_4px_12px_rgba(0,0,0,0.1)] p-[20px] md--p-[32px]">
<h3 class="m-[0] mb-[16px]">Card responsive</h3>
<p class="m-[0] c-[666] mb-[16px]">
This card adapts its width according to the screen size:
</p>
<ul class="pl-[20px] c-[666]">
<li>Mobile: 100% width</li>
<li>Small: 90% width</li>
<li>Medium: 600px fixed</li>
<li>Wide: 800px fixed</li>
</ul>
</div>Full-width container
Full-width container with limited content
The background extends to the full width, but the content is limited to 1200px
<!-- Full width container -->
<div class="w-[100vw] h-[300px] bg-[f5f5f5] d-[flex] items-[center] justify-[center]">
<div class="max-w-[1200px] w-[100%] px-[20px]">
<h2>Full-width container with limited content</h2>
<p>The background extends to the full width, but the content is limited to 1200px</p>
</div>
</div>Sidebar + Content
Main content
Takes remaining space (flex-[1])
<div class="d-[flex] gap-[20px] h-[400px]">
<!-- Fixed sidebar -->
<aside class="w-[250px] bg-[f5f5f5] p-[20px]">
<h4 class="m-[0] mb-[16px]">Sidebar</h4>
<p class="m-[0] font-size-[14px] c-[666]">Fixed width of 250px</p>
</aside>
<!-- Flexible content -->
<main class="flex-[1] bg-[fff] p-[20px] border-[1px_solid_e0e0e0] rounded-[8px]">
<h4 class="m-[0] mb-[16px]">Main content</h4>
<p class="m-[0] c-[666]">Takes remaining space (flex-[1])</p>
</main>
</div>Grid with fixed dimensions
Card 1
Card 2
Card 3
<div class="d-[grid] grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-[20px]">
<div class="h-[150px] bg-[0B63F3] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
Card 1
</div>
<div class="h-[150px] bg-[8b5cf6] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
Card 2
</div>
<div class="h-[150px] bg-[10b981] c-[fff] d-[flex] items-[center] justify-[center] rounded-[8px]">
Card 3
</div>
</div>Aspect Ratio (via padding-top)
16:9 Ratio
4:3 Ratio
1:1 Ratio
<!-- Ratio 16:9 -->
<div class="w-[100%] pos-[relative] pt-[56%] bg-[e0e0e0] rounded-[8px] overflow-[hidden] mb-[10px]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
16:9 Ratio
</div>
</div>
<!-- Ratio 4:3 -->
<div class="w-[100%] pos-[relative] pt-[75%] bg-[e0e0e0] rounded-[8px] overflow-[hidden] mb-[10px]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
4:3 Ratio
</div>
</div>
<!-- Ratio 1:1 (square) -->
<div class="w-[100%] pos-[relative] pt-[100%] bg-[e0e0e0] rounded-[8px] overflow-[hidden]">
<div class="pos-[absolute] top-[0] left-[0] w-[100%] h-[100%] d-[flex] items-[center] justify-[center]">
1:1 Ratio
</div>
</div>Available properties
Property | Equivalent CSS | Supported units | Example
---------------------|---------------------------|-----------------------------------------|-------------------------
w | width | px, %, rem, em, vw | w-[300px]
h | height | px, %, rem, em, vh | h-[200px]
min-w | min-width | px, %, rem, em, vw | min-w-[200px]
max-w | max-width | px, %, rem, em, vw | max-w-[800px]
min-h | min-height | px, %, rem, em, vh | min-h-[100px]
max-h | max-height | px, %, rem, em, vh | max-h-[500px]