To keep the core codebase as simple and clean as possible, all edge-case functionality is added through extensions. Directus is completely modular and extensible, so you'll never hit a ceiling or outgrow the framework.
Despite being an App resource, Directus extensions are actually stored in the API codebase/repository. This seems counter-intuitive, but is neccesary because the Directus App supports multitenancy (you can connect to multiple APIs from one App).
If you install a custom interface, like a "Seating Chart", you'll want that interface to be available within your project no matter which App you connect through. Because of this, we store all custom extensions in the API Instance, and to keep things organized, we decided to also serve all core extensions from the same place.
STRINGfield type might be shown as a text-input, dropdown, Map, WYSIWYG, or Color Picker. And on the Item Browse page you may want a
BOOLEANshown as a
You can include an extension in your project but disable it from being used by prepending its container directory with an underscore (
_). For example, the demo Page is included in the API codebase but is disabled by default:
The App includes an empty
/script.js file where you can add additional functionality to the App. For example you could use this file to add analytics or other trackers to the Directus Application.
The Directus Application includes an empty
/style.css file to override any part of the App with custom styles. Nearly every component in the platform has a class associated with it you can use to tweak the styles.
Most styling related properties in the application are using CSS Custom Properties (variables). These variables can be overwritten in your custom styles file to efficiently change the appearance of the whole app. All variables that can be overwritten can be referenced in the global styles file.
If you have a style tweak that would benefit all users of Directus, please consider opening a Pull Request for it!
The styles of the actual components in the app are being added to the DOM dynamically. Therefore, to avoid being overwritten by the cascade you'll need to use
!important in your styles.