Utilities

Mixins

Saltside UI exposes a set of useful mixins that can (and should) be used in applications on it. This section describes those mixins.

Only

The only-mixins are exclusive, meaning that they exclude platforms not targeted by them. E.g. wrapping some styling rules in the only-xs mixin will ensure that they are only delivered to the xs platform.

The output from using any of these mixins is a media query targeting the specified platform.

• .only-xs(@rules)

• .only-sm(@rules)

• .only-lg(@rules)

From/Until

The output from using any of these mixins is a media query targeting xs and sm or sm and lg. There is no mixin that targets xs and lg since that is not currently perceived as a use case that will occur.

• .from-sm(@rules) styles wrapped in this mixin will be delivered to platforms sm and lg.

• .until-lg(@rules) styles are delivered to xs and sm.

Site-only

Site-only mixins can be used to deliver styles only to specific sites.

• .only-ikman(@rules)

• .only-tonaton(@rules)

• .only-bikroy(@rules)

• .only-dekho(@rules)

These mixins will output a tag containingbody[data-market='tonaton'] (or whichever market was specified) and insert the rules inside that body selector.

Locale-only

Locale-only mixins ensure that styles are delivered only to a certain locale and site. Please note that english is an exception to this rule, and is not restricted to one site! Therefore, keep any english-only styles to a minimum, unless further limitations have been applied by combining the locale-only mixin with a site-only mixin. Examples explaning this can be found below.

• .only-si(@rules)

• .only-ta(@rules)

• .only-bn(@rules)

• .only-en(@rules) Please note that styles wrapped by this mixin are still delivered to all sites unless restricted by site-only mixins!

Behavior of the locale mixins, with examples:

.only-si( { background: #ccc; } )

will output

html[lang='si'] body[data-market='ikman'] {
  background: #ccc;
}

the selector above ensures, after our asset compilation, that the style is only delivered to ikman users, whereas

.only-en( { background: #ccc; } )

will output

html[lang='en'] {
  background: #ccc;
}

the selector above can not be delivered to only one site since all sites are available in english. However, it is possible to deliver english-only styles to a specific site by combining the locale and site mixins:

.only-en({
  .only-ikman({
    background: green;
  });
});

this will output

html[lang='en'] body[data-market='ikman'] {
  background: green;
}

The background styling will then be delivered to all ikman locales, but only used on the english version.