Dimensions

Component dedicated to width and height

Responsive
Widths
Heights
Fixed widths
Max widths
Widths twelfths
Widths twelfths with 12px gap
Widths twelfths with 16px gap
Widths twelfths with 24px gap
Widths twelfths with 32px gap
Aspect ratios
Overflow
Grow
Break after
Order

Component c-dim does not apply any CSS property, only its modifiers do.

Responsive

Every modifier of dim component is responsive, which means that every features can be applied on specified screen sizes.

The following example shows an HTML element onto which MODIFIER_NAME is applied on SCREEN_SIZE_NAME

<HTMLTag class="c-dim m-[MODIFIER_NAME]--[SCREEN_SIZE_NAME]"></HTMLTag>

The following example shows an HTML element onto which MODIFIER_NAME is applied on multiple screen sizes through attribute.

<HTMLTag class="c-dim" m-[MODIFIER_NAME]="[SCREEN_SIZE_1], [SCREEN_SIZE_2], [SCREEN_SIZE_3]"></HTMLTag>

Similar to

<HTMLTag class="c-dim m-[MODIFIER_NAME]--[SCREEN_SIZE_1] m-[MODIFIER_NAME]--[SCREEN_SIZE_2] m-[MODIFIER_NAME]--[SCREEN_SIZE_3]"></HTMLTag>

<!-- Responsive classes -->
<div class="c-dim m-ar-2_1--xs">Aspect ration 2:1 on xs screen size</div>
<!-- Shorthand -->
<div class="c-dim" m-ar-2_1="xs">Aspect ration 2:1 on xs screen size</div>
<!-- Shorthand -->
<div class="c-dim" m-ar-2_1="xs,sm">Aspect ration 2:1 on xs and sm screen sizes</div>
<!-- DEMO ONLY -->
<style>
    body { 
        background-color: var(--goafe-color-support-success-500);
        padding: 1em;
    }
    div { 
        background-color: var(--goafe-color-neutral-900);
        margin-bottom: 1em;
    }

</style>

Widths

Component c-dim has modifiers for common CSS width properties width:

m-w-100 Applies width: 100%
m-w-auto Applies width: auto
m-w-90px Applies width: 90px
m-w-120px Applies width: 120px
m-w-100-minus-380px Applies width: calc(100% - 380px)

Heights

Component c-dim has modifiers for common CSS width properties height:

m-h-100 Applies height: 100%
m-h-auto Applies height: auto
m-h-80vh Applies height: 80vh
m-h-100vh Applies height: 100vh
m-h-38px Applies height: 38px
m-h-600px Applies height: 600px

Fixed widths

Component c-dim has modifiers that applies fixed width on specified elements:

m-fw-380px Applies min-width: 380px and max-width: 380px
m-fw-300px Applies min-width: 300px and max-width: 300px
m-fw-250px Applies min-width: 250px and max-width: 250px
m-fw-content Applies min-width: min-content and max-width: max-content

<div class="c-dim m-fw-380px">Element 380px width</div>
<div class="c-dim m-fw-300px">Element 300px width</div>
<div class="c-dim m-fw-250px">Element 250px width</div>
<nav class="c-flex m-g32 m-nowrap u-bb-thin-neutral-700 u-o-auto">
    <a href="#" class="c-txt m-ellipsis c-dim m-fw-content c-btn m-skin-tab-active">
        Libre de choisir
    </a>
    <a href="#" class="c-dim m-fw-content c-txt m-ellipsis c-btn m-skin-tab">
        Libre de me tromper
    </a>
    <a href="#" class="c-dim m-fw-content c-txt m-ellipsis c-btn m-skin-tab">
        Libre de changer
    </a>
    <a href="#" class="c-dim m-fw-content c-txt m-ellipsis c-btn m-skin-tab">
        Abonnement GOA Free
    </a>
</nav>
<!-- DEMO ONLY -->
<style>
    div {
        background-color: var(--goafe-color-support-success-500);
    }
</style>

Max widths

<p class="c-dim m-maxw-40ch">Ipsum et dolor sed accusam labore rebum sanctus et, diam dolor tempor consetetur dolor et consetetur diam sit stet. Gubergren.</p>

