Skip to content

Latest commit

 

History

History
160 lines (122 loc) · 4.8 KB

README.md

File metadata and controls

160 lines (122 loc) · 4.8 KB
Raw

Medic 🚑

npm version Builds

Medic 🚑 is a minimal Tailwind Plugin that brings consistent, cross-breakpoint utilities to your applications. No need to set random padding and margin values, Medic's ergonomic API (stuff like p-layout) makes it easy to create consistent layouts across your application. Medic 🚑 is built using Crust, a simple boilerplate for creating and publishing packages to NPM.

Getting Started

  1. Install Medic 🚑 using your package manager of choice:
npm install @sassywares/medic
yarn add @sassywares/medic
pnpm add @sassywares/medic
  1. Add Medic 🚑 to your Tailwind config file:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('@sassywares/medic'),
  ],
};
  1. Now add the following to your tailwind config file:
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    // ...
    extend: {
      // ...
      theme: {
        spacing: {
            "2xs": "4px",
            xs: "8px",
            sm: "12px",
            base: "16px",
            md: "20px",
            lg: "24px",
            xl: "28px",
            "2xl": "32px",
            "3xl": "36px",
            "4xl": "40px",
            },
        },
    },
  },
};

These spacing values are used by Medic 🚑 to create the spacing utilities. You can modify these values to suit your needs. If the default values look good to you, you can simply add medic as a preset to your tailwind config file, this way you don't need to do anything else.

// tailwind.config.js
module.exports = {
  // ...
  presets: [
    // ...
    require('@sassywares/medic/preset'),
  ],
};

The Problem

When building applications, you often need to set padding, margin, and gap values for your elements. You also need to set these values for different breakpoints. This can be a tedious process and you have to be consistent or your UI components are going to be not as sassy as they should. I'm referring to stuff like gap-3 md:gap-4 lg:gap-5 for, maybe a card's content, and then repeating the same thing for every single card in your application, and then one day you decide to change the gap value for the medium breakpoint and you have to go through every single card and change the value. This is not fun and it's error-prone.

The Solution

Medic 🚑 solves this problem by providing a set of ergonomic utilities that make it easy to create consistent layouts across your application. Simply say gap-card and you have all 3 values set for you. No need to set random padding, margin, or gap values, Medic 🚑 has you covered.

Usage

Medic 🚑 breaks down your layouts into three layers: layouts, cards, and elements. Each layer has its own set of utilities that you can use to create consistent layouts across your application.

<article class="p-card">Card</article>

The above class will apply the following styles to the element:

.p-card {
  padding: 16px;
}

@media (min-width: 768px) {
  .p-card {
    padding: 20px;
  }
}

@media (min-width: 1024px) {
  .p-card {
    padding: 24px;
  }
}

You can do the same for layouts and elements:

<section class="p-layout">Layout</section>
<div class="p-element">Element</div>

Which layer to use?

Use the p-layout layer for your main layout elements like header, main, section, footer, etc. Use the p-card layer for your card elements like article, aside, div, etc. Use the p-element layer for your other elements like wrappers of button, input, a, etc.

I think of it like this: layouts are your grids, cards are your boxes, and elements are anything that goes inside the boxes.

Which properties are included?

Medic 🚑 includes the following properties for each layer:

  • p: "padding"
  • pt: "padding-top"
  • pr: "padding-right"
  • pb: "padding-bottom"
  • pl: "padding-left"
  • m: "margin"
  • mt: "margin-top"
  • mr: "margin-right"
  • mb: "margin-bottom"
  • ml: "margin-left"
  • gap: "gap"
  • "gap-x": "column-gap"
  • "gap-y": "row-gap"
  • "top": "top"
  • "right": "right"
  • "bottom": "bottom"
  • "left": "left"

Need more properties? Please open an issue or a pull request.

Contributing

Medic 🚑 comes from the community for the community. I made Medic to solve my own problems, but I'm sure there are other people out there who have the same problems. If you have any ideas on how to improve Medic 🚑, please open an issue or a pull request. I'm always open to new ideas.

License

Medic 🚑 is open source software released under the MIT License. We encourage you to use, modify, and distribute Medic as you see fit.