Streamlined CMS - DrupalCon Session
0 likes35 views
This document describes Streamlined CMS, a Drupal distribution from Smile focused on usability. It includes reusable design system components, integrates with existing design systems like Bootstrap, and allows non-technical users to build sites through a no-code interface. Streamlined CMS is well-suited for agencies implementing Drupal at scale through a "webfactory" approach. It has been successfully used to build sites for clients like LVMH and the French government.
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
- 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