@termehui/termeh v1.0.5

Termeh

Modern modular CSS framework contains a set of useful function, mixin and mobile first styles.

Installation

Caution: this package only install as SCSS dependency and can't use as css directly!

npm i -D @termehui/termeh

Usage

Note import priority is important!

// required
@use "@termehui/termeh/termeh.scss" as T;
@use "vars"; // local vars file
@use "@termehui/termeh/styles.scss"; // contains reset and global styling (heading, image, table)
// optional ...
@use "@termehui/termeh/components/all.scss";

Structure

You can use all.scss file inside sub-directory to import all directory content.

• termeh.scss (core functions)
• styles.scss (base styles)
• components
  • all.scss
  • button.scss
  • card.scss
  • header.scss
  • icon.scss
  • link.scss
  • meta.scss
  • tag.scss
• form
  • all.scss
  • checkbox.scss
  • field.scss
  • input.scss
  • select.scss
  • textarea.scss
• helpers
  • all.scss
  • attachment.scss
  • layout.scss
  • typography.scss
  • visibility.scss
• layout
  • all.scss
  • breadcrumb.scss
  • components.scss
  • container.scss
  • content.scss
  • gaper.scss
  • grid.scss
  • landscape.scss
  • layout.scss
  • padder.scss

Predefined Variables

Core

// Contrast
@function luminance($color);
@function darkest($color1, $color2);
@function lightest($color1, $color2);
@function contrast-ratio($back, $color);
@function tone($color);
@function contrast($base, $color1, $color2);
@function harmony($base, $color1, $color2);

// Palette
@function palette($color, $variant);

// Breakpoint
// Devices: tablet, desktop, widescreen, fullhd
@function breakpoint($device);
// Names: until-fullhd, until-widescreen, until-desktop, tablet, desktop, widescreen, fullhd, mobile, tablet-only, desktop-only, widescreen-only
@function media-query($name);
@function breakpoints();
@function media-queries($includes: ());
@mixin from($device);
@mixin until($device);
@mixin non-touch();
@mixin touch();
@mixin mobile();
@mixin tablet();
@mixin tablet-only();
@mixin until-desktop();
@mixin desktop();
@mixin desktop-only();
@mixin until-widescreen();
@mixin widescreen();
@mixin widescreen-only();
@mixin until-fullhd();
@mixin fullhd();

// Color
@mixin define-color($name, $color);
@mixin define-palette($name, $color);
// Default Ui Variants: active, active-inverse, light, light-inverse, light-active, light-active-inverse, readable, readable-inverse, mute, mute-inverse, color, color-inverse, decorator, decorator-inverse, overlay
@mixin define-variant($name, $variant, $color);
@function color($name, $inverse: false);
@function variant($name, $variant, $fallback: null);
@function colors($only: ()); // only palette colors

// Fonts
@mixin define-size($name, $size, $iterable: true);
@function size($name);
@function sizes($includes: ());
// Names: lighter, light , normal, medium , semibold, bold , bolder
@function font-weight($name);
@function font-weights($only: ());

// Gaps
@mixin define-gap($name, $gap, $iterable: true);
@function gap($name);
@function gaps($includes: ());

// Units
@mixin define-unit($name, $unit, $iterable: true);
@function unit($name);
@function units($includes: ());

// Var
@mixin define($com, $prop, $v);
@function var($com, $prop, $fallback: null);
@mixin ltr();
@mixin rtl();

// Utils
@function negate($value);
@function half($value);
@mixin unify-parent($child);

// UI
@function shadow($x, $y, $color, $soft: false);
@function control-padding();
@mixin transition($field);
@mixin disabled();
@mixin clearfix();
@mixin overflow-touch();
@mixin locked();
@mixin unselectable();
@mixin selectable();
@mixin placeholder;
@mixin reset();
@mixin control();
@mixin selection($name); // set color selection from registered color
@mixin scrollbar($width, $track: null, $thumb: null, $thumb-hover: null);
@mixin scrollable($color);
@mixin scroll-color($color);
@mixin spinner($size, $color, $width);
@mixin spinner-color($color);
@mixin loader($size, $color, $width);
@mixin loader-color($color);
@mixin overlay($color, $filter);
@mixin marged($lastChild: true); // style :not(:last-child):not(.is-marginless)
@mixin marginless() // remove element margin-bottom
  @mixin padded(); // style :not(.is-paddingless)
@mixin paddingless(); // remove element padding

Base

• hr: is-marginless
• p: is-marginless
• h1-6: is-marginless
• img: is-centered, is-{size}, is-rounded, is-circular
  • Variables image: sizes
• table: is-fullwidth, is-stripped, is-hoverable, is-{color}
  • Variables table: colors
  • Container: .table-container scrollable table wrapper
  • tr: is-even, is-expanded
    • .extra: extra content inside table row to show/hide with .is-expanded modifier
    • th: is-center-aligned, is-right-aligned, is-left-aligned, is-filler, is-multiline, is-sorted, is-sortable, is-asc, is-desc
    • td: is-center-aligned, is-right-aligned, is-left-aligned, is-filler, is-multiline, is-sorted, is-ellipsis

