Strawberry NPM

Strawberry is a Sass framework that makes the life easier for creating, customizing and reusing your own CSS components.

Quick links

Get Started, Docs, Plunker Template, Project Status

Usage

Step 1

Create your component.

@include new-component(
  $name: 'my-component', 
  $selector: '.my-component', 
  $declarations: (
    'background-color': white,
    'color': black
    )
  ) { 
  @include dynamic {
    background-color: get('background-color');
    color: get('color');
  }
}

Step 2

Edit your component or create variants of it in the theme file.

@include component(
  $name: 'my-component',
  $declarations: (
    'background-color': #b71c1c,
    'color': white
    )
  ) {
  @include component-variant(
    $name: 'my-component-variant',
    $selector: '.my-variant',
    $declarations: (
      'background-color': #76ff03,
      'color': black
      )
  );
}

Step 3

Use your component and its variants in your application.

<div class="my-component">MY COMPONENT</div>
<div class="my-component my-variant">MY COMPONENT'S VARIANT</div>

Features

Easy to Use	Fast & Effective	Built to Last
The simplicity is a priority and it's why Strawberry are built to be easy to use and easy to read.	Outputs only the needed css to make your application smaller and faster	Built with the popular Sass language and thinked to work with the very new technologies.