https://github.com/tjhillard/steller-css/blob/master/example-theme.scss#L52

lg value should be 1.5rem

Transition Classes

Config & Defaults

$steller-transition-properties: (
  'all',
  'width',
  'height',
  'transform',
  'opacity',
  'border',
  'background',
  'background-color',
  'box-shadow',
  'margin',
  'padding',
  'visibility',
) !default;

I tried adding the more commonly transitioned properties to but don't want the list to be too big by default. Feedback welcome here. Full possible list.

Class Syntax

There are 3 available transition classes.

Property: transition-{property}
Property to transition, needs to be included in $steller-transition-properties.

Duration: transition-duration-{duration}
Duration of transition, needs to be included in $steller-durations.

Timing Function: transition-timing-{timing}
Any of the available CSS transition timing functions (ease, linear, etc)

Examples

<div class="transition-all transition-duration-normal transition-timing-ease-in-out" />

transition: all duration('normal') ease-in-out;

<div class="transition-background transition-duration-extra-slow transition-timing-ease" />

transition: background duration('extra-slow') ease;

<div class="transition-opacity transition-duration-fast transition-timing-linear" />

transition: opacity duration('fast') linear;

Future Iterations

• Could have a config variable for custom transition timing functions.

Want to learn more about functional/atomic/utility-frist CSS?

Also, you stole my code