Introducing Rececss: simple but highly customizable alternative to Tailwind
nikita
Posted on April 11, 2021
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:
- Autogenerated unit values with range syntax support.
- Ability to split output files by media queries.
- More control over state utilities (
:hover,:active, js states). - Rich classnames customization that default to Emmet abbreviations.
And here's what I came up with:
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" },
},
}
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)">
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>
And the 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.
Thanks for reading.
Posted on April 11, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.