mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
6575042f5f
* clean up all but header incrementing in Creating-Transport.md * make Device-Dependencies.md mdl happy * make Entities.md as mdl happy as possible... one long table line left * make mdl as happy as possible for index.md * clean up Introduction.md as much as possible * minor formatting cleanup... move each icon onto its own row * make ack and notes the same style * clean Macros.md up * clean Rules.md up as much as possible * tweak one line a bit to get it to format a bit nicer * a bit more format tweaking, making sure it does not sure with > * clean up as much as possible for Templates.md * make Testing.md as mdl happy as possibly * clean Transports.md up as much as possible * clean as many issues as possible for Alerts.md * clean up as much of ARP.md as possible * clean up as much as possible for Bills.md * make DeviceGroups.md as mdl happy as possible * cleanup Devices.md * make as mdl happy as possible Inventory.md and index.md * mdl cleanup for Logs.md and PortGroups.md * make Ports.md and Routing.md as happy as possible * clean up Services.md, Switching.md, and Systems.md as much as possible * more markup cleanup * lots more md cleanup udner Devloping/ * reapply bits from #10343 that accidentally got removed when merging
78 lines
2.9 KiB
Markdown
78 lines
2.9 KiB
Markdown
source: Developing/Style-Guidelines.md
|
|
path: blob/master/doc/
|
|
|
|
# Style guidelines
|
|
|
|
This document is here to help style standards for contributions
|
|
towards LibreNMS. These aren't strict rules but it is in the users
|
|
interest that a consistent well thought out Web UI is available.
|
|
|
|
### Responsiveness
|
|
|
|
The Web UI is designed to be mobile friendly and for the most part is
|
|
and works well. It's worth spending sometime to read through the
|
|
[Bootstrap website](http://getbootstrap.com/css/#grid) to learn more
|
|
about how to keep things responsive.
|
|
|
|
### Navigation bar
|
|
|
|
- Always pick the best location for new links to go, think about where
|
|
users would expect the link to be located and name it so that it's
|
|
obvious what it does.
|
|
|
|
- Ensure sub sections within the Navigation are separated correctly
|
|
using `<li role="presentation" class="divider"></li>`.
|
|
|
|
- Only use [Font Awesome icons](http://fontawesome.io/icons/) within
|
|
the Navigation. It speeds up page load times quite considerably.
|
|
|
|
### Buttons
|
|
|
|
Try to keep buttons colored to reflect the action they will
|
|
take. Buttons are set using Bootstrap classes. The size of the buttons
|
|
will depend on the area of the website being used but btn-sm is
|
|
probably the most common.
|
|
|
|
- Delete / Remove buttons: btn btn-danger
|
|
|
|
- Edit / Update buttons: btn btn-primary
|
|
|
|
- Add / Create buttons: btn btn-success
|
|
|
|
### Tables
|
|
|
|
Unless the table being used will only ever display a handful of
|
|
items - yeah that's what we all said, then you need to write your
|
|
table using [JQuery Bootgrid](http://www.jquery-bootgrid.com/). This
|
|
shouldn't take that much more code to do this but provides so much
|
|
flexibility along with stopping the need for retrieving all the data
|
|
from SQL in the first place.
|
|
|
|
As an example pull request, see [PR
|
|
706](https://github.com/librenms/librenms/pull/706/files) to get an
|
|
idea of what it's like to convert an existing pure html table to Bootgrid.
|
|
|
|
### Datetime format
|
|
|
|
When displaying datetimes, please ensure you use the format YYYY-MM-DD
|
|
mm:hh:ss where possible, you shouldn't change the order of this as it
|
|
will be confusing to users. Cutting it short to just display
|
|
YYYY-MM-DD mm:hh is fine :).
|
|
|
|
To keep things consistent we have the following variables which should
|
|
be used rather than to format dates yourself. This has the added
|
|
benefit that users can customise the format:
|
|
|
|
```php
|
|
# Date format for PHP date()s
|
|
$config['dateformat']['long'] = "r"; # RFC2822 style
|
|
$config['dateformat']['compact'] = "Y-m-d H:i:s";
|
|
$config['dateformat']['byminute'] = "Y-m-d H:i";
|
|
$config['dateformat']['time'] = "H:i:s";
|
|
|
|
# Date format for MySQL DATE_FORMAT
|
|
$config['dateformat']['mysql']['compact'] = "%Y-%m-%d %H:%i:%s";
|
|
$config['dateformat']['mysql']['date'] = "%Y-%m-%d";
|
|
$config['dateformat']['mysql']['time'] = "%H:%i:%s";
|
|
```
|