Stylin.js is a React library that provides "all" css attributes builtin under component.

Overview

Stylin

Stylin Logo

Statements Branches Functions Lines

React in-component styling, Theme-Based, Suggestive, primitive CSS allowed.

Installing

To install the package you must to have installed node and npm/yarn

# npm
npm install stylin.js
npm install stylin.js@beta # for beta version

# yarn
yarn add stylin.js
yarn add stylin.js@beta # for beta version

Getting Started

It's too simple to use StylinComponents, see what I mean:

// Javascript
import React from 'react';
import stylin from 'stylin.js';

const StylinDiv = stylin('div')();

const Home = () => (
  <StylinDiv
    // all your JSX Styles here
    padding="2rem"
    background="#f55"
    borderRadius="1rem"
    on-hover={{
      textAlign: 'right',
    }}
  >
    Hello World
  </StylinDiv>
);
// Typescript
import React, { FC, HTMLAttributes } from 'react';
import stylin, { StylinComponentProps } from 'stylin.js';

// There may be some duplicated props
// You must omit the with the following line
type StylinDivProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'color' | 'translate'
> &
  StylinComponentProps; // Stylin props

const StylinDiv = stylin<StylinDivProps>('div')();

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',
    }}
  >
    Hello World!
  </StylinDiv>
);

Theme-Based Props

For Theme-Based props, you must to use the emotion ThemeProvider.

Then, you must to 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.:

<StylinDiv m="L" p="M" mr="S">
  Hello World!
</StylinDiv>

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']
<StylinDiv mx={['M', 'S', '0.25rem', '0.15rem']} p="L" gap={['M', 'L']}>
  Hello World!
</StylinDiv>

// 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.:

<StylinDiv borderRadius="M" borderEndEndRadius="0">
  Hello World!
</StylinDiv>

Font Sizes

The fontSizes property is reserved to standardize the fontSizes, and works only with fontSize attribute.

Eg.:

<StylinP fontSize="XL">Hello World! (Heading)</StylinP>

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.:

<StylinDiv color="primary" bg="secondary">
  Hello World!
</StylinDiv>

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 stylin, { variant } from 'stylin.js';

const StylinButton = stylin('button')(
  variant({
    scale: 'buttons', // theme key
    property: 'variant', // component attribute
  }),
  // you can add more than one types of variants
);

const Component = () => (
  <>
    <StylinButton variant="primary">
    <StylinButton variant="secondary" ml="M">
  </>
)
Typescript
import React, { FC, ButtonHTMLAttributes } from 'react';
import stylin, { variant, StylinComponentProps } from 'stylin.js';

interface StylinDivProps extends StylinComponentProps,
  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'translate'> {
  variant: 'primary' | 'secondary'; // component attribute well typed
}

const StylinButton = stylin<StylinDivProps>('button')(
  variant({
    scale: 'buttons', // theme key
    property: 'variant', // component attribute
  }),
  // you can add more than one types of variants
);

const Component: FC = () => (
  <>
    <StylinButton variant="primary">
    <StylinButton variant="secondary" ml="M">
  </>
)

Pseudo Selectors

Stylin.js provides all css pseudo selectors built-in on your component, using only the prefix on- for all selectors, see the code:

<StylinDiv
  bg="#ddd"
  borderRadius="M"
  border="1px solid"
  borderColor="transparent"
  transition="all 300ms ease-in-out"
  on-hover={{     // :hover
    background: '#bbb',
    borderColor: 'primary',
  }}
  on-active={{    // :active
    borderColor: 'secondary',
  }}
  on-disabled={{  // :disabled
    cursor: 'not-allowed',
    borderColor: 'disabled',
  }}
>
  Hello World!
</StylinDiv>

Contributing

To contribute check the CONTRIBUTING.md.

You might also like...
The all-in-one starter kit for building platforms on Vercel

Platforms Starter Kit The all-in-one starter kit for building platforms on Vercel. Introduction · Guide · Demo · Contributing Deploy Your Own Read the

