This is a training session for a complete overview of 2sxc in 2 hours. It uses the 2illumin8 training model. 

Training Specs

Goals of this Training

1. Ensure that all participants have a good understanding of professional themes, challenges and how to solve using Bootstrap5 and 2shine

Intended Audience

This training is targeted at people who have already had some experience with DNN at a technical level - for example Web Designers, Developers and IT-Operations. 

Start: Challenges for Designers

1. Quality
   1. Perfect on Desktop and Mobile
   2. Very high page speed
   3. Clean logos in all sizes
2. Consistent
   1. Modules / Apps / Content all have the same look and feel
   2. Everything uses the same principles
3. Flexible
   1. Can easily be changed
      
   2. Can easily handle edge cases like different colors / look
      1. by site/portal
      2. by special pages
      3. by branch in navigation
      4. by language
      5. by user group
   3. Can handle Mega-Menus
   4. Can be used on landing pages
4. Efficient to develop
   1. High automation
   2. Best modern practices
5. Lifecycle: Stays clean & clear even after many years of small changes

Solution Overview

1. Bootstrap5 implemented using Best-Practices
2. Containers
3. Themes
4. DDR Menus / Navigation
5. Magic Page Classes
6. Magic Container IDs
7. Breadcrumbs
8. Webpack
   1. TypeScript
   2. SASS
9. In-Theme C# Code
10. 2sxc integration

Bootstrap5 Basics

1. BS Class Naming conventions / principles
2. Different models
   1. With SASS variables (recommended)
   2. Overwrite styles on generated Bootstrap (not recommended)
3. SASS
   1. Mixins
   2. Breakpoints
4. Webpack
5. Variables files
6. TypeScript
   1. No jQuery

Themes

1. One Skin - 5 different Themes for common use cases
   
   1. Default
   2. Centered
   3. Centered with Submenu
   4. Fullscreen
   5. Floating Header
2. Customize each page / portal as you like
3. Uncomplicated to create more themes

Containers

1. 3 different Containers for common use cases 
   1. Customize each page or module to fit your layout
   2. Different Spacings
   3. Compatible with non 2sxc elements

DDR Menus / Navigation

1. Set navigation level
2. Configurable depth
3. Show navigation by page name
4. Easy to adjust or create new one

Magic Page Classes

1. 2shine will add various classes to the body tag to make all kinds of stylings easy.
   
   1. page-### 
   2. nav-level-### 
   3. lang-en 
   4. lang-root-en 
   5. lang-neutral-en 
   6. site-###
   7. page-root-###
   8. page-root-neutral-### 
   9. to-shine-variation-"layout variation"
   10. to-shine-mainnav-varriation-"right/ center/ left"
   11. page-is-home 
2. Keep things simple and managable 
3. Create CSS rules to adjust anything you need

Magic Container IDs

1. Every container that is created gets a specific ID assigned to it
   
2. Style or customize exactly the module that you want
3. ID looks something like this module-"number"
4. This ID can be directly referenced in your SCSS code

Breadcrumbs

1. Responsive Breadcrumb menu on every page
2. Made with the DNN DDR menus
3. Collapsing the lower levels on small devices

Webpack

1. Compiles Typescript into common JS
   1. Strongly typed programming language that builds on JavaScript
2. Compiles SASS in common CSS
   1. Sass is a stylesheet language that’s compiled to CSS
   2. It allows you to use variables, nested rules, mixins, functions
   3. Well-organized stylesheets
   4. Autoprefixer parse CSS and add vendor prefixes to CSS rules
3. Minimize all compiled files
4. Merge all Files in one

2sxc integration

1. Render a 2sxc module to the skin
2. Use 2sxc data in the skin for additional page metadata
3. ...or for page OpenGraph data
4. Or for using the new CSP (Content Security Policy) features

Help & Documentation

1. Skin Demo
2. Skin Documentation
3. Bootstrap 5 Documentation
4. Webpack
5. SASS
6. Typescript
7. DNN Community Documentation
8. DNN Corp Documentation