Components

• button: is-loading, is-rounded, is-disabled, is-simple, is-light, is-{size}, is-{color}

  • Variables button: colors, sizes

• card: is-top-decorated, is-bottom-decorated, is-loading, is-overlaid, is-{gap}-padded, is-{color}, is-{card-size}

  • Variables card: gaps, colors, sizes ('small' 20em, 'large' 30em), border, shadow, border-{color}, shadow-{color}
  • .separator: is-attached
  • .section: is-header, is-footer, is-attached, is-secondary, top-sticky, bottom-sticky
  • .overlay
• header: is-marginless, is-left-decorated, is-right-decorated, is-{gap}-padded, is-{color}
  • Variables header: gaps, colors
  • h1-6

• icon: is-outline, is-action, is-loading, is-{size}, is-{color}, is-disabled

  • Variables icon: sizes, colors, action-filter, action-hover-filter
  • img
  • svg

• link: is-{color}

  • Variables link: colors
• meta: is-action, is-{color}
  • Variables meta: colors
• tag: is-loading, is-light, is-action, is-rounded, is-{size}, is-{color}
  • Variables tag: size, sizes, colors

Form

• checkbox, radio: is-{color}, is-disabled
  • Variables input: colors
  • sample: <label class="checkbox" for="chk1"><input type="checkbox" id="chk1"> Select</label>
• field: is-marginless, is-required, is-{color}, is-failed
  • Variables input: colors
  • label or .field-label for nested label
  • .help
  • .error
  • .input
  • .input-like
• input: is-focused, is-failed, is-{gap}-gaped, is-{color}, is-disabled
  • Variables input: colors, gaps
  • .separator
  • .gutter
  • input
• select: is-focused, is-failed, is-{color}, is-disabled
  • Variables input: colors
• textarea: is-focused, is-failed, is-{color}, is-disabled
  • Variables input: colors

Helpers

• attachment: is-attached, is-left-attached, is-left-top-attached, is-left-bottom-attached, is-right-attached, is-right-top-attached, is-right-bottom-attached, is-top-attached, is-top-left-attached, is-top-right-attached, is-bottom-attached, is-bottom-left-attached, is-bottom-right-attached
• layout: is-clearfix, is-ltr, is-rtl, is-clipped, is-radiusless, is-shadowless, is-clickable, is-unselectable, is-selectable, is-locked, is-scrollable
• typography: is-italic, is-underline, is-line-through, is-undecorated, is-capitalized, is-lowercase, is-uppercase, is-ellipsis, is-{size}-sized, is-{weight}-weighted, is-{align}-aligned, is-{color}-colored
• visibility: is-hidden, is-until-fullhd-hidden, is-until-widescreen-hidden, is-until-desktop-hidden, is-mobile-only, is-tablet-only, is-desktop-only, is-widescreen-only, is-fullhd-only, is-mobile-hidden, is-tablet-hidden, is-desktop-hidden, is-widescreen-hidden, is-fullhd-hidden, is-tablet-only-hidden, is-desktop-only-hidden, is-widescreen-only-hidden, is-touch-only, is-touch-hidden

Layout

• breadcrumb:
  • .separator
  • .active
• components: is-{align}-aligned, is-{justify}-justified
  • .filler
  • .separator
• container: is-marginless, is-fullwidth, is-paddingless, is-{gap}-padded
  • Variables container: gaps, desktop, widescreen, fullhd
• content: is-centered, is-loading, is-overlaid, is-paddingless, is-{gap}-padded, is-{color}
  • Variables content: gaps, colors
  • .overlayz
• gallery: is-gapless, is-{gap}-gaped, is-stackable
  • .item is-block
    • NOTE: you must add thumbnail class to image if img not in root of item.
  • Variables gallery: gaps, mobile-height, tablet-height, height
• gaper: is-stacked, is-stacked-reverse, is-wrap, is-auto,is-{gap}-gaped, is-{align}-aligned, is-{justify}-justified, is-{device}-stacked, is-{device}-stacked-reverse, is-{device}-{align}-aligned, is-{device}-{justify}-justified
  • Variables gaper: gaps
  • .filler
  • .separator
  • .gutter
• grid: is-gapless, is-{gap}-gaped, is-{align}-aligned, is-{justify}-justified, is-{device}-{align}-aligned, is-{device}-{justify}-justified
  • Variables grid: units, gaps
  • break:
  • column: is-fit, is-{unit}, is-{device}-fit, is-{device}-{unit}
• landscape: is-center-snapped, is-end-snapped, is-mandatory, is-stacked, is-gapless, is-{gap}-gaped, is-{align}-aligned, is-{justify}-justified, is-{device}-stacked, is-{device}-{align}-aligned, is-{device}-{justify}-justified
  • Variables landscape: gaps
• layout: is-reverse, is-horizontal, is-horizontal-reverse, is-{device}-reverse, is-{device}-horizontal, is-{device}-horizontal-reverse
  • .attachment
• padder: is-{gap}