A template for all of you to create and deploy an Awesome Portfolio for free without writing code
A template for all of you to create and deploy an Awesome Portfolio for free without writing code

A template for all of you to create and deploy an Awesome Portfolio for free without writing code

A chrome extension to detect and protect yourself from trackers. Simple and instructive interface. ALL LOCAL (no server linked)
A chrome extension to detect and protect yourself from trackers. Simple and instructive interface. ALL LOCAL (no server linked)

Pricacy Keeper Chromium extension to help users understanding cookies on their computer and trackers on the web. In addition to passive actions (analy

Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.
Starter template for Vite with React (TypeScript). Supports Tailwind with CSS-Modules. Jest and @react/testing-library configured and ready to go. Also ESLint, Prettier, Husky, Commit-lint and Atomic Design for components.

Mocking up web app with Vital(speed) Live Demo Features ⚡️ React 17 🦾 TypeScript, of course 🫀 Jest - unitary testing made easy 🎨 Tailwind with JIT

A familiar and performant compile time CSS-in-JS library for React.
A familiar and performant compile time CSS-in-JS library for React.

Compiled A familiar and performant compile time CSS-in-JS library for React. Get started now ➚ Usage import { styled, ClassNames } from '@compiled/rea

Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.
CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

CLI tool that makes react boilerplate component. Supports es6 or typescript, css or @emotion/styled, emmet-like syntax.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

This is a react portfolio template build using react, typescript and tailwind css. It help developers and designers to showcase their work

React Portfolio Using Tailwind UI This project include a portfolio template which is built using React and Tailwind CSS. It help developer and designe

Owner
Marco Pitra
Technology lover
Marco Pitra
Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

Salvia-kit provides beautiful dashboard templates built with Tailwind CSS for React, Next.js, Vue and Nuxt.js

salvia-kit 378 Nov 28, 2022
MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps

MERN Stack Boilerplate MERN Stack Boilerplate provides starter kits for building web, desktop and mobile apps in pure JavaScript. Create New MERN App

MERN Stack Boilerplate 1 Nov 8, 2021
Castore provides a unified interface for implementing Event Sourcing in TypeScript

✨ Better DevX for Event Sourcing in TypeScript Castore provides a unified interface for implementing Event Sourcing in TypeScript. Define your events

Theodo.FR 17 Nov 18, 2022
This website provides users the ability to create their own memes easily

meme-generator This website provides users the ability to create their own memes easily. Features : Users can generate random meme images. Users can w

Emad Hussien 4 Oct 5, 2022
Frontend Folder using Create react app and tailwind config, without all the create-react-app boilerplate

Using This Template To use this template click the green button above labled "use this template", then clone it from your repository and run npm insta

Joseph Gibis 8 Dec 4, 2022
Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the essentials that one would require in a project.

react-native-boilerplate-typescript Simple React-Native boilerplate code in Typescript for getting started with a new project quickly. It has all the

Numanqmr 10 Sep 10, 2022
All of Create React App, none of the dependencies

Getting Started with Create React App Zero This is a template for Create React App Zero, an alternative to Create React App that requires no build too

Joeri Sebrechts 22 Jan 7, 2023
An embedded Shopify app starter template made with Node, Express, React and Vite, with all the required stuff hooked up.

Shopify Node.js x Express.js x React.js Boilerplate An embedded app starter template to get up and ready with Shopify app development with JavaScript.

Harshdeep Singh Hura 125 Dec 31, 2022
Math magicians is a website for all fans of mathematics

Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations and read a random math-related quote. The application was built using Javascript, React, HTML, CSS, Webpack, Jest-testing.

Kingsley Ibe 5 Apr 10, 2022
F-Curator - An offline application that comes at you all day long, and curate your own web favorites

F-Curator F-Curator is an offline application that comes at you all day long and

UIUX Lab 21 Dec 25, 2022