Streamlined CMS - DrupalCon Session

1. A Drupal distribution from Smile's R&D
STREAMLINED
CMS

2. A flexible standardized solution for
demanding clients looking for a
cost-effective DXP

3. About us

4. Florent Torregrosa
Grimreaper
Tech expert at Smile
I started to use Drupal since 2011 as a site builder
and then as a developer in 2013.
Various type of contributions:
● 40+ projects maintainer
● contrib and core patches
● French translation moderator
● event co-organizer
● former Drupal France board member

5. Nicolas Loye
Nicoloye
CTO at Smile
Treasurer of the French Drupal Association
I joined the community in 2006 and am a Drupal
enthusiast since then
Maintainer of several projects
When I am not coding I like any kind of game (board,
card, tabletop roleplaying, etc) and spending some
time with my cat.

6. Streamlined CMS,
Design system
oriented
■ Principles
■ UI Suite
■ Embarked

7. Reusable parts
Variants for certain components
Color palette / Styles
Layout elements
Agnostic from the content structure
What is a design system?

8. Parts of a design system
Layouts
(often grid based)
Styles
(utilities or helpers)
Components
(patterns & variants)
Examples
pages
Bootstrap Material Bulma
Themes & CSS
variables

9. Drupal integration

10. Drupal integration

11. Drupal integration

12. Drupal integration

13. Drupal integration

14. Drupal integration

15. Existing modules:
● UI Patterns & its ecosystem
● Layout Options
New modules originating from Smile:
● UI Styles
● UI Skins
● UI Examples
Keeping an eye on SDC & UI Patterns 2.x to follow
community trends!
UI Suite: origin & future

16. Component declaration is easy with UI Patterns and will
remain easy with SDC and UI Patterns 2.x.
UI Suite heavily relies on YAML declared plugins to avoid
front developers to have to write PHP code.
Component creation
alert:
label: Alert
variants:
primary: Primary
secondary: Secondary
success: Success
settings:
dismissible:
type: boolean
label: Dismissible?
preview: True
fields:
heading:
type: text
label: Heading
preview: Well done!
message:
type: render
label: Message
preview: "A simple alert—check it out!"

17. Use an existing design system for Streamlined CMS.
Our focus:
● Bootstrap's design system (ui_suite_bootstrap).
● The French government's design system (ui_suite_dsfr).
Any design system compatible with UI Suite.
Configure the design system to match your brand guidelines.
Contribute the website content easily.
Supported out-of-the-box
Quick Time To Market
Recognised design systems
Accessible and performant
Content editors and site builders
oriented

18. Implement your own design system within Streamlined CMS
following UI Suite philosophy/guidance.
Customize any component is still very simple.
Contribute the website content easily.
⇨ Optimized delivery on all the future websites.
Your design system
Better fit specific branding
requirements
Easy customization for your design
system
Streamlined user experience with
your own components
Still an optimized Time To Market

19. Streamlined CMS,
Industrialization in
mind
■ Quick delivery
■ Webfactory usage
■ Precursor projects

20. The Streamlined CMS was made to reply to the following needs:
Demo factory
Ready to use contrib modules and configuration assembly
for projects
Internal means mutualisation, ensuring the best
security and quality even for small projects
Goals

21. Webfactory usage
The Streamlined CMS is particularly well suited in
webfactory oriented projects.
Webfactories already allows to benefit from:
● hosting sharing
● features mutualisation
● reduced maintenance needs
But at the cost of few distinctions between the websites
without specific development.
With design system “live” customisation capabilities, the
specific development needed is highly reduced.

22. LVMH trusted Smile for the creation of a Drupal application framework used by certain
entities such as Moet-Hennessy and Sephora.
As part of its ongoing maintenance, which we continue to provide, we implemented our
Design System-oriented strategy, built upon the UI Suite ecosystem that forms the
backbone of our Streamlined CMS distribution.
This strategy was deployed on several websites, including in 2020 on "Sephora Beauty
Tips," a set of SEO-focused pages.
Custom: LVMH

23. A few years ago, the French government introduced a
Design System (https://www.systeme-de-design.gouv.fr/).
In the long run, this Design System will become mandatory
for government websites and can be adopted by
government agencies.
Smile played a significant role in developing the UI Suite
DSFR theme (https://www.drupal.org/project/ui_suite_dsfr),
which implements this Design System in Drupal. It has
been used to create several websites under the Ministry of
National Education, including:
● https://www.sports.gouv.fr/
● https://www.jeunes.gouv.fr/
Public: French government

24. Streamlined CMS,
No-code
philosophy
■ Site Building
■ Editor XP
■ Demo

25. Streamlined CMS platform has a No-Code approach.
It leverages Drupal's capabilities in terms of site
building (site creation through back-office
configuration) to the fullest.
These features, driven by core modules such as
Views or Layout Builder, are enhanced by modules
from the UI Suite initiative, which originated within
Smile and is now supported by several members of
the Drupal community.
Site building
Multiple types of elements
configurable:
● Header
● Footer
● Content
● Menus
● Views
● Forms
● …
HEADER
FOOTER
X
✓
X
✓
✓
✓

26. In practice, one of the goals of Streamlined CMS is to enable non-technical
contributors to build complex pages from pre-configured blocks while strictly adhering
to the site's design system.
This is particularly well-suited for unique pages such as:
● Homepage
● "Who Are We?"
● "Our Key Figures"
Or:
● Section headers
● Landing pages related to marketing campaigns
Contribution

27. Gin UI
streamlining
UI Patterns*
Contrib module assemble!
UI Patterns Settings
UI Patterns Field Formatters
UI Styles
UI Patterns Views Style
UI Patterns Layout Builder
UI Patterns Entity Links
UI Examples
UI Skins
Layout Builder
Layout Builder Asymmetric Translations
Layout Builder Browser
Layout Builder Lock Layout Builder Restrictions
Gin
Gin Layout Builder
Gin Toolbar
Gin Login
* big reorganization incoming in UI Patterns 2.x 🙌
Custom
UI Styles
improvements
Package
management
Blazy
Photoswipe
SVG image
Media
Animated GIF
Media Entity Download
Media Entity Link
Linkit
Editor Advanced Link

28. UX expertise
Contribution in the different modules
Future proof (real case scenarios for UI Suite Bootstrap)
Improved medias management
Improved content edition
Improved menu administration
Accessible components
Prepackaged security elements
Enhanced contributor experience

29. Default content structure on installation
Optional default content for demo
purpose
Then do what you want with the
content structure!
Kickstarter oriented

30. We provide only code updates
We do not force any structure, we build
a user experience around your
requirements
So we can obtain a highly personalized
content structure to fit your needs
Kickstarter oriented

31. Join us for
contribution opportunities
17-20 October, 2023
Room 4.1 & 4.2
Mentored
Contribution
First Time
Contributor Workshop
General
Contribution
#DrupalContributions
17 - 20 October: 9:00 - 18:00
Room 4.1
17 October: 17:15 - 18:00
Room 2.4
18 October : 10:30 - 11:15
Room 2.4
20 October : 09:00 - 12:30
Room 4.2
20 October : 09:00 – 18:00
Room 4.2

32. What did you think?
Please fill in this session survey directly from the Mobile App.

33. We appreciate your feedback!
Please take a moment to fill out:
the Individual
session surveys
(in the Mobile App or
QR code at the entrance of each room)
1 2
the general
conference survey
Flash the QR code
OR
It will be sent by email