<p class="c-dim m-maxw-40ch">Ipsum et dolor sed accusam labore rebum sanctus et, diam dolor tempor consetetur dolor et consetetur diam sit stet. Gubergren.</p>

<p class="c-dim m-maxw-132px">Ipsum et dolor sed accusam labore rebum sanctus et, diam dolor tempor consetetur dolor et consetetur diam sit stet. Gubergren.</p>

<p class="c-dim m-maxw-1036px">Ipsum et dolor sed accusam labore rebum sanctus et, diam dolor tempor consetetur dolor et consetetur diam sit stet. Gubergren.</p>

<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
        padding: 2em
    }
    p {
        background-color: var(--goafe-color-neutral-900);
    }
    p:nth-child(2) {
        font-size: var(--goafe-font-size-3);
    }
</style>

Widths twelfths

Component c-dim m-w-{twelfth}t applies width: {twelfth / 12 x 100}% on specified element.

<div class="c-dim m-w-12t">12t</div>
<div class="c-dim m-w-11t">11t</div>
<div class="c-dim m-w-10t">10t</div>
<div class="c-dim m-w-9t">9t</div>
<div class="c-dim m-w-8t">8t</div>
<div class="c-dim m-w-7t">7t</div>
<div class="c-dim m-w-6t">6t</div>
<div class="c-dim m-w-5t">5t</div>
<div class="c-dim m-w-4t">4t</div>
<div class="c-dim m-w-3t">3t</div>
<div class="c-dim m-w-2t">2t</div>
<div class="c-dim m-w-1t">1t</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
    }
    div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
</style>

Widths twelfths with 12px gap

Intended to be used on flexbox items of flex component.

Component c-dim with modifier m-w-{twelfth}tg12 applies 12 pixels gap between flexbox items as follows: width: calc({twelfth / 12 x 100}% - {gap_adjustment}px) on specified element.

<p>For comparison, standard widths twelfths modifiers were added</p>
<div class="c-dim m-w-12tg12">12tg12 (same as 12t)</div>
<div class="c-dim m-w-12t">12t</div>
<div class="c-dim m-w-11tg12">11tg12</div>
<div class="c-dim m-w-11t">11t</div>
<div class="c-dim m-w-10tg12">10tg12</div>
<div class="c-dim m-w-10t">10t</div>
<div class="c-dim m-w-9tg12">9tg12</div>
<div class="c-dim m-w-9t">9t</div>
<div class="c-dim m-w-8tg12">8tg12</div>
<div class="c-dim m-w-8t">8t</div>
<div class="c-dim m-w-7tg12">7tg12</div>
<div class="c-dim m-w-7t">7t</div>
<div class="c-dim m-w-6tg12">6tg12</div>
<div class="c-dim m-w-6t">6t</div>
<div class="c-dim m-w-5tg12">5tg12</div>
<div class="c-dim m-w-5t">5t</div>
<div class="c-dim m-w-4tg12">4tg12</div>
<div class="c-dim m-w-4t">4t</div>
<div class="c-dim m-w-3tg12">3tg12</div>
<div class="c-dim m-w-3t">3t</div>
<div class="c-dim m-w-2tg12">2tg12</div>
<div class="c-dim m-w-2t">2t</div>
<div class="c-dim m-w-1tg12">1tg12</div>
<div class="c-dim m-w-1t">1t</div>

<p>For convenience purpose, additional percentage width is set:</p>
<div class="c-dim m-w-20pcg12">20pcg12</div>
<div class="c-dim m-w-20pc">20pc</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
    }
    div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
    [class*="tg12"] { margin-top: 1em }
</style>

Widths twelfths with 16px gap

Intended to be used on flexbox items of flex component..

Component c-dim with modifier m-w-{twelfth}tg16 applies 16 pixels gap between flexbox items as follows: width: calc({twelfth / 12 x 100}% - {gap_adjustment}px) on specified element.

