Getting Started with UI Suite (UI Patterns) and Bootstrap in Drupal CMS

Join our livestream to learn how to use UI Suite (UI Patterns) and Bootstrap in Drupal CMS. What We'll Cover: Intro to the UI Suite and UI Patterns. UI Suite Bootstrap: Installation and configuration. Implement Bootstrap components directly from the Drupal CMS backend. And more… Join us to learn the benefits of using Bootstrap with UI Patterns. Modules and Themes https://www.drupal.org/project/ui_sui... https://www.drupal.org/project/ui_suite https://www.drupal.org/project/ui_pat... https://www.drupal.org/project/ui_styles https://www.drupal.org/project/ui_skins Chapters 00:00 Preshow Introduction 08:03 Introduction to UI Suite 10:25 UI Patterns 11:02 Understanding Single Directory Components (SDC) 13:18 UI Styles 14:12 UI Suite Bootstrap UI Suite Bootstrap 16:36 Download and Install UI Suite Bootstrap 18:04 Adding Bootstrap Library via Composer 21:02 Apply patch to library 23:41 Enabling UI Patterns, UI Styles, and Related Modules 26:14 Testing theme 26:58 Turn off CSS/JS aggregation and turn on debug mode UI Skins 28:41 Download and Install UI Skins 31:04 Access CSS Variables settings page 31:43 View UI Libraries 33:58 Change CSS Variable Create Alert Block Component 36:18 Add Alert component 37:00 Configure component properties 39:00 Add margin style Create Card Component 42:37 Implement card component 43:53 Configure Card view mode 44:15 Understanding view modes 44:51 Add card component 47:19 Add feature image to card component 49:13 Add card body component 50:42 Add title to card body 51:14 Add description to card body 53:26 Add tags to card body 58:41 Review card component Display Cards in Grid 59:57 Implement grid in Views 1:01:37 Configure Grid Row component 1:02:55 Configure grid column widget 1:05:08 Adjust spacing (styles) Create UI Suite Bootstrap Subtheme 1:06:30 Create subtheme 1:09:58 Run subtheme command 1:14:18 Enable subtheme 1:14:56 Understanding library overrides/extends 1:18:00 Override node template 1:21:20 Ensure Twig debugging 1:28:54 Compile SCSS Summary 1:33:50 Recap 1:35:46 Ending 1:36:52 Postshow #drupal #drupalcms #bootstrap