polythene-core-css.md

polythene-core-css: CSS tools

• styler: Wrapper around j2c to add styles to the head
• mixin: CSS mixins
• flex: CSS flex mixins
• Layout classes: Provides common and flexbox classes

• Styler
  • Styler functions
• Mixins
  • Mixin functions
• Flexbox mixins
  • Using CSS-in-JS
  • CSS files
  • Flexbox mixin functions

Styler

import { styler } from "polythene-core-css"

const styles = [
  {
    ".info": {
      "background-color": "#FF1744"
    }
  }
]

styler.add("app", styles)

Styler functions

• add
• addToDocument
• remove
• styleComponent

Mixins

import { mixin } from "polythene-core-css"

const styles = [{
  ".title": [
    mixin.ellipsis(1)
  ]
}]

Mixin functions

• clearfix
• createStyles
• defaultTransition
• ellipsis
• fit
• sticky
• vendorize

Flexbox mixins

Using CSS-in-JS

import { flex } from "polythene-core-css"

const styles = [{
  ".horizontal-blocks": [
    flex.layoutHorizontal
  ]
}]

CSS files

import { flex } from "polythene-core-css"

Flexbox mixin functions

• flex
• flexAuto
• flexAutoVertical
• flexIndex
• flexGrow
• layout
• layoutAroundJustified
• layoutCenter
• layoutCenterCenter
• layoutCenterJustified
• layoutEnd
• layoutEndJustified
• layoutHorizontal
• layoutHorizontalReverse
• layoutInline
• layoutJustified
• layoutStart
• layoutStartJustified
• layoutVertical
• layoutVerticalReverse
• layoutWrap
• layoutWrapReverse
• selfCenter
• selfEnd
• selfStart
• selfStretch