2015-03-08 21:56:45 +00:00
|
|
|
# UI Guide for building GitLab
|
|
|
|
|
|
|
|
|
|
## GitLab UI development kit
|
|
|
|
|
|
|
|
|
|
We created a page inside GitLab where you can check commonly used html and css elements.
|
|
|
|
|
|
|
|
|
|
When you run GitLab instance locally - just visit http://localhost:3000/help/ui page to see UI examples
|
|
|
|
|
you can use during GitLab development.
|
2016-05-25 18:44:02 +00:00
|
|
|
|
|
|
|
|
## Design repository
|
|
|
|
|
|
|
|
|
|
All design files are stored in the [gitlab-design](https://gitlab.com/gitlab-org/gitlab-design)
|
|
|
|
|
repository and maintained by GitLab UX designers.
|
|
|
|
|
|
|
|
|
|
## Navigation
|
|
|
|
|
|
|
|
|
|
GitLab layout contains of 2 sections: left sidebar and content. Left sidebar
|
|
|
|
|
contains static navigation menu no matter what page you visit. It also has GitLab logo
|
|
|
|
|
and current user profile picture. Content section contains of header and content itself.
|
|
|
|
|
Header describes what area of GitLab user see right now and what navigation is
|
|
|
|
|
available to user in this area. Depends on area (project, group, profile setting)
|
|
|
|
|
header name and navigation will change. For example when user visits one of the
|
|
|
|
|
project pages the header will contain a project name and navigation for project
|
|
|
|
|
pages. When visit group page it will contain a group name and navigation related
|
|
|
|
|
to this group.
|
|
|
|
|
|
|
|
|
|
### Adding new tab to header navigation
|
|
|
|
|
|
|
|
|
|
We try to keep amount of tabs in header navigation between 5 and 10 so it fits on
|
|
|
|
|
a laptop screens and doest not confure user with too many options. Ideally each
|
|
|
|
|
tab should represent some separate functionality. So everything related to issue
|
|
|
|
|
tracker should be under 'Issues' tab while everything related to wiki should
|
|
|
|
|
be under 'Wiki' tab etc.
|
|
|
|
|
|
|
|
|
|
## Mobile screen size
|
|
|
|
|
|
|
|
|
|
We want GitLab work on small mobile screens too. Because of size limitations
|
|
|
|
|
its impossible to fit everything on phone screen. Its ok in this case to hide
|
|
|
|
|
part of the UI on smaller resolutions in favor of better user experience.
|
|
|
|
|
However core functionality like browsing file, creating issue, comment, etc should
|
|
|
|
|
be available on all resolutions.
|
