What?

It's yet another design system but experimental and built for Nunjucks components, working on top of the awesome Apostrophe (version 3 alpha).

Development / Demo install

Clone this and

npm i

Be sure you have mongodb running. If you don't but you have docker-compose installed - we got your back! Just do:

docker-compose up -d

It'll take a while but only the first time. Promise.

When you are ready playing stop your mongo:

docker-compose down

Your database will be saved no matter that. If you want to completely remove it:

docker volume ls

You should see apos-ds_mongodb-data (or similar if you cloned in different than the default folder). Execute docker volume rm apos-ds_mongodb-data to remove it.

Run it

You should have mongodb running on default port.

The demo app packages/app is slightly modified Apostrophe 3 boilerplate. In order to be able to manage (add, edit pages, etc) your installation, you have to create user:

cd packages/app && node app @apostrophecms/user:add dev admin

This will create user dev with administration permissions.

From the project root or inside packages/app run:

npm run dev

To disable Webpack Live and Hot Reload (for some reason):

WP_HOT=0 run dev

Some instructions are available on the initial home page. Log in and create new page with type Design System.

NOTE: if you see an error in your terminal stating something along lines slug already in use, you need to reset your database (the design system is now parked at /design-system route). More information is available at the welcome screen of the app.

Where are the docs?

The integration guide

Take a look at the packages/app for example integration, stories and "Material Design Components" implementation.

Run npm run dev and open http://localhost:3000/design-system. Read the stories (they are documented) and the special Docs stories category and inspect the code in packages/app.

Where is the npm package?

npm i @corllete/apos-ds@alpha

The full story

A quick look