fontis.css establishes a new generation of CSS frameworks!
fontis.css is the first CSS framework of its kind. It does not offer a concrete design, but provides specialized algorithms that promote a harmonious overall appearance. It also offers the option of storing different configurations for an algorithm. This allows you to create a unique design system in no time at all.
fontis is not like other CSS frameworks. CSS is a programming language and fontis.css activates its power to help you and your team develop unique design systems faster.
David J. Schwarz – Creator of fontis.css
fontis.css provides three core algorithms – each covering specific aspects of design:
typographylayoutpaint
Before you create your first design system with fontis.css, take a look at how it will be used afterwards:
<body data-typography data-paint>
<header>...</header>
<nav>
<ul data-layout="flex">
...
</ul>
</nav>
<main data-typography=pagecontent>
<article>...</article>
</main>
<footer data-paint=pagefooter data-layout=grid-pad>
<section>...</section>
<section>...</section>
</footer>
</body>As you can see, fontis.css uses attributes instead of classes. The attribute marks the element from which the algorithm is applied. The attribute value refers to the configured variant. If a descendant element is marked with an algorithm attribute of the same type, the scope ends and the algorithm starts again with the specified configuration.
To be clear: It's pure CSS. You don't need any tools.
Copy or import fontis.css to the beginning of your CSS file.
@import url("path/to/fontis.css");
/* Your code here. */fontis.css declares cascade layers that you can hook into. Each algorithm has a core and a lib layer.
To customize a base algorithm, hook into the corresponding core layer. In this example, the typography algorithm is adjusted:
/* ... */
@layer fontis.typography.core {
[data-typography] {
--ft-font-size-base: clamp(1rem, 0.8913rem + 0.5435vw, 1.3125rem);
--ft-scale-ratio: 1.25;
}
}To create a variant, add it to the library. To do this, hook into the corresponding lib layer. To identify the variant, give it a unique name. In this example, the name is pagecontent.
@layer fontis.typography.lib {
[data-typography|="pagecontent"] {
--ft-font-size-base: calc(1em * var(--FT-SCALE-L));
--ft-heading-font-family: serif;
--ft-heading-5-font-family: inherit;
--ft-heading-6-font-family: inherit;
}
}You have created the basis for your own design system!.
I hope you got an idea how much fontis.css can speed up your design system development and free you to create something unique.
If you have any questions or feedback, feel free to open a new discussion.
⛲