DEV Community

Cover image for OsmiCSX - An utility React Native style framework
DeVoresyah ArEst
DeVoresyah ArEst

Posted on

OsmiCSX - An utility React Native style framework

What is OsmiCSX ?

OsmiCSX is a utility React Native style framework for rapidly building custom user interfaces. We adopted the Tailwind concept and implement it for styling in React Native. OsmiCSX designed for customizing UI in React Native and makes a reusable component with the style as you want with very simple code.

Why OsmiCSX ?

Most Style/UI framework in React Native only focused on the UI Component and not really customizable. They come with all sorts of predesigned components like buttons, cards, and alerts that might help you move quickly at first, but cause more pain than they cure when it comes time to make your site stand out with a custom design.

OsmiCSX is different.

Instead of opinionated predesigned components, OsmiCSX provides low-level utility style that let you build completely custom designs.

Templating Friendly

While you can do a lot with just utility classes, as a project grows it can be useful to codify common patterns into higher level abstractions.

OsmiCSX provides tools for extracting component classes from repeated utility patterns, making it easy to update multiple instances of a component from one place:

import { connect } from '../lib/OsmiConfig' // your osmi config path

export default connect({
  container: [
    "bg-blue-500",
    "p-2",
    "pl-5",
    "pr-5",
    "rounded"
  ],
  text: [
    "text-white",
    "text-base",
    "font-bold",
    "text-center"
  ]
})
Enter fullscreen mode Exit fullscreen mode

More Information

Example => OsmiCSX Example
GitHub => OsmiCSX on GitHub
Documentation => OsmiCSX Docs

Top comments (0)