6 Min.x, pro, cornerstone

Themeco Stylesheets

This is a technical summary of what is offered by Themeco Stylesheets (TSS).

Overview
Quick Start
Operators
Variables
Tags
Functions
Mixins
Cornerstone 5-6 Element Migration Guide

Overview

Themeco Stylesheets or TSS for short, is Themeco's solution for generating dynamic styles for elements. This product was written with generating as little style code as possible, and the features you see will help you do just that. Let's get into it.

Keep In Mind

This is not like your typical post processors (SASS, LESS, PostCSS), nor do we intend to add support for CSS post processing.
This is not a full featured expression parser. You won't be able to use parentheses to establish order of operations. The best way to combine conditions may be to wrap a group of properties in multiple @if statements.
Vanilla CSS is always valid.
The style template conditions are not like control conditions
This part of the API is subject to change in the future. The generated output is an area we've observed could be more optimized for front end performance. It's possible that when that optimization happens that the syntax could be slightly altered. Any breaking changes will be clearly notated in our release notes.

Quick Start

The following TSS will demonstrate the basics of creating a TSS template for a custom element.

// & gets templated into the generated class name
// Similar to a nested SCSS statement
& {
  // Grab the current basepoint and set a variable
  $myElementProperty: get(myElementProperty);

  // Control flow
  @if not empty-or-transparent($myElementProperty) or $myElementProperty == testValue {
    color: $myElementProperty;
  } @else {
    color: black;
  }

  // Add in margin properties based on our element property `margin`
  @include margin(get-base(margin), get(margin));

  // Basic Loop
  @each $selector in $selectors {
    #{$selector} {
      color: black;
    }
  }
}

Operators

Operator	Description
`==`	Evaluates to `true` when operands are equal to one another.
`!=`	Evaluates to `true` when operands are not equal to one another.
`>`	Evaluates to `true` when the left operand is greater than the right.
`>=`	Evaluates to `true` when the left operand is greater than or equal to the right.
`<`	Evaluates to `true` when the left operand is less than the right.
`<=`	Evaluates to `true` when the left operand is less than or equal to the right.
`or`	Evaluates to `true` when either the left OR right expression (or value) is considered `true`
`and`	Evaluates to `true` when both the left AND right expression (or value) is considered `true`

Blank strings, CSS values that are zero with any unit, and the keyword none are considered empty.

Variables

Variables can be set using the following syntax.

$myVariable: test;

And can be grabbed using the following.

border: $myVariable;

Operator	Description
`@if`	Conditional render the block.
`@else if`	Conditional render the block if the `@if` statement did not pass, but this `@if` statement does.
`@else`	Conditional render the block if the `@if` statement did not pass.
`@include`	Includes a mixin. See Mixins section.
`@each`	Iterator loop. `@each $selector in $selectors {}`

Functions

Basic functions

Function Name	Description
`get(name)`	Get current element property. Will also output a breakpoint
`get-base(name)`	Get element property at the default breakpoint. Useful for checking if the base is different from the current breakpoint
`is-set(name)`	Is the element property changed from default value. Useful if you have default CSS styling that can be shared.
`empty(name)`	Is the element property empty.
`empty-or-transparent(value)`	Is the value empty or does the value `==` `transparent`.
`changed(defaultName, value, baseValue)`	Is the element property changed from default and base breakpoint.
`to-bool(value)`	Internally uses an `@if` tag to check if the value is a truthy value.
`is-transparent(value)`	Does the value `==` `transparent`.
`maybe-direct-child(value)`	Adds a `>` css selector if value is truthy.

Mixins

Mixins offer a helpful way to do a set of logic multiple times that also output CSS. These headings are a list of all the available mixins in Cornerstone. Here is a sample usage for a mixin.

// This is a sample from our Accordion Element TSS
&.x-acc > .x-acc-item > .x-acc-header {
  // include margin mixin
  @include margin(get-base(accordion_header_margin), get(accordion_header_margin));

  // Note the property names can also be specified by name
  // Although the first way is the preferred
  @include border(
    $width: get(accordion_header_border_width),
    $style: get(accordion_header_border_style),
    $base: get(accordion_header_border_color),
    $alt: get(accordion_header_border_color_alt)
  );
}

Box Mixins

These are all mixins are all related to Box properties and will generate less CSS and preprocess more to do so.

@include border( $width, $style, $base, $alt, $colorOnly: false, $fallback: false );

@include border-alt( $width, $style, $base, $alt );

@include box-prop( $prop, $base, $current, $fallback: '_off' );

@include margin( $base, $current, $fallback );

@include padding( $base, $current, $fallback );

@include border-radius( $base, $current, $fallback );

Color Mixins

These are all helper mixins related to color properties. Most of these check if the alt is set and will display a transparent value if alt value is set.

// Background color output
// If transparent breakpoint
// checks if base breakpoint is not transparent
// else if the alt is not empty then it always
// outputs the color
@include background-color( $key, $altKey );

@include background-color-not-transparent-or-empty( $base, $alt );

@include background-color-alt( $base, $alt );

@include text-color( $base, $alt );

@include text-color-alt( $base, $alt );

Cornerstone 5-6 Element Migration Guide

@since Cornerstone 7.3.0 / Pro 6.3.0

The following changes were made to the TSS system after Cornerstone 6. The following changes are also changed on the fly to support older elements without changing code.

All variables can be grabbed via get(my_property_name). This is needed for breakpoint support
.$_el was changed to &
!== is now !=
=== is now ==
@unless is now written as @if not
?? is now the empty() function
|| is now or
&& is now and

See something inaccurate? Let us know