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.
Top comments (2)
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...
Thanks for the feedback and reference. Will definitely take a look