diff --git a/docs/guidelines-frontend.md b/docs/guidelines-frontend.md index 61a801ba384..68b33481843 100644 --- a/docs/guidelines-frontend.md +++ b/docs/guidelines-frontend.md @@ -6,7 +6,7 @@ and testing see [development.md](development.md) and [testing.md](testing.md). ## Background -The frontend uses [Vue 3](https://vuejs.org/), [Fomantic-UI](https://fomantic-ui.com/) (built on jQuery) +The frontend uses [Vue 3](https://vuejs.org/), hard-forked Fomantic-UI (built on jQuery) and [Tailwind CSS](https://tailwindcss.com/). Pages are rendered with Go HTML templates. Source files live in: @@ -44,8 +44,10 @@ Gitea uses Vue 3 **without** JSX to keep HTML and JavaScript separate. ## Gitea-specific conventions - Keep features in their own files or directories. -- Use kebab-case for HTML `id`s and classes, ideally with 2-3 feature keywords. +- Use kebab-case for HTML `id`s and classes with 2-3 feature keywords. - Prefix classes to avoid short-name conflicts between different frameworks. +- Our framework can automatically link "input" and "label" if they are the children of a `.field` element, + no need to write `id`/`for` attributes for them unless there are reasons to do so. - Create a new class name when overriding framework styles instead of editing the framework's own classes, or fix the framework's source to fix all cases. - Prefer semantic elements such as `