Functional CSS framework

Atomic CSS class should apply one visual effect, and apply that every single time. So your CSS becomes made up of many small parts, that can be composed to give a specific visual effect.

Install

npm install functional-css-framework

Usage

Webpack with JS ES6 / TypeScript

import 'functional-css-framework'

Webpack with ES5

require('functional-css-framework')

With CSS/SCSS

@import '~functional-css-framework'

Without Bundle

 <link href="./node_modules/functional-css/dist/functional-css.min.css" rel="stylesheet" media="all" >

Integrate with React

require('functional-css/dist/index.min.css')
...
export class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = { theme: 'dark' }
  }

  switchTheme() {
    this.setState(state => ({theme: state.theme === 'dark' ? 'light' : 'dark'}))
  }

  render() {
    return <div className={`${this.state.theme}`}>
      <i className="ion-ios-color-palette"
        onClick={this.switchTheme.bind(this)} />
    </div>
  }
}