IH NG CSS Utility

This is like a plug-and-play library that provides multiple directives. Each directive is a CSS helper to set CSS on DOM dynamically and on run time.

Features

• Set CSS dynamically on run time.
• No need of bootstrap, tailwind, css file, scss functions, or material utility classes

Available Utility Directives

• ihPM For setting padding or margin or both
• ihBR For setting border radius
• ihHW For setting height or width or both
• ihFW For setting Font Weight
• ihFS For setting Font Size
• ihFlex For setting Flex properties

Other utilities are in Queue, Hopefully, you'll get 2 utilities per minor version they are coming on every weekend.

How to Install

npm i ih-ng-css-utility

OR

pnpm add ih-ng-css-utility

Setup

import { IHCssUtilityModule } from 'ih-ng-css-utility';

@NgModule({
  imports: [
    ...,

    IHCssUtilityModule,
  ],
  ...
})
class YourModule {}

How to Use

// [ihPM] directive for providing padding and margin // here 'pValue' is for padding value and 'mValue' is for margin value
<div ihPM pValue="1rem" mValue="1rem"></div>

// you can provide value for 'top', 'right', 'bottom', and 'left' in CSS way, see below
<div ihPM pValue="1rem 1rem 1rem 1rem" mValue="1rem 1rem"></div>

// [ihBR] directive for providing border-radius
<div ihBR="1rem"></div>

// [ihFW] directive for providing font-weight
<span ihFW="600">Some Text Here</span>

// [ihFS] directive for providing font-size
<span ihFS="large">Some Text Here</span>

// [ihHW] directive for providing width or height
<div ihHW hValue="1rem" wValue="10px"></div>

// [ihFlex] directive for display Flex and its properties
<div ihFlex flexDirection="row" justifyContent="space-between"></div>

Options

If you are curios about Interfaces here is the Reference

type UnitType = "px" | "em" | "rem" | "%" | "pt" | "vw" | "vh" | "";

/**
 * This is the type for input value just like CSS accept value for border-radios
 */
export type BorderRadiusValueType = `${number}${UnitType}` | `${number}${UnitType} ${number}${UnitType}` | `${number}${UnitType} ${number}${UnitType} ${number}${UnitType}` | `${number}${UnitType} ${number}${UnitType} ${number}${UnitType} ${number}${UnitType}`;

/**
 * This is the type for input value just like CSS accept value for padding, margin, border-radios
 */
export type PaddingMarginValueType = BorderRadiusValueType | `-${number}${UnitType}` | `-${number}${UnitType} -${number}${UnitType}` | `-${number}${UnitType} -${number}${UnitType} -${number}${UnitType}` | `-${number}${UnitType} -${number}${UnitType} -${number}${UnitType} -${number}${UnitType}`;

/**
 * This is the type for input value just like CSS accept value for height and width
 */
export type HeightWidthValueType = `${number}${UnitType}`;

/**
 * This is the type for input value just like CSS accept value for font weight
 */
export type FontWeightValueType = "unset" | "normal" | "revert" | "lighter" | "initial" | "inherit" | "bold" | "bolder" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";

/**
 * This is the type for input value just like CSS accept value for font size
 */
export type FontSizeValueType = `${number}${UnitType}` | "initial" | "inherit" | "unset" | "medium" | "revert" | "large" | "larger" | "x-large" | "xx-large" | "xxx-large" | "small" | "smaller" | "x-small" | "xx-small";

Reach me out

• LinkedIn
• GitHub