<p>For comparison, standard widths twelfths modifiers were added</p>
<div class="c-dim m-w-12tg16">12tg16 (same as 16t)</div>
<div class="c-dim m-w-12t">12t</div>
<div class="c-dim m-w-11tg16">11tg16</div>
<div class="c-dim m-w-11t">11t</div>
<div class="c-dim m-w-10tg16">10tg16</div>
<div class="c-dim m-w-10t">10t</div>
<div class="c-dim m-w-9tg16">9tg16</div>
<div class="c-dim m-w-9t">9t</div>
<div class="c-dim m-w-8tg16">8tg16</div>
<div class="c-dim m-w-8t">8t</div>
<div class="c-dim m-w-7tg16">7tg16</div>
<div class="c-dim m-w-7t">7t</div>
<div class="c-dim m-w-6tg16">6tg16</div>
<div class="c-dim m-w-6t">6t</div>
<div class="c-dim m-w-5tg16">5tg16</div>
<div class="c-dim m-w-5t">5t</div>
<div class="c-dim m-w-4tg16">4tg16</div>
<div class="c-dim m-w-4t">4t</div>
<div class="c-dim m-w-3tg16">3tg16</div>
<div class="c-dim m-w-3t">3t</div>
<div class="c-dim m-w-2tg16">2tg16</div>
<div class="c-dim m-w-2t">2t</div>
<div class="c-dim m-w-1tg16">1tg16</div>
<div class="c-dim m-w-1t">1t</div>

<p>For convenience purpose, additional percentage width is set:</p>
<div class="c-dim m-w-20pcg16">20pcg16</div>
<div class="c-dim m-w-20pc">20pc</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
    }
    div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
    [class*="tg16"] { margin-top: 1em }
</style>

Widths twelfths with 24px gap

Intended to be used on flexbox items of flex component..

Component c-dim with modifier m-w-{twelfth}tg24 applies 24 pixels gap between flexbox items as follows: width: calc({twelfth / 12 x 100}% - {gap_adjustment}px) on specified element.

<p>For comparison, standard widths twelfths modifiers were added</p>
<div class="c-dim m-w-12tg24">12tg24 (same as 24t)</div>
<div class="c-dim m-w-12t">12t</div>
<div class="c-dim m-w-11tg24">11tg24</div>
<div class="c-dim m-w-11t">11t</div>
<div class="c-dim m-w-10tg24">10tg24</div>
<div class="c-dim m-w-10t">10t</div>
<div class="c-dim m-w-9tg24">9tg24</div>
<div class="c-dim m-w-9t">9t</div>
<div class="c-dim m-w-8tg24">8tg24</div>
<div class="c-dim m-w-8t">8t</div>
<div class="c-dim m-w-7tg24">7tg24</div>
<div class="c-dim m-w-7t">7t</div>
<div class="c-dim m-w-6tg24">6tg24</div>
<div class="c-dim m-w-6t">6t</div>
<div class="c-dim m-w-5tg24">5tg24</div>
<div class="c-dim m-w-5t">5t</div>
<div class="c-dim m-w-4tg24">4tg24</div>
<div class="c-dim m-w-4t">4t</div>
<div class="c-dim m-w-3tg24">3tg24</div>
<div class="c-dim m-w-3t">3t</div>
<div class="c-dim m-w-2tg24">2tg24</div>
<div class="c-dim m-w-2t">2t</div>
<div class="c-dim m-w-1tg24">1tg24</div>
<div class="c-dim m-w-1t">1t</div>

<p>For convenience purpose, additional percentage width is set:</p>
<div class="c-dim m-w-20pcg24">20pcg24</div>
<div class="c-dim m-w-20pc">20pc</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
    }
    div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
    [class*="tg24"] { margin-top: 1em }
</style>

Widths twelfths with 32px gap

Intended to be used on flexbox items of flex component..

Component c-dim with modifier m-w-{twelfth}tg32 applies 32 pixels gap between flexbox items as follows: width: calc({twelfth / 12 x 100}% - {gap_adjustment}px) on specified element.

