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>