Skip to main content

@fathym/atomic@0.0.183
Built and signed on GitHub Actions

It is unknown whether this package works with Cloudflare Workers, Node.js, Deno, Bun, Browsers
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
It is unknown whether this package works with Bun
It is unknown whether this package works with Browsers
JSR Score
47%
Published
a month ago (0.0.183)

Fathym Atomic Design Kit

The Fathym Atomic Design Kit is a base atomic library that is designed to be composed into domain-specific component libraries. This approach allows for a high degree of modularity and reusability in your UI development.

To effectively use this library, we recommend following Brad Frost's Atomic Design Principles. These principles provide a methodology for creating design systems that are easy to understand, scalable, and powerful. They involve breaking down your UI into its most basic components (or 'atoms'), and combining these atoms to form more complex 'molecules' and 'organisms'.

You can learn more about Atomic Design Principles here: Atomic Design Principals

By adhering to these principles, you can ensure that your UI is consistent, maintainable, and adaptable to a wide range of use cases.

Atomic Components

src/atoms

The src/atoms directory contains the most basic building blocks of your UI. Each file in this directory corresponds to a single atomic component.

src/molecules

The src/molecules directory contains more complex components that are composed of multiple atoms. Each file in this directory corresponds to a single molecule component.

src/organisms

The src/organisms directory contains even more complex components that are composed of multiple molecules and/or atoms. Each file in this directory corresponds to a single organism component.

src/templates

The src/templates directory contains templates that can be used to quickly create consistent layouts. Each file in this directory corresponds to a single template.

src/utils

The src/utils directory contains utility functions that can be used throughout your application. Each file in this directory corresponds to a single utility function.

Please refer to the individual files in each directory for more detailed documentation on how to use each component or utility function, including code examples.

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add jsr:@fathym/atomic

Import symbol

import * as atomic from "@fathym/atomic";

---- OR ----

Import directly with a jsr specifier

import * as atomic from "jsr:@fathym/atomic";

Add Package

npx jsr add @fathym/atomic

Import symbol

import * as atomic from "@fathym/atomic";

Add Package

yarn dlx jsr add @fathym/atomic

Import symbol

import * as atomic from "@fathym/atomic";

Add Package

pnpm dlx jsr add @fathym/atomic

Import symbol

import * as atomic from "@fathym/atomic";

Add Package

bunx jsr add @fathym/atomic

Import symbol

import * as atomic from "@fathym/atomic";