DEV Community

loading...

Introducing Rececss: simple but highly customizable alternative to Tailwind

streletss profile image nikita ・2 min read

As many front-end developers I've realized the benefits of css utility classes approach for styling. Tailwind is indeed a great tool but I've been constantly finding myself in a situations when I got pretty much exhausted by configuring it to use values, classnames or states I wanted to.

So I decided to have fun and develop yet another css utils generator with this motivation in mind:

  1. Autogenerated unit values with range syntax support.
  2. Ability to split output files by media queries.
  3. More control over state utilities (:hover, :active, js states).
  4. Rich classnames customization that default to Emmet abbreviations.

And here's what I came up with:

GitHub logo re-ce / rececss

Minimalistic, fully customizable CSS utilities generator

Configuration

// rececss.config.js

module.exports = {
  output: {
    path: ".",
    splitByMedia: true,
  },
  media: {
    md: "only screen and (min-width: 768px)",
    lg: "only screen and (min-width: 1024px)"
  },
  rules: {
    width: { $px: [50, 100], $pct: [100] },
    height: { $px: [50, 100] },
    padding: {
      edges: { $px: [[0, 50, 5]] }
    },
    margin: {
      edges: { $px: [-80, [0, 50, 5]] }
    },
    font: {
      size: { $px: [[8, 24, 2]] },
      family: { pri: "'Archivo Black', sans-serif", sec: "'Montserrat', sans-serif" },
    },
    border: {
      shorthand: { sep: "1px solid rgba(0,0,0,0.1)", frame: "10px solid #fff", },
      radius: { $px: [15], $pct: [50] },
    },
    background: {
      color: { light: "#fff", blue: "#ECF0FB", }
    },
    shadow: {
      box: { air: "0px 4px 12px rgba(0, 0, 0, 0.08)", }
    },
    color: { blue: "#51568A" },
  },
}

Enter fullscreen mode Exit fullscreen mode

Usage

Running npx rececss from within a folder that contains this config will generate three separate css files which later could be used in your markup:

<link href="./rececss.css" rel="stylesheet">
<link href="./rececss.md.css" rel="stylesheet" media="only screen and (min-width: 768px)">
<link href="./rececss.lg.css" rel="stylesheet" media="only screen and (min-width: 1024px)">
Enter fullscreen mode Exit fullscreen mode

If media is provided browsers will apply the lowest download priority to the stylesheets that didn't matched its media query.

Check out the generated classnames in action:

<body class="bgc_blue p_30">
  <div class="bgc_light bdrs_15 bxsh_air p_30 mt_50">
    <div class="d_f fxd_c ai_c md:fxd_r">
      <img
        src="./avatar.jpg"
        class="w_100 h_100 bd_frame bdrs_50% mt_-80 md:bdrs_15 md:mt_0 md:bd_n"
      />

      <div class="ta_c md:ta_l md:pl_15 md:d_f jc_sb fx_a ai_c">
        <div class="ph_10">
          <p class="ff_pri c_blue mv_10 fz_24 md:mt_0">Some Person</p>
          <p class="ff_sec m_0 mb_30 md:mb_0">JS Developer</p>
        </div>

        <div class="d_f jc_c">
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$6460</p>
            <p class="ff_sec">Income</p>
          </div>
          <div class="ph_15 bdr_sep">
            <p class="ff_pri c_blue fz_20">$1240</p>
            <p class="ff_sec">Expenses</p>
          </div>
          <div class="ph_15">
            <p class="ff_pri c_blue fz_20">$870</p>
            <p class="ff_sec">Loan</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

And the result:

Example result

Check out the documentation if you're interested on how to modify classnames, use :hover, :focus, or even javascript driven states.

The project is in the early stage of development so I would be really happy to receive any feedback. If you want to help feel free to open an issue, submit a PR or just give this thing a star if you like it.

GitHub logo re-ce / rececss

Minimalistic, fully customizable CSS utilities generator

Thanks for reading.

Discussion (2)

pic
Editor guide
Collapse
giorgosk profile image
Giorgos Kontopoulos πŸ‘€

I think this is a brilliant approach, hopefully I will have some time to take a look over the weekend. Just wanted to mention another great utility library that I have come across that you might want to look for ideas github.com/yogurt-foundation/yogur...

Collapse
streletss profile image
nikita Author

Thanks for the feedback and reference. Will definitely take a look