@djx/text

0.2.0 • Public • Published

@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

Readme

Keywords

Package Sidebar

Install

npm i @djx/text

Weekly Downloads

0

Version

0.2.0

License

ISC

Unpacked Size

2.76 kB

Total Files

3

Last publish

Collaborators

  • dorfjungs.account
  • schmidtsonian
  • joshuakeck