Atomic design in Nimbly · Docs

A small set of atoms and one way to combine them: every project composes exactly the blocks it needs.

Nimbly is a design system for the whole stack. The visual language is DaisyUI and Tailwind CSS, themed with your own tokens. On top of that you get a small set of atoms and one way to combine them, and every project composes exactly the blocks it needs. No prefabricated page blocks have to be restyled, overridden or carried along.

One mechanism

Everything in a template is a call between [# and #]:

[#card-article#]

A call is resolved by name. The name can be:

a template: a folder with an index.tpl, in the route's own folder or in ext/tpl/;
a variable: a value set earlier with [#set#] or loaded with [#data#];
a library: a PHP function in ext/lib/ that prepares data.

That is the whole model. A page, a section, a card and an icon are all the same kind of thing: a named block that can call other named blocks.

The atoms

Atom	Where it lives	What it is
Template	`ext/tpl/<name>/index.tpl`	Markup, styling and calls to other blocks, under one name.
Route	`ext/uri/<path>/index.tpl`	A template with an address.
Resource	`ext/data/<resource>/.meta`	The shape of one kind of record.
Library	`ext/lib/<name>.php`	Logic behind a name. No markup.
Theme	`ext/theme.css`, `ext/tailwind.theme.js`	The tokens of your brand, used by every block.

Composing

A block is made by writing it. This card did not exist until its file did:

<!-- ext/tpl/card-article/index.tpl -->
<li class="card bg-base-200">
    <div class="card-body">
        <p class="card-title">[#get item.title#]</p>
    </div>
</li>

card, card-body and card-title are DaisyUI classes, and bg-base-200 is a theme token. Change the token in the theme and every block that uses it follows.

A page uses it by name:

<!-- ext/uri/articles/main.tpl -->
[#data articles filter=published:1#]
<ul>
    [#repeat data.articles tpl=card-article#]
</ul>

Blocks call blocks, to any depth. A project contains only the blocks it composed, and a page runs only the blocks it calls.

Your application comes first

A name is looked up in ext/ before core/. A block in your application with the same name as a block of the framework takes its place, without changing the framework.

Your design, your names

The theme holds the tokens of your brand. Which blocks exist, what they are called and how they are grouped is a choice of the project.