You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.9 KiB
1.9 KiB
| date | title | slug | weight | toc | draft | menu |
|---|---|---|---|---|---|---|
| 2021-10-13T16:00:00+02:00 | Guidelines for Frontend Development | guidelines-frontend | 20 | false | false | [{sidebar [{parent developers} {name Guidelines for Frontend} {weight 20} {identifier guidelines-frontend}]}] |
Guidelines for Frontend Development
Table of Contents
{{< toc >}}
Background
Gitea uses Less CSS, Fomantic-UI (based on jQuery) and Vue2 for its frontend.
The HTML pages are rendered by Go HTML Template
General Guidelines
We recommend Google HTML/CSS Style Guide and Google JavaScript Style Guide
Gitea specific guidelines:
- Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
- HTML ids and classes should use kebab-case.
- HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the
js-prefix for classes that are only used in JavaScript. - jQuery events across different features should use their own namespaces.
- CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names to overwrite framework styles. We recommend to use the
us-prefix for user defined styles. - The backend can pass complex data to the frontend by using
ctx.PageData["myModuleData"] = map[]{} - Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
Vue2/Vue3 and JSX
Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.