Native Preset
Native (default) preset is a prepared configuration for Stylify CSS that consist of predefined macro, screens and helpers. The code behind the NativePreset can be found in the @stylify/stylify repository.
Inside the preset
Predefined macro
This macro allows you to use CSS-like syntax matching 678 CSS properties available in Chrome, Safari, Mozilla, Opera and Edge. Check out the syntax guide.
List of all available selectors can be found in the @stylify/stylify repository
Screens
There are static shortcuts like tosm, sm, md, ... and dynamic screens like minw, maxw, rng, ... that generates media queries based on the value you choose when using them. The values and units you use are up to you.
Don’t forget that screens can be combined using logical operands && (and) and || (or) like maxw320px&&maxh667px:color:blue.
| Pantalla | Valor | Ejemplo |
|---|---|---|
| tosm | @media (max-width: 639px) | tosm:color:blue |
| sm | @media (min-width: 640px) | sm:color:blue |
| tomd | @media (max-width: 767px) | tomd:color:blue |
| md | @media (min-width: 768px) | md:color:blue |
| tolg | @media (max-width: 1023px) | tolg:color:blue |
| lg | @media (min-width: 1024px) | lg:color:blue |
| toxl | @media (max-width: 1279px) | toxl:color:blue |
| xl | @media (min-width: 1280x) | xl:color:blue |
| to2xl | @media (max-width: 1535px) | to2xl:color:blue |
| 2xl | @media (min-width: 1536px) | 2xl:color:blue |
| to3xl | @media (max-width: 1919px) | to3xl:color:blue |
| 3xl | @media (min-width: 1920px) | 3xl:color:blue |
| minw | @media (min-width: custom) | minw640px:color:blue |
| maxw | @media (max-width: custom) | maxw639px:color:blue |
| minh | @media (min-height: custom) | minh668px:color:blue |
| maxh | @media (max-height: custom) | maxh667px:color:blue |
| rng | @media (min-width: custom) and @media(max-width: custom) | rng640px-1023px:color:blue |
| screen | @media screen | screen:color:blue |
| onlyScreen | @media only screen | onlyScreen:color:blue |
| portrait | @media (orientation: portrait) | portrait:color:blue |
| landscape | @media (orientation: landscape) | landscape:color:blue |
| dark | @media (prefers-color-scheme: dark) | dark:color:blue |
| light | @media (prefers-color-scheme: light) | light:color:blue |
Sorting
Screens are automaticaly sorted. The sorting function can be changed (see configuration).
desc - from largest to smallest, desktop first approach
- without media query
- min-width => asc
- min-height => asc
- max-width => desc
- max-height => desc
- min-device-width => asc
- min-device-height => asc
- max-device-width => desc
- max-device-height => desc
- light mode => according to above
- dark mode => according to above
- print => according to above
- others
Helpers
Native preset ships with a few helpers that can simplify the development process.
When passing an argument that contains ,, you must add quotes to that argument using ^ (^ is replaced by quote, see syntax page).
When passing an argument into the helper, you can use variables like $myVariable.
Lighten color
This helper expects a color in a hex or rgb format and and makes the color lighter. The color is returned in a hex format.
color:lighten($myColor,10)
color:lighten(#222,10)
color:lighten(^rgb(0,0,0)^,10)Darken color
This helper expects a color in a hex or rgb format and and makes the color darker. The color is returned in a hex format.
color:darken(#eee,10)
color:darken(^rgb(255,255,255)^,10)Color to RGB
This helper expects a color in a hex or rgb format. It returns in the rgb format. If alpha canal is passed as second argument, it returns the rgba format.
color:colorToRgb(#000) => is converted into rgba(0, 0, 0);
color:colorToRgb(#000,0.1) => is converted into rgba(0, 0, 0, 0.1)
color:colorToRgb(^rgb(0,0,0)^,0.1) => is converted into rgba(0, 0, 0, 0.1)
