businessnextui
v1.0.5
Published
Crmnext UI is a library for creating themeable user interfaces based on constraint-based design principles. Build custom component libraries, design systems, web applications and more with a flexible API for best-in-class developer ergonomics.
Downloads
8
Readme
Crmnext Ui
Crmnext UI is a library for creating themeable user interfaces based on constraint-based design principles. Build custom component libraries, design systems, web applications and more with a flexible API for best-in-class developer ergonomics.
develop (prerelease) docs: https://dev.crmnextlab.com/styleguide
Built for design systems, white-labels, themes, and other applications where customizing colors, typography, and layout are treated as first-class citizens and based on a standard Theme Specification,
- The next evolution of Styled System
- From the creators of utility-based, atomic CSS methodologies
- Theme-based styling with the
sx
prop - Compatible with virtually any UI component library
- Works with existing [Styled System][] components
- Quick mobile-first responsive styles
- Primitive page layout components
- Completely customizable with robust theming
- Built with a standard [Theme Specification][] for interoperability
- Built with [Emotion][] for scoped styles
Installation - Getting Started
Use the package manager pip to install foobar.
npm install @emotion/react @emotion/styled crmnext-ui
Usage
Any styles in your app can reference values from the global theme
object. To
provide the theme in context, wrap your application with the ThemeProvider
component and pass in a custom theme
object.
// basic usage
import { ThemeProvider } from 'crmnext-ui'
import theme from './theme'
export default (props) => (
<ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
The theme
object follows the System UI
[Theme Specification], which lets you define
custom color palettes, typographic scales, fonts, and more.
// example theme.js
export default {
fonts: {
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: '"Avenir Next", sans-serif',
monospace: 'Menlo, monospace',
},
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
radii:{
2: '2px',
4: '4px',
6: '6px',
8: '8px',
10: '10px',
12: '12px',
14: '14px',
16: '16px',
20: '20px',
30: '30px',
40: '40px',
circle: '50%',
square: '4px',
},
borderStyles = {
none: 'none',
solid: 'solid',
dotted: 'dotted',
dashed: 'dashed',
double: 'double'
},
borderWidths: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
],
scaleFontSize: (string | number)[] = [
'2.027rem',
'1.802rem',
'1.602rem',
'1.424rem',
'1.266rem',
'1.125rem',
'1rem',
'0.889rem',
'0.79rem',
'0.702rem',
'0.624rem'
];
}
sx
prop
The sx
prop works similarly to Emotion's css
prop, accepting style objects
to add CSS directly to an element in JSX, but includes extra theme-aware
functionality. Using the sx
prop for styles means that certain properties can
reference values defined in your theme
object. This is intended to make
keeping styles consistent throughout your app the easy thing to do.
The sx
prop only works in modules that have defined a custom pragma at the top
of the file, which replaces the default React JSX functions. This means you can
control which modules in your application opt into this feature without the need
for a Babel plugin or additional configuration.
export default (props) => (
<div
sx={{
fontWeight: 'bold',
fontSize: 4, // picks up value from `theme.fontSizes[4]`
color: 'primary', // picks up value from `theme.colors.primary`
}}
>
Hello
</div>
)
Responsive styles
The sx
prop also supports using arrays as values to change properties
responsively with a mobile-first approach. This API originated in [Styled
System][] and is intended as
a terser syntax for applying responsive styles
across a singular dimension.
export default (props) => (
<div
sx={{
// applies width 100% to all viewport widths,
// width 50% above the first breakpoint,
// and 25% above the next breakpoint
width: ['100%', '50%', '25%'],
}}
/>
)