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
sm	From 0px to 767px
md	From 768px to 1023px
lg	From 1024px to 1439px
xl	From 1440px

    <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="md,lg,xl">I appear only on <strong>sm</strong> screen size</p>
    <p u-none="sm,lg,xl">I appear only on <strong>md</strong> screen size</p>
    <p u-none="sm,md,xl">I appear only on <strong>lg</strong> screen size</p>
    <p u-none="sm,md,lg">I appear only on <strong>xl</strong> screen size</p>
    <!-- DEMO ONLY -->
    <style>body{padding:1em}</style>