@djx/text

A text component to simplify the styling process

Installation

npm install --save @djx/text

Usage

Make sure you import the component somewehere in your application first:

import '@djx/text';

You can then use it like normal web components in your markup:

<djx-text preset="h1">
  <h1>Headline 1</h1>
</djx-text>

<djx-text size="lg" perks="arial bold upper">
  <h2>Headline 1</h2>
</djx-text>

To define perks, presets and sizes, you simply define the required build-time variables:

DJX_TEXT = {
  "sizes": {
    "xs": [ 12, 14 ],
    "md": [ 14, 18 ]
  },
  "perks": {
    "arial": {
      "font-family": "Arial"
    },
    "bold": {
      "font-weight": "bold"
    },
    "upper": {
      "text-transform": "uppercase"
    }
  },
  "presets": {
    "h1": {
      "size": "xl1",
      "perks": ["arial", "bold", "upper"]
    }
  }
}

Variables

| Name | Description | Default | | --------- | ------------- | ------- | | DJX_TEXT.sizes | A map of sizes | {} | | DJX_TEXT.perks | A map of perks | {} | | DJX_TEXT.presets | A map of presets | {} |

For more variables see here