Styleguide SCM-Manager 2

Important:
This overview is focused on visual, not structural or functional aspects. It may contain class names not yet integrated in SCM-Manager and can only display the present state. There may be changes to some elements in the near future.


Colors

Overview for all main colors with examples for lighter nuances.
  • Colors with 75%-25% opacity will only be used for elements like graphs (where there is a need for extra color shades) and relevant interaction states (like disabled buttons).
  • As soon as there is a use case where the separation of the colors for "info" and "link" seems necessary, it will be possible to change the current color assignment.
Class Color (100%) Color (75%) Color (50%) Color (25%)
.has-background-dark
.has-background-dark-75
.has-background-dark-50
.has-background-dark-25		  

#363636 		 

#686868 		 

#9a9a9a 		 

#cdcdcd
.has-background-info
.has-background-info-75
.has-background-info-50
.has-background-info-25		  

#33b2e8 		 

#66c5ee 		 

#99d8f3 		 

#ccecf9
.has-background-link
.has-background-link-75
.has-background-link-50
.has-background-link-25		  

#33b2e8 		 

#66c5ee 		 

#99d8f3 		 

#ccecf9
.has-background-primary
.has-background-primary-75
.has-background-primary-50
.has-background-primary-25		  

#00d1df 		 

#40dde7 		 

#7fe8ef 		 

#bff3f7
.has-background-success
.has-background-success-75
.has-background-success-50
.has-background-success-25		  

#00c79b 		 

#40d5b4 		 

#7fe3cd 		 

#bff1e6
.has-background-warning
.has-background-warning-75
.has-background-warning-50
.has-background-warning-25		  

#ffdd57 		 

#ffe681 		 

#ffeeab 		 

#fff6d5
.has-background-danger
.has-background-danger-75
.has-background-danger-50
.has-background-danger-25		  

#ff3860 		 

#ff6a88 		 

#ff9baf 		 

#ffcdd7


Class Text
.has-text-dark
 Beispieltext
.has-text-info
 Beispieltext
.has-text-link
 Beispieltext
.has-text-primary
 Beispieltext
.has-text-success
 Beispieltext
.has-text-warning Attention: Has color #FFB600 because of readability issues with the original color #ffdd57. Beispieltext
.has-text-danger
 Beispieltext


Hero & Main Navigation (Tab-based)

May contain mobile hamburger menu in the future?
SCM-Manager

Sidebar Navigation

  • Plugins are always listed after "Information", "Commits" and "Sources".
  • "Settings" is always located at the bottom.
  • The order of the navigation elements should be consistent for all subpages.
  • Icons for plugins and submenus are still missing.

Buttons



Standard Buttons

Standard Buttons are using the full base colors.

Primary

Link

Info

Success

Warning

Danger




Disabled buttons

Disabled buttons are using 25% of the base colors.

Primary

Link

Info

Success

Warning

Danger




Hovered buttons

The hover color of each button is 10% darker than the base color.

Primary

Link

Info

Success

Warning

Danger




Active buttons

The active color of each button is 20% darker than the base color.

Primary

Link

Info

Success

Warning

Danger




Button groups and addons

  • If buttons are part of the same functional group they can be displayed as "addon buttons".
  • Avoid buttons sticking together without being addon buttons.
  • If you don't want buttons to be addons, please place enough space between them.
  • In cases where just the first button is visible and others might be added later in the process, or buttons aren't part of the same functional group, "grouped buttons" can be used.
  • If the contents of buttons have a direct connection (like "Create" and "Delete") they should be placed next to each other.
Button addon

Run

Store


Button group

   Add Admin Group

   Delete Admin Group



Pagination

Disabled pagination

Disabled navigation buttons are either grey or light blue.


Active pagination

Active navigation buttons are either white or blue (100% tone of info/link color).
The buttons containing the page numbers should have the same width, even when reaching triple digits. For this a width of 80px is necessary.


Create

"Create" buttons at the top of pages should always be positioned on the right side.
Create buttons at the end of a page should be full-width and complemented with a border.


Submit

When a primary action like a "submit" button for a form is used, it should be placed on the bottom right of the page.




Add and delete

Icons are added before the text to mark these buttons as special elements.




Button texts

Button letterings should always be precise. Example: Use "create user" instead of "create" for button lettering.

Miscellaneous elements

Modals

Even if the content of the modals differs, they all should use the same basic classes .modal-content and .modal-card to ensure a constant layout. Buttons inside the modals should use the standard button formats.

Merge pull request

Do you really want to merge?



Cannot be merged automatically

How to merge source branch into target branch

1. Make sure your workspace is clean and checkout target branch 
git checkout master
2. Update workspace 
git pull
3. Merge source branch 
git merge feature/e
4. Resolve merge conflicts and add corrected files to index 
git add <conflict file>
5. Commit 
git commit -m "Merge feature/e into master"
6. Push your merge 
git push


Standard tables

Titles inside the tables should be in bold letters.
Name G1
Description Awesome
Type xml
Creation Date 5 days ago
Last Modified 15 minutes ago


Group and user tables

Special tables can be used for group- or user-lists. Colors at the left side could display roles, for example green = normal user, yellow = admin.
Username Display Name E-Mail Admin
anonymous SCM Anonymous scm-anonymous@scm-manager.org
dhuchthausen Daniel Huchthausen daniel.huchthausen@cloudogu.com
fscholdei Florian Scholdei florian.scholdei@cloudogu.com


Forms

If possible, forms should be divided into two columns to get a better grasp of the content. It is recommended to divide unrelated content with horizontal lines.


Radio buttons

Radio buttons should have enough space between them and the labels.

Add new Permission




Select

Select elements should always contain placeholder texts.

Headlines

Subheadlines should only be used if there is reasonable content for them.

Users

Create, read, update and delete users



Tags

Tags can use background in all full base colors.
  tip OPEN Warning


Statistics

Already done but still in review? Add later?


Notifications

Notification are using the full base colors.
Primary/Success
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Info/Link
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Success
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Warning
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.
Danger
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur.

Examples of use

Display of users (e.g. changesets)

Use tags and different font-weights to visually structure information.



Complex screens (e.g. pull requests)

Screens with a big bunch of information should be carefully structured to help the user with orientation.
  • Make sure areas with different functionalities are clearly separated (use horizontal lines, boxes and/or bigger gaps between them).
  • Buttons with different actions should have different colors.
  • The "reject pull request" and "Merge pull request" buttons are good examples for a meaningful usage of addon buttons.
  • Information belonging together should be placed next to each other (for example the user who did the last edit and the date of the last edit).
  • Make sure important states like "open" are properly marked. For example, with tags.

#1 Merge-Conflicts

  Edit pull request
feature/e   master
OPEN
Hier gibt es Merge Konflikte
msuewer a month ago

msuewer a month ago
Testkommentar

  

msuewer a month ago
das c ist falsch!

  



Group Member List

Is there a new version of it which is still in review? Add later?
Members