class-ic

class-ic

Automatic injection of css Classes In Components through props.

Getting Started

The 2.0 (organized) version is here. I've started to clean repo and create examples. :-)

Installing

npm install --save class-ic

Using

Style your components using BEM methodology with helper mixins:

@import "~class-ic/dist/sass";

@include block(button){
  background-color: gray;

  @include modifier(large){
    width: 100%;
  }

  // the second param is the prop name
  @include modifier(success, color){
    background-color: green;
  }

  @include element(text){
    color: black;

    // you can group modifiers in a prop, passing true to second param
    @include prop(color){
      @include modifier(warning, true){
        color: yellow;
      }

      @include modifier(danger, true){
        color: red;
      }
    }
  }
}

Create your React component, import your sass through css-modules and create a Classic Component:

import React, { Component } from "react";
import classic from "class-ic";

import styles from "./Button.module.scss";

class Button extends Component {
  render() {
    return (
      <div classicBlock>
        <p classicElement="text">{this.props.children}</p>
      </div>
    );
  }
}

export default classic(Button, styles);

When you will use your new created component:

<Button large color="danger">
  My Class-ic Button
</Button>

Structure

The api above create a component that accept this props:

• large (boolean);
• color (one of "success", "warning", "danger")

And the component itself has:

• block (.button)
• element (.text)

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Marcelo Junior - marceloadsj

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Inspired by:

• styled components
• CSS Modules
• React CSS Modules
• BEM methodology
• React
• Sass