emoji-styled-css

emoji-styled-css is a utility-first CSS library built with TypeScript, designed to simplify styling components using dynamic breakpoints and easy-to-use utility functions. It allows you to create responsive, customizable styles based on user-configurable breakpoints and supports simple styling through semantic tags like Box, Text, Button, and more.

📦 Installation

To install emoji-styled-css, you can use npm or yarn.

npm install emoji-styled-css
or
yarn add emoji-styled-css

📝 Usage

Importing Tags

To use emoji-styled-css, you first need to import the semantic tags (Box, Text, Button, etc.) into your React project.

import { Box, Text, Button } from 'emoji-styled-css'

Applying CSS with Tags

Once you’ve imported the tags, you can start applying styles directly to these components. The styles are defined using media queries to make them responsive, based on breakpoints defined in your config file.

Example of usage:

import { Box, Text, Button } from 'emoji-styled-css';

const MyComponent = () => {
  return (
    <Box sm={{ padding: '10px' }} md={{ padding: '20px' }} lg={{ padding: '30px' }}>
      <Text sm={{ fontSize: '14px' }} md={{ fontSize: '18px' }} lg={{ fontSize: '22px' }}>
        Responsive Text
      </Text>
      <Button sm={{ backgroundColor: '#ffcc00' }} lg={{ backgroundColor: '#ff6600' }}>
        Click Me
      </Button>
    </Box>
  );
};

export default MyComponent;

In this example:

• The Box, Text, and Button components will adjust their styles based on the screen size.
• You can pass CSS properties for each breakpoint (sm, md, lg, xl) as an object.