Files

T

Bardioc26 042a1d4773 Learncost frontend (#42 )

* introduced central package  registry by package init function
* dynamic registration of routes, model, migrations and initializers.
* setting a docker compose project name to prevent shutdown of other containers with the same (composer)name
* ai documentation
* app template
* Create tests for ALL API entpoints in ALL packages Based on current data. Ensure that all API endpoints used in frontend are tested. These tests are crucial for the next refactoring tasks.
* adopting agent instructions for a more consistent coding style
* added desired module layout and debugging information
* Fix All Failing tests All failing tests are fixed now that makes the refactoring more easy since all tests must pass
* restored routes for maintenance
* added common translations
* added new tests for API Endpoint
* Merge branch 'separate_business_logic'
* added lern and skill improvement cost editing
* Set Docker image tag when building to prevent rebuild when nothing has changed
* add and remove PP for Weaponskill fixed
* add and remove PP for same named skills fixed
* add new task

2026-05-01 18:15:31 +02:00

2.2 KiB

Raw Blame History

description, applyTo

description	applyTo
Instructions for writing CSS following project conventions and best practices	*/.css,*/.vue

CSS Development Instructions

Cascading Design & Style Hierarchy

Central styles in src/assets/main.css are ALWAYS the preferred way to style. They ensure a consistent design across all views and components.

Cascade Layers (top to bottom)

src/assets/base.css — CSS variables, resets, root typography and color tokens
src/assets/main.css — Global layout, nav, buttons, modals, forms, loading states, typography, spacing — all shared UI patterns go here
<style scoped> in .vue files — Only for component-specific layout overrides that have no equivalent in main.css

Rule: Central vs. Scoped CSS

Use main.css for: buttons, modals, forms, inputs, nav, loading spinners, typography, color tokens, flex layout utilities — anything reused in 2+ places
Use <style scoped> only when a style is truly unique to one component and cannot be expressed by an existing global class
Never duplicate a style from main.css in a scoped block

Key CSS Techniques

Flexbox for all layouts — use gap instead of margins between flex children
CSS custom properties (variables) from base.css — always reference via var(--token-name)
Transitions (transition: all 0.2s ease) on all interactive elements
@media queries in main.css for responsive breakpoints (mobile-first)
z-index layers defined centrally: modals 1000, dropdowns 100, tooltips 200

Style Conventions

Class selectors only — no IDs, no inline styles, no !important
rem/em for font sizes; px only for borders and fixed-size icons
Max 3 levels of selector nesting
Always include :hover, :focus, :disabled states for interactive elements
box-sizing: border-box set globally — do not override

Anti-Patterns

❌ Don't add a scoped style that duplicates a main.css rule
❌ Don't use inline styles in Vue templates
❌ Don't use !important
❌ Don't use IDs as CSS selectors
❌ Don't use floats or position: absolute for layout — use flexbox
❌ Don't add vendor prefixes manually — autoprefixer handles this

2.2 KiB Raw Blame History