@mercury-js/mess

mess

mess 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 Button,Text,Image,Box,Input,Label,ul,li,Footer,Form and more.

---

📦 Installation

To install mess, you can use npm or yarn.

npm install @mercury-js/mess
or
yarn add @mercury-js/mess

📝 Usage

Importing Tags

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

import { Box, Text, Button } from '@mercury-js/mess'

Styled Components Tags

The following table lists all the custom tags provided by the library, alongside their corresponding HTML tags.

Custom Tag	HTML Tag
<Button>	<button>
<Text>	<p>
<Image>	<img>
<Box>	<div>
<Input>	<input>
<Label>	<label>
<Ul>	<ul>
<Li>	<li>
<Footer>	<footer>
<Form>	<form>
<Span>	<span>
<A>	<a>
<Select>	<select>
<Option>	<option>
<Header>	<header>
<Main>	<main>
<Article>	<article>
<Section>	<section>
<Aside>	<aside>
<Nav>	<nav>
<H1>	<h1>
<H2>	<h2>
<H3>	<h3>
<H4>	<h4>
<H5>	<h5>
<H6>	<h6>
<Table>	<table>
<Thead>	<thead>
<Tbody>	<tbody>
<Tr>	<tr>
<Th>	<th>
<Td>	<td>
<Pre>	<pre>
<Code>	<code>
<Blockquote>	<blockquote>
<Hr>	<hr>
<Br>	<br>
<Progress>	<progress>
<Iframe>	<iframe>
<Canvas>	<canvas>
<Video>	<video>
<Audio>	<audio>
<Figure>	<figure>
<Figcaption>	<figcaption>
<Details>	<details>
<Summary>	<summary>
<Mark>	<mark>
<Time>	<time>
<Meter>	<meter>
<B>	<b>
<I>	<i>
<Small>	<small>
<Strong>	<strong>
<Abbr>	<abbr>
<Sub>	<sub>
<Sup>	<sup>

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 { Button,Text,Box,Image} from '@mercury-js/mess';

const MyComponent = () => {
  return (
    <Box 
    styles={{
      base: `
        width: 300px; 
        background-color: #2c3e50; 
        border-radius: 12px; 
        padding: 20px; 
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        text-align: center;
        transition: transform 0.3s ease-in-out;
      `,
      sm: `
        width: 100%; 
        padding: 10px;
      `,
      md: `
        width: 280px;
      `,
      lg: `
        width: 320px;
      `
    }}
  >
    <Image 
      src="https://via.placeholder.com/150" 
      alt="Card Image" 
      width={150} 
      height={150}
      styles={{
        base: `
          width: 100%;
          height: auto;
          border-radius: 10px;
          margin-bottom: 15px;
        `
      }}
    />
    <Text 
      styles={{
        base: `
          color: #ecf0f1;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
        `
      }}
    >
      Product Title
    </Text>
    <Text 
      styles={{
        base: `
          color: #bdc3c7;
          font-size: 14px;
          margin-bottom: 15px;
        `
      }}
    >
      A short description of the product goes here. It's brief but informative.
    </Text>
    <Button
      styles={{
        base: `
          background-color: #e74c3c;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 8px;
          width: 100%;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s ease;
          &:hover {
            background-color: #c0392b;
          }
        `
      }}
    >
      Add to Cart
    </Button>
  </Box>
  );
};

export default MyComponent;

In this example:

• The Button,Text,Image,Box,Input,Label,ul,li,Footer,Form and more 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.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

Explanation of Sections:

1. About the package: Describes the purpose of the package and its core functionalities.
2. Installation: Provides the commands to install the package using npm or yarn.
3. Importing the Tags: Explains how to import the key components (Box, Text, Button, etc.) into a React project.
4. Applying the CSS: Shows how to apply CSS using props with responsive breakpoints.
5. Benefits: Highlights the advantages of using the package, such as responsiveness, ease of use, and customization.
6. Advanced Configuration: Briefly introduces how users can customize the breakpoints by configuring the mess.config.js file.
7. Contribution: Encourages developers to contribute to the package if they want to add features or improve it.

---