What Is Termeh

Termeh is a Modern, responsive, and modular CSS framework for scalable UIs. It has no external dependencies and is written entirely in Sass. Termeh provides advanced tools for managing contrast, colors, palettes, and responsive design, making it a powerful choice for building flexible and accessible interfaces.

This library includes a wide range of components and predefined styles for various parts of the UI, enabling faster and more consistent development.

Installation

npm

npm install -D termeh

yarn

yarn add termeh -D

pnpm

pnpm add -D termeh

Usage

To use it in your project, simply import the termeh in your Sass file and use the termeh functions and components.

app.scss

@use "termeh";

// Define variables
@include termeh.define-palette("primary", #2196f3);

// use components
@include termeh.use-generic();
@include termeh.use-container();
@include termeh.use-grid(
  $gaps: (
    "mini" "normal" "large",
  )
);
@include termeh.use-button(
  $colors: (
    "primary" "green" "blue",
  )
);

External Usage

To use Termeh in a custom component, import Termeh’s core functionality, then include your component in your app.

component.scss

@use "termeh";

@mixin use-my-component(){
  $fallback-background: termeh.var("base", "section")
  $background: termeh.var("my-component", "background", $fallback-background);

  @at-root {
    .my-component{
      @include termeh.control();
      background-color: $background;
    }
  }
}

app.scss

@use "termeh";
@use "my-component";

// Global termeh definitio and usages
@include termeh.define-palette("primary", #2196f3);
// ...

// use custom component
@include my-component.use-my-component();