# monica.css: A Minimal CSS Framework for Reusable Layout Utilities

DevFeed: [monica.css: A Minimal CSS Framework for Reusable Layout Utilities](<https://devfeed.tech/articles/monica-css-35530.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/monica-dot-css/>)

Author: Monica Dinculescu

Published: 2020-02-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [CSS Framework](<https://devfeed.tech/topics/css-framework.md>), [CSS](<https://devfeed.tech/topics/css.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [framework](<https://devfeed.tech/tags/framework.md>), [html](<https://devfeed.tech/tags/html.md>)

## AI overview

The article introduces monica.css, a small CSS framework created as a copy-paste collection of frequently used layout utilities. It provides reusable classes for horizontal and vertical flexbox layouts, centering, spacing, visibility, and related defaults.

## Source excerpt

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 <div class="horizontal"> 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 <div class="horizontal"> 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; }