Design

BOF Notes (Primary Designer)

• Bootstrap: head, body
• Layout.html → html that should be extended in every page

• Bootstrap → should have red lines in starter template (option 1, don’t need option 2)
• Red lines: give css/javascript from bootstrap

• Csp repo

• Steal nighthawk layout file
• Modify after it works
• Bootstrap recc/css is there, so it javascript
• Need to understand blocks
• {endblock}, {%block colors%}, etc.

• In layout: navbar; in body

• Everybody should use the same navbar

• Page not extending layout → subject to point deduction
• Body has block content

• Name of block ppl redefine in their code: will call it block body, change name to match name everybody wants (VARIABLE; CAN BE ANYTHING)
• Content: intended to be overwritten by ppl, also colors/metadata
• nOBoDY overrides navbar/bootstrap

• Teammates going to know layout standards through wiki
• Web page layout

• Linked on padlet
• Make pictorial view
• Helps to understand design of layout

• Templates in csp repo

• Fragments: footer, navbar, etc.

• Templates: main starting pt
• Static in csp repo

• All images (assets)
• Files, javascript files, navbar js file, all here
• Css pages
• Custom.css

• 20k lines

• Goal: one blueprint directory

• Starter directory → static/templates → starter.py ( has blueprint in it)

• Everything in starter code on website is in starter.py

• Starters directory → nighthawk coders page

• Register starter in main.py

• Focus → organize files in python

• Grouping py files in statics/templates

• Goal: one grouping of blueprint into project over next few weeks

• binary .html in csp repo

• • Extends layouts.html

Takes theme and transfers it to a new page Meta block → replaced with title binary page

• {%block meta%}
• <title binary page </title>

• Has navbar bc of extend

• All container stuff → use bootstrap

• Bootstrap has (containers, grids, cards, navbars, etc.)

• Dark mode

• Refresh? DM stays
• Two themes MUST be in page
• Mode must persist across all pages
• primary/secondary

• Csp repo

• Custom.css, custom.scss
• Under statics → scss
• Bootstrap → changing colors in there
• Scss file → generates css file (do work in scss)
• Dark mode → change grids, tables, everything bootstrap has
• Css for all of them

• In starter

• Go to templates, greet.html
• Inside greet → change container and run
• Takes out color (py-4 bg-primary)
• Can also mess w spacing

• In csp repo → in navbar.js

• Stays in dark mode after refreshing (javascript)
• localStorage → everytime we toggle, we etll system we’re storing in the browser (dark mode switch)
• Browser remembers → key value pair

• In custom.scss file

• Foobar foobar foobar foobar foobar foobar foobar

• Everytime this file is changed, custom.css is