Iremono is a semi-atomic CSS styling kit for designing in code.
This is a work in progress. I will be actively updating it in use on current projects. Expect breaking changes. These notes are not even up-to-date…
-
Install:
yarn add callumflack/iremono
ornpm i callumflack/iremono
. -
Iremono uses postcss. Install the deps:
yarn add postcss-mixins postcss-easy-import postcss-preset-env
-
Create a variables file. See
variables.example.css
. This lists all the css custom properties used. You can customise everything iniremono
from this file. -
Import your
variables.css
andiremono
into your CSS index file, as described below. The order of imports matters: add your variables first, then font-faces (if required), and theniremono
. Theme stylings should be last. This way, all utilities and mixins withiniremono
will be available to use in your theme css as well.
/* Variables */
@import "./variables.css";
/* Font faces, if you wish */
@import "./typography/font-face.css";
/* Iremono */
@import "iremono/index.css";
/* Theme your website… */
@import "./theme/button.css";
- Finally, this postcss library makes use of
postcss-mixins
,postcss-easy-import
andpostcss-preset-env
. Manage their config with apostcss.config.js
file, an example of which is provided in this repo.
Some form of documentation will be done in time. The best way to check it out is to download it and have a play. Here's a few opionated techniques I've used:
- Responsive typography using ems against a body font-size in rems, whose value is updated at media queries.
- Updating the value of css custom properties in media queries. This means I can manage things like white space responsively with a single line of css that holds a single custom variable. No complicated and tediously managed media queries.
- The most used utilities are name-spaced with their type's initial letter. For example, width classes start with
w-
. But not every utility is namespaced this way. I don't want to remember too much to use the system.
Iremono means "vessel" or "container" in Japanese. I don't speak Japanese, but I came across it serendipitously and I liked how it incorporates the word "mono". I wanted to create a standalone set of CSS patterns I could just drop in to any project. So in my naive dot-connecting way, a "mono vessel" sounded right. The name has stuck for some time.