JSPM – beathers@5.1.0

Package Exports

beathers
beathers/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (beathers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

The Perfect Fusion of Strength and Featherlight Agility

Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow. Everything is fully customizable through a simple configuration file, allowing you to tailor every aspect to match your brand and requirements. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with complete design control.

Get Started

Installation

npm install beathers
# or
yarn add beathers
# or
pnpm add beathers

Create Configuration File

Use the interactive CLI to create your theme configuration:

beathers init

This will prompt you to:

Choose your configuration file format (JSON, JS, or TypeScript)
Set up initial theme values like colors and typography
Configure which features to enable/disable

Build Your Theme

Generate your custom CSS from the configuration:

beathers build

Import in Your Project

CSS Import (Recommended):

/* Import the compiled CSS */
@import 'node_modules/beathers/dist/css/beathers.min.css';

SCSS Import:

// Import the entire library
@import 'node_modules/beathers/src/scss/beathers.min.scss';

// Or import specific modules
@import 'node_modules/beathers/src/scss/functions/colors';
@import 'node_modules/beathers/src/scss/style/grid';

JavaScript/Framework Import:

// Next.js, React, Vue, Angular
import 'beathers/dist/css/beathers.min.css'

Example Configuration

{
  "colors": {
    "primary": { "light": "#007bff", "dark": "#0056b3" },
    "success": { "light": "#28a745", "dark": "#20c997" }
  },
  "typography": {
    "defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
  },
  "settings": {
    "axisDivisions": 12,
    "breakpoints": {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px"
    }
  }
}

Configuration

Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.

Configuration File Options

You can create one of these files in your project root:

beathers.configs.json - JSON format
beathers.configs.js - JavaScript format
beathers.configs.ts - TypeScript format (with type safety)

Key Configuration Sections

Section	Description	Purpose
colors	Define your color palette with light/dark variants	Brand colors, state colors (success, warning, etc.)
typography	Configure fonts, sizes, and text settings	Font families, weights, sizes, and formatting
settings	Layout and spacing configuration	Grid system, breakpoints, spacing values
roles	Enable/disable specific features	Control which utilities are generated

Common Configuration Properties

Property	Type	Example
COLORS
`color` Color variants (as json)	"color": { light: `#${string}$`, dark: `#${string}$` }	"primary": {"light": "#007bff", "dark": "#0056b3"}
TYPOGRAPHY
`defaultFontFamilies` Fallback fonts (as array)	`string[]`	["system-ui", "sans-serif"]
`fontMainPath` Your fonts path	`string`	"/fonts/"
`fontFormat` Your fonts format	`string`	"woff2"
`fontWeights` Your fonts weights (as array)	`thin`,`extra-light`,`light`,`regular`, `medium`,`semibold`,`bold`,`extra-bold`,`black`	["regular", "medium", "bold"]
`fontStyles` Your fonts styles (as array)	`normal`,`italic`,`oblique`	["normal"]
`fontSizes` Your fonts sizes (as json)	Record<`string`, `${number}px` `${number}rem` `${number}em`>	subtitle1: "16px" (Azvailable: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, button, body1, body2, caption, overline) (Note: You can add/remove)
`textTruncate` Text truncation	`number`	3
`fonts` Custom font definitions (Local/External) (as json)	{weights: same as `weights`, styles: same as `styles`, variants: {"fontName" :{title: `string`, unicode?: `string`, format?: `woff`, isLocal?: `boolean`, url?: `https://${string}`, `http://${string}`}}}	{variants: {"font1" :{title: "roboto"}}}
SETTINGS
`axisDivisions` Grid system divisions	`number`	12
`opacities` Available opacity values min: 0 - max: 100 (as array)	`number[]`	[10, 20]
`blurValues` Blur effect values (as array)	`number[]`	[2, 4, 8, 16, 32]
`insetValues` Inset values (as array)	`number[]`	[0, 5]
`bordersValue` Default border width (as array)	`number[]`	[1, 2]
`radiuses` Border radius values (as array)	`number[]`	[5,10,15]
`breakpoints` Responsive breakpoints (as json)	Record<(`sm` , `md` , `lg` , `xl` , `xxl`), `${number}px` `${number}rem` `${number}em`>	{"sm": "640px", "md": "768px"}
`wrappers` Container widths (as json)	Record<(`sm` , `md` , `lg` , `xl` , `xxl`), { width: `${number}px` `${number}rem` `${number}em`; padding?: `${number}px` `${number}rem` `${number}em`}>	{"sm": {"width": "540px", "padding":"15px"}}
`guttersValues` Spacing values (as json)	Record<(`auto`, `number`), `${number}px` `${number}rem` `${number}em`>	{"auto": "1rem", 1: "0.25rem"}
ROLES
`useMediaQueries` Enable responsive utilities	`boolean`	`true`
`useIcons` Include icon styles	`boolean`	`true`
`useFontFamilies` Include font family utilities	`boolean`	`true`
`useFontSizes` Include font size utilities	`boolean`	`true`
`useFontShapes` Include font style utilities	`boolean`	`true`
`useTextAligns` Include text alignment utilities	`boolean`	`true`
`useTextTruncate` Include text truncation utilities	`boolean`	`true`
`useColors` Include color utilities	`boolean`	`true`
`useColorsOpacities` Include color opacity utilities	`boolean`	`true`
`useColorsLightMode` Include light mode colors	`boolean`	`true`
`useColorsDarkMode` Include dark mode colors	`boolean`	`true`
`useCurrentColors` Include currentColor utilities	`boolean`	`true`
`useRootColors` Include CSS custom properties	`boolean`	`true`
`useGrid` Include grid system	`boolean`	`true`
`useFlex` Include flexbox utilities	`boolean`	`true`
`useTransitions` Include transition utilities	`boolean`	`true`
`useWrappers` Include container utilities	`boolean`	`true`
`useShadows` Include shadow utilities	`boolean`	`true`
`useDisplays` Include display utilities	`boolean`	`true`
`useOverflows` Include overflow utilities	`boolean`	`true`
`useOpacities` Include opacity utilities	`boolean`	`true`
`useBlur` Include blur utilities	`boolean`	`true`
`useObjectFits` Include object-fit utilities	`boolean`	`true`
`usePositions` Include positioning utilities	`boolean`	`true`
`useInsets` Include inset utilities	`boolean`	`true`
`useSizes` Include sizing utilities	`boolean`	`true`
`useGutters` Include spacing utilities	`boolean`	`true`
`useBorders` Include border utilities	`boolean`	`true`
`useTextBorders` Include text border utilities	`boolean`	`true`
`useRadius` Include border radius utilities	`boolean`	`true`

TypeScript Configuration Example

// beathers.configs.ts
import { Theme } from 'beathers'

export default {
  colors: {
    primary: { light: '#007bff', dark: '#0056b3' },
    secondary: { light: '#6c757d', dark: '#495057' },
    success: { light: '#28a745', dark: '#20c997' },
  },
  typography: {
    defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
    fontSizes: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
    },
  },
  settings: {
    axisDivisions: 12,
    breakpoints: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      xxl: '1536px',
    },
  },
  roles: {
    useIcons: false,
    useBlur: false,
  },
} satisfies Theme

beathers