monica.css – Monica Dinculescu

nc efi placeholder

Back in the day when I worked on Polymer I got used to relying on a bunch of useful CSS classes
that at the time we called iron-flex-layout.
They were there partly because flexbox was a sadness on IE and you needed to say everything 3 times to maybe
get it right twice, and add some
very special flex-basis: 0.000000001px
“bug fixes” that tbh nobody should ever have to write by hand. But they were also there because it’s kind of nice to say


and for it to just work.

Some years later, it’s now 2020, and flexbox is really good everywhere! We don’t need iron-flex-layout anymore, but tbh I still
want to say

and for it to just work.

I know there are tons of CSS frameworks out there like tachyons that can do this for me, but most of these frameworks
do too much for me. I don’t work on large projects that need design systems, and I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just
want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there. It’s already minified and bundled (because you copy pasted it) so dare I say: fast loading and efficient? 🙃

* {box-sizing: border-box}
[hidden] {display: none !important}
[disabled] {pointer-events:none; opacity: 0.3}
.horizontal {display: flex; flex-direction: row; justify-content: space-between}
.vertical {display: flex; flex-direction: column}
.center {justify-content: center; align-items: center}
.flex {flex: 1}
html {
  --spacing-xs: 8px;
  --spacing: 24px;
  --spacing-s: 12px;
  --spacing-m: 36px;
}

Source link

Leave A Reply