Skip to content

Commit

Permalink
Fixes in some Front lessons
Browse files Browse the repository at this point in the history
  • Loading branch information
Abel-HenryLapassat committed Jan 2, 2025
1 parent 6161ff5 commit 7a1a083
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 60 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ The use of such features can be encountered due to various needs, or specific us
![](identity-guidelines.png)

When integrating a Simplicité's instance into an existing system with a *distinct identity*, or specific *design guidelines*, you have the possibility to customize and align your instance's UI to those in order to ensure ease of use and familiarity for end-users.

These customizations can extend to the layout and organization of your Simplicité application.

**Example**: the government's interfaces shall follow the *DSFR design guideline*, so they need to align their Simplicité's interface to match it's rules.
Expand All @@ -27,11 +28,14 @@ These customizations can extend to the layout and organization of your Simplicit

![](client-oriented-webpage.png)

If your solution is *client-oriented*, you may benefit from creating a *custom front-end* that is tailored to meet the specific needs of your end-users and possible customers.
If your solution is *client-oriented*, you may benefit from creating a *custom front-end* that is tailored to meet the specific needs of your end-users and possible customers. For example you can want your client to be immersed in a specific environment if you wanna apply some specific marketing strategies or user-oriented designs. The idea is that Simplicité will allow you to customize the fronts of your applications, and even take them outside of the solutions if you don't want to mix anything together.

There are numerous possibilities, but a common example is the one of having products and client ordering them, this is a workflow allowed by Simplicité by default (accessible & illustrated in the *Demo* module). But you could want a specific experience for your customers, for example to preview videos or very specific visualisations of your products. Another possibility is that you want your interfaces to contain widgets or layouts that you've already designed --also maybe implemented-- that you really want to include.

**Example**: in case of a system or application containing orders, possibly emitted by clients, you might benefit from having a minimalist webpage using a more *user-friendly* interface than Simplicité's default one.

![](order-internal-page.png)
![](order-external-page.png)

### Use of specific web technologies

Expand All @@ -50,49 +54,49 @@ In order to properly manipulate and customize your Simplicité applications, it

![](disposition-schema.png)

* **HEADER:**
* **MENU:**
* **WORK:**
* **FOOTER:**
* **HEADER -** remains visible and accessible whatever you are displaying, usually contains a set of necessary shortcuts and features that you want to access anytime such as:
- Global Search Tool
- Scope Navigation
- Shortcuts Dropdown
- User Informations
- Parameters Menu

* **MENU -** contains all your application's sections, with sub-menus and categories, it helps you to intuitively navigate through your applications. You can also embed specific features and categories (trays, typed items, ...).

### CSS stylesheet.s (optional)
* **WORK -** this represents the main area of interest, where all dynamic content is displayed, indeed it is the biggest one. That's where any of your search or navigation result will appear and be interactible with.

### JS script.s (optional)
* **FOOTER -** this last parts serves to add some specific links that less users would access but that are still mandatory, like Legal Mentions and Accessibility features.

## Agenda

This part of the documentation follows the following organization and flow:

### Basic customizations

1 - *Theme Editor*; presents the tool and illustrating how to modify the general theme and to adjust specific elements.
2 - *Addons*; explains how to specificaly customize micro-interactions or overriding foundational styles with *{less}*
3 - *Widgets Integration*; shows the workflows to integrate existing Simplicité's widget in order to understand the logic behind the integration of external objects.

