-
Notifications
You must be signed in to change notification settings - Fork 6
HTML & CSS guidelines
As this project develops, recurring HTML structures and guidelines will be documented on this page.
Please try to follow these guidelines closely, as a consistent setup makes changes and future enhancements infinitely easier. When you do decide to make an exception, provide proper documentation on why this exception is justified.
One of the goals of this project is to migrate old HTML to modern web standards. Key points in this are:
- Rewriting table layouts to a modern equivalent (div / section / heading / etc.)
- Omitting all inline styles (like widths) and attributes (like table properties)
- Rewriting inline JavaScript to reusable methods or using one of the Bootstrap solutions instead
- Removing as much custom classes as possible, in favour of a bootstrap alternative
All migrated pages are formatted with default Bootstrap components as much as possible. Custom CSS can off course be added to usr/www/local/css/pfSense.css, but we try to keep this to a minimum.
The Bootstrap grid system is used for defining columns. We've chosen the 'small' breakpoint as the default breakpoint to collapse from a horizontal to vertical layout. You should define your column widths with .col-sm-*, unless there's a good reason to deviate from this default.