57 lines
2.5 KiB
Markdown
57 lines
2.5 KiB
Markdown
# Project
|
|
|
|
This is a case study for creating a Yellow Cyberpunk theme called "CyberDuck" that is suitable for
|
|
use in a React project. It is based on Bootstrap v5 and Material icons.
|
|
|
|
## Stylesheets
|
|
|
|
We use a modular system based on SASS (SCSS), all style elements are stored in `src/styles`, each
|
|
Bootstrap core component gets its own file under `src/styles/components`.
|
|
|
|
**SCSS convention:**:
|
|
- Use modern `@use` and single-source SASS maps
|
|
- Component code should prefer compile-time SASS colors when using Sass functions, and read emitted
|
|
CSS custom properties (`--color-variant-*`, `--cyberduck-void-*`, `--cyberduck-font-display`) for
|
|
runtime theming.
|
|
- Order `@use` statements to include sass-builtins first, then bootstrap includes, then local includes
|
|
|
|
**Fonts:**
|
|
- Google fonts are included in `index.html`; the display font is referenced via `--cyberduck-font-display`
|
|
and `$cyberduck-font-display`.
|
|
|
|
**Colors:**
|
|
- The base background color variants are `--cyberduck-void-<shade>`, accents are `--cyberduck-yellow-<shade>`.
|
|
- All other colors stick to the Cyberpunk theme and use vibrant, neon style color palettes.
|
|
|
|
**Where to change visuals:**
|
|
- Edit partials under `src/styles/components` (e.g. `_navbar.scss`, `_card.scss`, `_footer.scss`).
|
|
- Update tokens in `src/styles/_variables.scss` to change palette or fonts globally.
|
|
|
|
## React
|
|
|
|
We use a modular system based on React Components, all are stored in `src/components`. Generic components
|
|
are stored in that base folder, more specific Components that are only used by one other type of component
|
|
get their own subfolder. Components have short, but descriptive names often mathing the type of tag,
|
|
container or view they represent.
|
|
|
|
**React/Typescript convention:**
|
|
- Use imports, multi imports from the same package are split over multiple lines so it generates clean diffs
|
|
- Imports are ordered: first React and React plugin imports, then third party imports, then local code
|
|
imports and the last imports are stylesheets. Global stylesheets are imported before local imports.
|
|
|
|
## Testing
|
|
|
|
Run the specific npm test commands for when making changes:
|
|
- For style updates run `npm run styles:check`
|
|
|
|
Don't run `npm run dev` without permission; if you want visual QA, ask me to run it and I will report
|
|
the URL and warnings.
|
|
|
|
## Changes strategy
|
|
|
|
Prefer patching over running external commands. Prefer inline replacement over removing files and
|
|
regenerating them.
|
|
|
|
When you need feedback from me, use the VSCode dialog option when possible, optimize interactions
|
|
with me to avoid typing where possible.
|