@stylin.js/elements v1.0.2
STYLIN.JS Elements
A React styling library with features like in-component styles, Theme-Based properties, suggestive, primitive CSS allowed.
Motivations
Now, to use @stylin.js/react
, you must to create the stylin element by your own, and with @stylin.js/elements
, you can access all the stylable html elements as StylinComponents.
Installing
To install the package you must have installed node and npm/yarn
# npm
npm install @stylin.js/react
# yarn
yarn add @stylin.js/react
Getting Started
Bellow you can see the Before/After of the 2 approaches, and how @stylin.js/elements
comes to simplify the @stylin.js/react
usage:
@stylin.js/react
:
// Javascript
import stylin from '@stylin.js/react';
import React from 'react';
const StylinDiv = stylin('div')();
const StylinH1 = stylin('h1')();
const Home = () => (
<StylinDiv
// all your JSX Styles here
padding="2rem"
background="#f55"
borderRadius="1rem"
on-hover={{
textAlign: 'right',
}}
>
<StylinH1 textTransform="uppercase">Hello World</StylinH1>
</StylinDiv>
);
// Typescript
import stylin from '@stylin.js/react';
import React, { FC, HTMLAttributes } from 'react';
// There may be some duplicated props
// You must omit them with the following line
type StylinDivProps = Omit<
HTMLAttributes<HTMLDivElement>,
'color' | 'translate'
>; // Stylin props
const StylinDiv = stylin<StylinDivProps>('div')();
// There may be some duplicated props
// You must omit them with the following line
type StylinH1Props = Omit<
HTMLAttributes<HTMLHeadingElement>,
'color' | 'translate'
>; // Stylin props
const StylinH1 = stylin<StylinH1Props>('h1')();
const Home: FC = () => (
<StylinDiv
// all your JSX Styles here
padding="2rem" // p="2rem" in alternative
background="#f55" // bg="#f55" in alternative
borderRadius="1rem"
on-hover={{
textAlign: 'right',
}}
>
<StylinH1 textTransform="uppercase">Hello World!</StylinH1>
</StylinDiv>
);
@stylin.js/elements
:
// Javascript
import { Div, H1 } from '@stylin.js/elements';
import React from 'react';
const Home = () => (
<Div
// all your JSX Styles here
padding="2rem"
background="#f55"
borderRadius="1rem"
on-hover={{
textAlign: 'right',
}}
>
<H1 textTransform="uppercase">Hello World</H1>
</Div>
);
// Typescript
import { Div, H1 } from '@stylin.js/elements';
import React, { FC } from 'react';
const Home: FC = () => (
<Div
// all your JSX Styles here
padding="2rem" // p="2rem" in alternative
background="#f55" // bg="#f55" in alternative
borderRadius="1rem"
on-hover={{
textAlign: 'right',
}}
>
<H1 textTransform="uppercase">Hello World</H1>
</Div>
);
Theme-Based Props
For Theme-Based props, you must use the emotion ThemeProvider
.
Then, you must add these following default properties to theme
object, and you will use their keys into StylinComponent:
space
: an object for spaces like margins, and paddings;breakpoints
: a list for responsiveness breakpoints;radii
: an object for border radius size/width;fontSizes
: an object for font sizes (as the name says);colors
: an object for color palette around the code;
Eg.:
import { ThemeProvider } from '@emotion/react';
const theme = {
space: {
S: '0.5rem',
M: '1rem',
L: '2rem',
},
breakpoints: ['44em', '55em', '64em'],
radii: {
S: '0.5rem',
M: '0.75rem',
L: '1rem',
},
fontSizes: {
S: '0.9rem',
M: '1rem',
L: '1.3rem',
XL: '2rem',
},
colors: {
primary: '#f55',
secondary: '#55f',
disabled: '#aaa',
},
};
// Make sure that all StylinComponent be inside this ThemeProvider
const App = (Component) => (
<ThemeProvider theme={theme}>
// rest of the code
<Component />
</ThemeProvider>
);
NOTE 1: These all keys are customizable and optional, you can change for any other key, as you prefer. NOTE 2: Remind this theme definition, you'll need for next points.
Space
The space
property will work with these following attributes:
gap
;rowGap
columnGap
;m
: (alternatively,margin
);mt
: (alternatively,marginTop
);mr
: (alternatively,marginRight
);mb
: (alternatively,marginBottom
);ml
: (alternatively,marginLeft
);mx
: (alternatively,marginLeft
+marginRight
);my
: (alternatively,marginTop
+marginBottom
);p
: (alternatively,padding
);pt
: (alternatively,paddingTop
);pr
: (alternatively,paddingRight
);pb
: (alternatively,paddingBottom
);pb
: (alternatively,paddingLeft
);px
: (alternatively,paddingLeft
+paddingRight
);py
: (alternatively,paddingTop
+paddingBottom
);
Eg.:
<H1 m="L" p="M" mr="S">
Hello World!
</H1>
Breakpoints
The breakpoints
property works with all stylin props, and works with mobile-first philosophy, it means that, the first props will be for more smaller screens, see the code:
// base case: breakpoints = ['44em', '55em', '64em']
<Div mx={['M', 'S', '0.25rem', '0.15rem']} p="L" gap={['M', 'L']}>
<H1 textTransform="uppercase">Hello World</H1>
</Div>
// Results based on screen width
// under 44em, it will be: mx="M" p="L" gap="M"
// under 55em, it will be: mx="S" p="L" gap="L"
// under 64em, it will be: mx="0.25rem" p="L" gap="L"
// upper 64em, it will be: mx="0.15rem" p="L" gap="L"
NOTE 3: By default (if you prefer not passing breakpoints in your theme object) the breakpoints
list is ['36em', '48em', '62em', '75em']
Radii
The radii
property is reserved to standardize the radius on your StylinComponents, it has a limited attributes to uses, check following list:
borderRadius
;borderEndEndRadius
;borderTopLeftRadius
;borderTopRightRadius
;borderEndStartRadius
;borderStartEndRadius
;borderBottomLeftRadius
;borderStartStartRadius
;borderBottomRightRadius
.
Eg.:
<Div borderRadius="M" borderEndEndRadius="0">
Hello World!
</Div>
Font Sizes
The fontSizes
property is reserved to standardize the fontSizes, and works only with fontSize
attribute.
Eg.:
<P fontSize="XL">Hello World! (Heading)</P>
Colors
The colors
property define our theme color palette, and works with following attributes:
color
;bg
: (alternatively,background
);backgroundColor
;borderColor
;borderTopColor
;borderLeftColor
;borderBlockColor
;borderRightColor
;borderBottomColor
;borderInlineColor
;borderBlockEndColor
;borderInlineEndColor
;borderBlockStartColor
;borderInlineStartColor
;
Eg.:
<Div color="primary" bg="secondary">
Hello World!
</Div>
Advanced Topics
Variants
Stylin.js also bring for you, a theme-based way to do variants of components. Pre-styling your component in variant property, grouping all those variants, and then export in the theme, see bellow:
Theme definition
const theme = {
...baseTheme, // all base things above
buttons: {
primary: {
color: '#000',
fontWeight: 500,
backgroundColor: '#f55',
},
secondary: {
color: '#',
fontWeight: 500,
backgroundColor: '#f55',
},
},
};
Component usage
Javascript
import React from 'react';
import { variant } from '@stylin.js/react';
import { stylinButton } from '@stylin.js/elements';
const Button = stylinButton(
variant({
scale: 'buttons', // theme key
property: 'variant', // component attribute
}),
// you can add more than one types of variants
);
const Component = () => (
<>
<Button variant="primary">
<Button variant="secondary" ml="M">
</>
)
Typescript
import React, { FC, ButtonHTMLAttributes } from 'react';
import { variant } from '@stylin.js/react';
import { stylinButton } from '@stylin.js/elements';
interface ButtonProps {
variant: 'primary' | 'secondary'; // component attribute well typed
}
const Button = stylinButton<ButtonProps>(
variant({
scale: 'buttons', // theme key
property: 'variant', // component attribute
}),
// you can add more than one types of variants
);
const Component: FC = () => (
<>
<Button variant="primary">
<Button variant="secondary" ml="M">
</>
)
Pseudo Selectors
Stylin.js provides all css pseudo selectors built-in on your component, using only the prefix n
for all selectors, see the code:
<Div
bg="#ddd"
borderRadius="M"
border="1px solid"
borderColor="transparent"
transition="all 300ms ease-in-out"
nHover={{
// &:hover
background: '#bbb',
borderColor: 'primary',
}}
nActive={{
// &:active
borderColor: 'secondary',
}}
nDisabled={{
// &:disabled
cursor: 'not-allowed',
borderColor: 'disabled',
}}
>
Hello World!
</Div>
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago