Screen sizes

Screen sizes tokens definitions

Every responsive component and utility are based on the following break point values :

Break point name	Screen width range
xs	From 0 to 608 px
sm	From 608 px to 896 px
md	From 896 px to 1288 px
lg	From 1288 px to 1576 px
xl	From 1576 px to infinite

    <p class="u-none--xl">I disappear only on <strong>xl</strong> screen width</p>
    <p u-none="xl">I disappear only on <strong>xl</strong> screen width</p>
    <p class="u-none--lg">I disappear only on <strong>lg</strong> screen width</p>
    <p u-none="lg">I disappear only on <strong>lg</strong> screen width</p>
    <p class="u-none--md">I disappear only on <strong>md</strong> screen width</p>
    <p u-none="md">I disappear only on <strong>md</strong> screen width</p>
    <p class="u-none--sm">I disappear only on <strong>sm</strong> screen width</p>
    <p u-none="sm">I disappear only on <strong>sm</strong> screen width</p>
    <p u-none="xs,md,lg,xl">I appear only on <strong>sm</strong> screen size</p>
    <p u-none="xs,sm,lg,xl">I appear only on <strong>md</strong> screen size</p>
    <p u-none="xs,sm,md,xl">I appear only on <strong>lg</strong> screen size</p>
    <p u-none="xs,sm,md,lg">I appear only on <strong>xl</strong> screen size</p>
    <p u-none="sm,md,lg,xl">I appear only on <strong>xs</strong> screen width</p>
    <!-- DEMO ONLY -->
    <style>body{padding:1em}</style>