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_suite_bootstrap
- https://www.drupal.org/project/ui_suite
- https://www.drupal.org/project/ui_patterns
- 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