### Advanced customizations
0) This introduction document.
1) Presentation of the [Theme Editor](https://docs.simplicite.io/lesson/docs/front/theme-editor) tool, allowing you to customize the themes and styles of you applications, all within Simplicité's solution.
2) Overview of the [complementary tool](https://docs.simplicite.io/lesson/docs/front/styles) for theming, allowing you to add even more precise customizations to your applications.
3) Guide through the [javascript development](https://docs.simplicite.io/lesson/docs/front/javascript-dev) in Simplicité, both outside with the *NPM Library* and inside with the *External Objects*.
4) Breakdown of the [Ajax Library](https://docs.simplicite.io/lesson/docs/front/lib-ajax) that is useful for javascript development as it presents the core functions and methods to navigate and manipulate Simplicité's concepts and objects.
5) An understanding of how to create [Custom UI Components](https://docs.simplicite.io/lesson/docs/front/ui-components), breaking down the processes and techniques to do so using Simplicité's *External Objects* and some *Web Development*.
6) An extension of *UI Components* to now make those objects outside of Simplicité, creating [external webpages](https://docs.simplicite.io/lesson/docs/front/web-page) that communicates with Simplicité's backend and allow for even more customized fronts.

1 - *Widgets Creation*; understanding how to design and implement custom tools such as widgets or dashboards.
2 - *Responsive External Objects*; presents how to create and manage responsive, external design elements for seamless integration.
3 - *External Webpages (Native)*; shows and illustrates how to develop specific pages fully connected and integrated into your Simplicité's application.
4 - *External Webpages (Framework*); explains how to do the same as *3* but using web frameworks instead of native configurations.dsfr.
2 - *Responsive External Objects*; presents how to create and manage responsive, external design elements for seamless integration.
3 - *External Webpages (Native)*; shows and illustrates how to develop specific pages fully connected and integrated into your Simplicité's application.
4 - *External Webpages (Framework*); explains how to do the same as *3* but using web frameworks instead of native configurations.dsfr.
Still it is roughly organized in 2 parts, presenting first the basic and very accessible customizations, then delving into more tech aspects of customizations and adressing to web and frontend developpers. All documents are overall independent from each others if your need is only one specific concept, but it is also possible to read them in the right order and get a progressive understanding of how to customize and adapt your Simplicité applications.

### Other relevant lessons

* [**External Objects (Tutorial)**](https://docs.simplicite.io/lesson/tutorial/development/external-object)
* [**Responsive UI (Documentation)**](https://docs.simplicite.io/lesson/docs/ui/responsive)
* [**Custom UI disposition (Documentation)**](https://docs.simplicite.io/lesson/docs/core/disposition-code-examples)
* [**Core Javascript (Documentation)**](https://docs.simplicite.io/lesson/docs/core/javascript-code-examples)
* [**Interface tool `$ui` (Documentation)**](https://docs.simplicite.io/lesson/docs/core/ui-tools-code-examples)
* [**Custom Services through External Objects (Documentation)**](https://docs.simplicite.io/lesson/docs/integration/webservices/custom-services)
* [**Ajax API (Documentation)**](https://docs.simplicite.io/lesson/docs/integration/librairies/ajax-api)
* [**External Objects (Tutorial)**](https://docs.simplicite.io/lesson/tutorial/development/external-object)
* [**Responsive UI (Documentation)**](https://docs.simplicite.io/lesson/docs/ui/responsive)
* [**Custom UI disposition (Documentation)**](https://docs.simplicite.io/lesson/docs/core/disposition-code-examples)
* [**Core Javascript (Documentation)**](https://docs.simplicite.io/lesson/docs/core/javascript-code-examples)
* [**Interface tool `$ui` (Documentation)**](https://docs.simplicite.io/lesson/docs/core/ui-tools-code-examples)
* [**Custom Services through External Objects (Documentation)**](https://docs.simplicite.io/lesson/docs/integration/webservices/custom-services)
* [**Ajax API (Documentation)**](https://docs.simplicite.io/lesson/docs/integration/librairies/ajax-api)
* [**Simplicité NPM Javascript API Doc**](https://simplicitesoftware.github.io/javascript-api/)
Don't hesitate to also check on other lessons that are relevant for the presented concepts and features,:

* [*External Objects (Tutorial)*](https://docs.simplicite.io/lesson/tutorial/development/external-object)
* [*Responsive UI (Documentation)*](https://docs.simplicite.io/lesson/docs/ui/responsive)
* [*Custom UI disposition (Documentation)*](https://docs.simplicite.io/lesson/docs/core/disposition-code-examples)
* [*Core Javascript (Documentation)*](https://docs.simplicite.io/lesson/docs/core/javascript-code-examples)
* [*Interface tool `$ui` (Documentation)*](https://docs.simplicite.io/lesson/docs/core/ui-tools-code-examples)
* [*Custom Services through External Objects (Documentation)*](https://docs.simplicite.io/lesson/docs/integration/webservices/custom-services)
* [*Ajax API (Documentation)*](https://docs.simplicite.io/lesson/docs/integration/librairies/ajax-api)
* [*External Objects (Tutorial)*](https://docs.simplicite.io/lesson/tutorial/development/external-object)
* [*Responsive UI (Documentation)*](https://docs.simplicite.io/lesson/docs/ui/responsive)
* [*Custom UI disposition (Documentation)*](https://docs.simplicite.io/lesson/docs/core/disposition-code-examples)
* [*Core Javascript (Documentation)*](https://docs.simplicite.io/lesson/docs/core/javascript-code-examples)
* [*Interface tool `$ui` (Documentation)*](https://docs.simplicite.io/lesson/docs/core/ui-tools-code-examples)
* [*Custom Services through External Objects (Documentation)*](https://docs.simplicite.io/lesson/docs/integration/webservices/custom-services)
* [*Ajax API (Documentation)*](https://docs.simplicite.io/lesson/docs/integration/librairies/ajax-api)
* [*Simplicité NPM Javascript API Doc*](https://simplicitesoftware.github.io/javascript-api/)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 7a1a083

Please sign in to comment.