Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


An OOCSS Sass framework for rapidly creating organised, responsive, and consistent user interfaces. Originally based off an early fork of iotaCSS, stemCSS has grown into it's own thing, with a focus on code reuse and flexible programatically created utilities.

Getting Started

  1. Download the latest release - this link is TODO when v1 is done!
$ curl -o
  1. Get the contents of it into an assets folder in your project. E.g.
$ unzip -q
$ rm -r
$ mkdir -p assets/scss
$ cp -r stemCSS-master/* assets/scss/
$ rm -r stemCSS-master/
  1. Use something like gulp + gulp-sass to transpile the scss.


Class or placeholder selectors that produces a single value: property.

.u-color-black { color: black; }
.u-flex { display: flex; }
.u-pos-absolute { position: absolute; }

In some circumstances - like mx (margin-left, margin-right), a utility produces two or more properties.

.u-mx-auto {
  margin-left: auto;
  margin-right: auto;

Utilities are "created" by passing a sass map (hence the double brackets) into the make-utility mixin:

@include make-utility((...));

The items in the map can include an alias to determine the name of the utility, a class flag which creates the utility as a class which is always included in the transpiled CSS and can be used in the HTML (rather than just a placeholder which cannot be used in the HTML, and is only in the transpiled CSS if it gets extended), and a set of CSS properties.

@include make-utility((
  alias: 'mx-auto',
  class: true,
  margin-left: auto,
  margin-right: auto

If an alias is not included in the sass map, the first CSS property and value is used as the name of the utility, e.g.

@include make-utility((
  height: 1px

... can be used with:

@extend %u-height-1px;

See examples in the pre-existing utilties: /utilties/*.scss.


Layouts objects - grids, containers, and helpful sets of classes like aspect-ratio etc.
Never visual - you can't picture an object because it has no colours. If it has colours - it's probably a component.
Objects typically @extend utilities.

.o-container {
  @extend .u-mx-auto;
  width: 90vw;


Visual components in your design system. Header, Button, Footer, Hero etc.
Follow the BEM methodology for their children where appropriate.

.c-button {
  @extend .u-flex;
  @extend .u-bg-color-black;
  @extend .u-color-white;

  &__icon {
    @extend .u-pos-absolute;
    @extend .u-left-50pc;
    transform: translateX(-50%);


Defining Breakpoints

These are defined in settings/_breakpoints, which includes:

General breakpoints as sass variables - can simply be used anywhere you need them!

$breakpoint-minimum: 320px;
$breakpoint-large: 1400px;

Breakpoints sass map (get merged with the following map, sans any special generation)

$global-breakpoints: (
  landscape: 'screen and (orientation: landscape)',
  portrait: 'screen and (orientation: portrait)'

Breakpoints sass map with automatic --from and --upto generation

$global-breakpoints: map-merge($global-breakpoints, make-width-breakpoints((
  small: 400px,
  medium: 800px,
  large: 1200px,

Using Breakpoints

iotaCSS style
@include breakpoint(from-medium) {
  color: red;
stemCSS style
@extend %u-color-red--from-medium;

The main advantage of using "stemCSS style" breakpoints are that they are extending placeholders, rather than requiring additional individual CSS rules (i.e. you cannot @extend a utility from within a standard iotaCSS breakpoint).

If, for example for consistency, you wanted to restrict the available widths to only 0%, 50%, or 100%, and had created those options in the _width.scss utility, then using @extend %u-width-60pc--from-medium would fail, whereas @include breakpoint(from-medium) { width: 60% } would obviously not.


Text and background color utilities and are very similar to iotaCSS's. Colors are defined in settings/_colors.scss. E.g:

$color-very-dark: #111111;
$auto-colors: (
  'black': $color-very-dark

Allows you to use both: @extend %u-color-black; and @extend %u-bg-color-black;


Build the stem - don't repeat yourself, don't unset yourself.








No releases published


No packages published