FOLDER STRUCTURE

src
└── ...
└── `components`
   ├── ...
   ├── ...
   └── ...
└── `core`
   ├── ...
   ├── ...
   └── ...
└── env
└── lang
└── layouts
└── middleware
└── pages
└── plugins
└── statics
└── store
└── `themes`
   ├── ...
   ├── ...
   └── ...

There are 3 main folders :

  • Components
  • Core
  • Theme

Tip container of @vuepress/theme-default

Components

The components forlder contain the default Djust Theme with all components. It's based on a "Atomic Design System" (opens new window). You find 5 main folders :

src
└── components
   ├── `atoms`
   ├── `molecules`
   └── `organisms`
   └── `templates`
   └── `pages`
  • atoms : here you find the smallest components, like button, badge, input, etc
  • molecules : here, you find small componenents, but they may contain some atoms (eg : the molecule DjButtonAddToCart contains DjButton)
  • Organisms
  • Templates
  • Pages

Core

The components forlder contain the Djust Business Rules.

src
└── core
   ├── `actions`
   ├── `api`
   └── `getters`
   └── ...
   └── ...

1 - api

In this folder you find all the Djust API Calls

2 - getters

In this folder you find all the Djust getters

3 - actions

In this folder you find all the Djust actions

Theme

In this folder, you can create you own theme

Others folders

assets

this folder contains all the style files of the projet. You can overload this folder. Read the installation page to know how to do it

env

this folder contains all the environement files. Each theme has is own environments variables. You can create here a file for you theme, and define your variables. You can find more details on the configuration page

lang

This folder contains all the langages files for each theme. You can create here your own files for your theme, and define your variables. If you create a theme from scratch, you can create a file from scratch, but if you modify an existing theme, then you should copy the langages files of this theme.