JASS

A Drupal theme based on the utility-first CSS Framework JASS.

JASS · "play with Jasm CSS classes conducted by SASS."

JASS is a simple utility first type of "describe your style as class" CSS framework with no stylesheet editing and no recompiling for new themes in mind. The Development started in 2012 formerly named as QCSS and has been refactored in 2023 from a LESS based to a SASS based framework and renamed to JASS. Being cross browser compatible down to 2009 while using SASS (SCSS) for the generator (not required to style a theme).

An easy out-of-the-box styling layer from the bottom up by using a creative class group naming approach, easy to learn and to reuse for each project, with a footprint of only 60kb by default settings. And with inheritance support for child elements, especially good for content management framework themes, where inner elements are sometimes hard to reach. In the combination of JASS and Twig there is no CSS editing required.

A complete different theming attempt where the use of HTML class attributes plays the center part. And apart from the twig templates to edit, Drupal modules which enable the admin to add classes everywhere, can bring a complete new flexibilty to the way of theme styling on the fly.

Supported class naming components:

• border width, radius, directions e.g.: br1, bt3, r2, r4)
• extensive color schemes & codes e.g.: c1,c2 or c46F, cDA7)
• responsive layouts (without flex and grid to be accessible back to 2009)
• shadow classes based on color presets
• spacing tools with directions (choose your rythm e.g.: m1,m2,p1,p2)
• advanced typography (most extensive typo classes available in web)
• extra tools (anything needed in combination with other components like floats, positions, order, etc.)
• optional override-switch per component (!important), default: no. (off)
• optional child target setting per component, default: no. (off)
• optional long/short class name setting per component, default: no. (off)
• optional print style setting per component, default: no. (off)

NOTE: JASS is not to be confused with JSS (which allows you to use JavaScript to describe CSS styles)