A utility-first CSS and CSS-in-JS framework with type safety and memoized centralized logic
UtilityPartialProps and UtilityRequireProps which extends UtilityProps and as with HTMLAttributes see docs for usage
ExtendUtilityProps
bash
npm install nrmndev-fw
or
yarn add nrmndev-fw
`
Getting Started
$3
`jsx
import React from "react";
import { Typography } from "nrmndev-fw";
const App = () => (
Hello world!
);
export default App;
`
$3
Just import the utility props you need, pass spread object to UtilityStyledComponent and it will handle the className logic
(if a form of predefined classNames or calculated styles passed into styled-component to render with just module classNames).
For in-depth explanation refer to the documentation:
`jsx
import { RowComponentProps } from "@uiTypes";
import { UtilityStyledComponent } from "@uiComponents";
const Row = ({ ...utilityProps }: RowComponentProps) => {
return (
);
};
`
`jsx
const App = () => {
return (
and many more/} />
);
};
`
Expects:
Usage
This framework is on a continous development and designed for personal use. The current release is not intended for production environments or widespread distribution. Please use it for personal projects or development purposes.
See all components and documentation here: (StoryBook under construction 🛠🛠🛠)
Example:
``md
$3
`jsx
`
``
$3
You can easily customize theme, just override root variables.
See full customization here: (StoryBook under construction 🛠🛠🛠)
``jsx
import { CssVariableProvider } from 'nrmndev-fw';
const App = () => (
{/ All component using "primary" will become #4CB944/}
);
`
```
Features
Component modularity, theming support, scalable typed props.
- 🛠 Customizable: Easily theme and modify components to fit your project’s design.
- ⚡️ Performant: Optimized for high performance and lightweight applications.
- 🧩 Modular: Import only the components you need to reduce bundle size.
Technologies Used
This framework is built with the following technologies:
- TypeScript: A strongly typed programming language that builds on JavaScript.
- Sass: A powerful CSS preprocessor that allows you to use variables, nested rules, mixins, and more.
Make sure you have these tools set up in your development environment to use this framework effectively.
API Documentation
See full API documentation here: https://nrmndev-fw.ngsilvestre.com/ StoryBook under construction 🛠🛠🛠
Changelog
You can view the full changelog here.