Documentation will be updated after Scripts Organizer version 3 is released.

Get Oxygen Breakpoints as CSS Variables

If you want to write external CSS or SCSS the easiest way to sync the media queries between the oxygen and an external CSS is through the variables.

You will need to get all variables into the header under the root. The output should look like this:

<style type='text/css'> :root { --desktop: 1680; --tablet: 1280; --phone-landscape: 900; --phone-portrait: 600; } </style>
Code language: HTML, XML (xml)

SCSS Example when this can be handy

// Breakpoints $desktop: var(--desktop); $tablet: var(--tablet); $mobile_p: var(--phone-portrait); $mobile: var(--phone-landscape); // Breakpoints Mixin @mixin mobile { @media (max-width: $mobile) { @content; } } // Typography h1{ font-family: 'Title'; line-height: 1.2; font-size: 80px; @include mobile{ font-size: 40px; } }
Code language: SCSS (scss)

Code bellow will inject variables into root of your page.

This content is visible only for owners of

Scripts Organizer.

Please login to see the content.

Marko Krstić

Owner of dPlugins. Started with design in 1999. Currently, besides dPlugins, he is an Art director at Scandic Hotels, delivering design for the Web and the App for 270 Scandinavian hotels.