Tri 2: Tech Talk Week 1: Organizing Bootstrap Files, Templates layouts, and Sassy

Student BOF review.

Layout and Design Manager is responsible.

Review Jinja2 and Layouts

• Bootstrap Starter Template
• Society layout.html
• head, style, script, body
• Society templates
• Society statics

Benefits to Blueprint, Society algorithms

• The focus is to organizing your files in Python.
• A benefit is on grouping py, statics, templates into a local structure and establish clear directory of ownership
• Helps to avoid merge conflicts
• Logical means of accessing Functions and Statics with url_for, avoids path confusions

Review understanding of Bootstrap

• Establishing consistent style across HTML, review starter templates
• Bootstrap has it all: Containers, Grids , Cards, Navbars etc

Dark Mode Example

• Objective is to preserve session properties
• Requires Light and Dark design considerations for each page, review "Starters" runtime menu
• Introduction to Sassy CSS (SCCS), used to support Dark Mode color actions, custom.sccs
• HTML usage of Bootstrap Colors joke.html
• Local storage and Java Script

Sassy CSS Installation Requirements

Install node.js

From Terminal in IntelliJ

• npm install -g sass
• npm install --global less
• npm install bootstrap

In .gitignore add lines

• node_modules
• /node_modules/.package-lock.json
• /package.json
• /package-lock.json

In IntelliJ Plugins add "File Watcher"

In IntelliJ Settings Tools-File-Watcher. configure SCSS