Utilities

This section contains the most useful utilities provided in the UI library.

Responsive on/off

Elements can be shown/hidden on different screen sizes using .on-SIZE/.off-SIZE classes.

Toggle source (Jade)
.on-xs Visible on extra small screens
.on-sm Visible on small screens
.on-lg Visible on large screens
br
.off-xs Hidden on extra small screens
.off-sm Hidden on small screens
.off-lg Hidden on large screens

Responsive on/off inline blocks

Elements can be shown/hidden on different screen sizes using .on-SIZE-inline/.off-SIZE classes.

Toggle source (Jade)
span.on-xs-inline Visible on extra small screens
span.on-sm-inline Visible on small screens
span.on-lg-inline Visible on large screens

Dividers

Dividers act as panel splitters. They can be used with any element, but the main intended use case is to split a panel, giving it a section of body background color and a thick border to mimic the end of a panel.

Toggle source (Jade)
+simple-panel()
	h2 dividers are available on xs and sm sizes.
	+divider()
	h3 This secton is divided
	p And the section below as well.
	+divider().is-s
	h3 This section is also divided, but this divier has extra padding and is therefore slimmer.
	p Yep. Sure is.

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.