@stitches/core

What is @stitches/core?

@stitches/core is a CSS-in-JS library that provides a performant, flexible, and feature-rich way to style your applications. It allows you to write CSS with JavaScript, offering features like theming, responsive design, and utility-first styling.

What are @stitches/core's main functionalities?

Styling Components

This feature allows you to create styled components using the `styled` function. You can define styles directly in your JavaScript code and apply them to HTML elements.

const { styled } = require('@stitches/core');

const Button = styled('button', {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  '&:hover': {
    backgroundColor: 'darkblue'
  }
});

Theming

Theming allows you to define different themes for your application. You can create multiple themes and switch between them dynamically.

const { createTheme } = require('@stitches/core');

const darkTheme = createTheme({
  colors: {
    background: 'black',
    text: 'white'
  }
});

const lightTheme = createTheme({
  colors: {
    background: 'white',
    text: 'black'
  }
});

Responsive Design

This feature allows you to define responsive styles using media queries. You can specify different styles for different screen sizes.

const { styled } = require('@stitches/core');

const Container = styled('div', {
  width: '100%',
  '@media (min-width: 768px)': {
    width: '50%'
  }
});

Utility-First Styling

Utility-first styling allows you to create utility classes that can be reused across your application. This promotes consistency and reduces the amount of CSS you need to write.

const { css } = require('@stitches/core');

const utilityClass = css({
  margin: '10px',
  padding: '20px',
  backgroundColor: 'lightgray'
});

Other packages similar to @stitches/core

styled-components

styled-components is another popular CSS-in-JS library that allows you to write actual CSS to style your components. It offers similar features like theming and dynamic styling but uses tagged template literals for defining styles.

emotion

Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API and a css API, giving you the flexibility to choose how you want to style your components. It also supports theming and server-side rendering.

linaria

Linaria is a zero-runtime CSS-in-JS library. It allows you to write CSS in your JavaScript files but extracts the CSS at build time, resulting in no runtime overhead. It supports theming and dynamic styling.

README

@stitches/core

@stitches/core is a framework-agnostic implementation of stitches, a CSS-in-JS library with a best-in-class developer experience.

# with npm
npm install @stitches/core

# with yarn
yarn add @stitches/core

<script type="module">

import { css } from 'https://cdn.skypack.dev/@stitches/core'

</script>

<script src="https://unpkg.com/@stitches/core/dist/index.global.js"></script>
<script>

const { css } = stitches

</script>

Documentation

For full documentation, visit stitches.dev.

Contributing

Please follow our contributing guidelines.

Authors

• Pedro Duarte (@peduarte) - Modulz
• Abdulhadi Alhallak (@hadi_hlk) - Modulz
• Jonathan Neal (@jon_neal) - Modulz

License

Licensed under the MIT License, Copyright © 2021-present Modulz.

See LICENSE for more information.