<p>For comparison, standard widths twelfths modifiers were added</p>
<div class="c-dim m-w-12tg32">12tg32 (same as 32t)</div>
<div class="c-dim m-w-12t">12t</div>
<div class="c-dim m-w-11tg32">11tg32</div>
<div class="c-dim m-w-11t">11t</div>
<div class="c-dim m-w-10tg32">10tg32</div>
<div class="c-dim m-w-10t">10t</div>
<div class="c-dim m-w-9tg32">9tg32</div>
<div class="c-dim m-w-9t">9t</div>
<div class="c-dim m-w-8tg32">8tg32</div>
<div class="c-dim m-w-8t">8t</div>
<div class="c-dim m-w-7tg32">7tg32</div>
<div class="c-dim m-w-7t">7t</div>
<div class="c-dim m-w-6tg32">6tg32</div>
<div class="c-dim m-w-6t">6t</div>
<div class="c-dim m-w-5tg32">5tg32</div>
<div class="c-dim m-w-5t">5t</div>
<div class="c-dim m-w-4tg32">4tg32</div>
<div class="c-dim m-w-4t">4t</div>
<div class="c-dim m-w-3tg32">3tg32</div>
<div class="c-dim m-w-3t">3t</div>
<div class="c-dim m-w-2tg32">2tg32</div>
<div class="c-dim m-w-2t">2t</div>
<div class="c-dim m-w-1tg32">1tg32</div>
<div class="c-dim m-w-1t">1t</div>

<p>For convenience purpose, additional percentage width is set:</p>
<div class="c-dim m-w-20pcg32">20pcg32</div>
<div class="c-dim m-w-20pc">20pc</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
    }
    div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
        border-bottom: var(--goafe-border-thin-primary-500);
    }
    [class*="tg32"] { margin-top: 1em }
</style>

Aspect ratios

Component c-dim with modifier m-ar-{aspect_ratio_name} applies specified aspect ration on the element as follows: aspect-ratio: {aspect_ratio_value}.

<div class="c-dim m-ar-16_9">16:9</div>
<div class="c-dim m-ar-16_10">16:10</div>
<div class="c-dim m-ar-4_3">4:3</div>
<div class="c-dim m-ar-1_1">1:1</div>
<div class="c-dim m-ar-2_1">2:1</div>
<!-- DEMO ONLY -->
<style>
    body {
        background-color: var(--goafe-color-support-success-500);
        padding: 1em;
    }
    div {
        background-color: var(--goafe-color-neutral-900);   
        width: 30%;
        margin-bottom: 1em;
    }
</style>

Overflow

Component c-dim with the following modifiers adjusts overflow:

m-o-auto Automatic scrollbars if content exceeds container.
m-o-hidden Hides scrollbars.

<p class="c-dim m-o-auto">
    Ea consetetur sit elitr takimata eos invidunt. Sed sed sed erat duo rebum et erat ipsum aliquyam, accusam ipsum amet.
</p>
<p class="c-dim m-o-hidden">
    Ea consetetur sit elitr takimata eos invidunt. Sed sed sed erat duo rebum et erat ipsum aliquyam, accusam ipsum amet.
</p>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
        background-color: var(--goafe-color-support-success-500);
    }
    p {
        white-space: nowrap;
        padding-bottom: 2em;
        background-color: var(--goafe-color-neutral-900);
    }
</style>

Grow

Intended to be used on flexbox items of flex component..

Component c-dim with modifier m-grow applies flex-grow: 1 on specified element.

<div class="c-flex">
    <div class="c-dim m-grow">First item</div>
    <div>Second item</div>
</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
        background-color: var(--goafe-color-support-success-500);
    }
    div > div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
    }
</style>

Break after

Intended to be used on flexbox items of flex component..

Component c-dim with modifier m-ba-always applies break-after: always on specified element after which it wraps in flexbox.

<div class="c-flex">
    <div class="c-dim m-ba-always">First item</div>
    <div>Second item</div>
    <div class="c-dim m-ba-always">Third item</div>
    <div>Fourth item</div>
    <div>Fifth item</div>
    <div>Sixth item</div>
</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
        background-color: var(--goafe-color-support-success-500);
    }
    div > div {
        background-color: var(--goafe-color-neutral-900);
        border-right: var(--goafe-border-thin-primary-500);
    }
</style>

Order

Component c-dim with the following modifiers adjusts flex item order:

m-order--1 Sets order: -1.

<p class="c-flex">
    <span>The first span</span>
    <span class="c-dim m-order--1">
        The second is displayed as the first
    </span>
</p>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 1em;
        background-color: var(--goafe-color-support-success-500);
    }
    p {
        background-color: var(--goafe-color-neutral-900);
    }
    p > span {
        padding: 1em;
        border: 1px dotted black
    }
</style>