Introduction to Frontend Dev
This documentation is part of the Frontend Development category, designed to guide you through frontend customization within Simplicité.
This guide covers Simplicité's tools for customizing UIs and implementing custom designs while maintaining access to all back-office features.
Target Users
These functionalities are primarily for web designers and frontend developers who need to address requirements beyond Simplicité's default interface. The concepts involve:
- HTML, CSS, and JavaScript
- Web frameworks and CSS preprocessors
Use Cases
Visual Identity & Design Guidelines
When integrating Simplicité into systems with distinct design guidelines (e.g., government DSFR standards), you can customize the UI to ensure familiarity and compliance.
Client-Oriented Interfaces
For client-facing solutions, create custom frontends tailored to end-users. For example:
- Product catalogs with video previews
- Custom ordering interfaces
- Minimalist user-friendly pages
Specific Web Technologies
If your team uses specific frameworks (Vue.js, Mustache, etc.), Simplicité allows you to design interfaces using your preferred tools.
UI Structure
Simplicité's interface consists of four main sections:
- HEADER: Global navigation, search, shortcuts, and user info
- MENU: Application sections with sub-menus and categories
- WORK: Main content area for forms, lists, and dynamic content
- FOOTER: Legal mentions and accessibility features
Documentation Structure
This documentation follows a progressive learning path:
- Theme Editor - Customize themes and styles
- Complementary Styles - Advanced theme customization with addon.less
- JavaScript Development - NPM Library and External Objects
- Ajax Library - Core functions for navigating Simplicité concepts
- Custom UI Components - Create custom widgets
- External Webpages - Build standalone pages communicating with Simplicité