The dashboard has 4 places that present a page with a group of settings; BasicsPage, EmailPage, AppearancePage and ExtensionPage. Visually these settings are separated into groups (Form-group).
Let's take a look at the Basics page HTML structure:
It is well organized and structured, each group of settings is wrapped inside an element with a Form-group class, making it easy to customize. The only issue is with the use of a fieldset instead of a div like the rest, it is inconsistent, but that's not the problem, fieldset is hard to customize because of the forced positioning of the legend element, it would be best to use a div element at all times (and for accessibility declare role="group"aria-labelledby="group_label").
This time the fieldsets don't even have a Form-group class and they are not wrapped inside a Form either, we also have a Form at the beginning containing a fieldset with no Form-group class. This was tedious when trying to customize the dashboard.
Solution
The structure should be normalized and consistent across all pages. a Form containing divForm-group elements everywhere.
The dashboard has 4 places that present a page with a group of settings; BasicsPage, EmailPage, AppearancePage and ExtensionPage. Visually these settings are separated into groups (Form-group).
Let's take a look at the Basics page HTML structure:
It is well organized and structured, each group of settings is wrapped inside an element with a Form-group class, making it easy to customize. The only issue is with the use of a fieldset instead of a div like the rest, it is inconsistent, but that's not the problem, fieldset is hard to customize because of the forced positioning of the legend element, it would be best to use a div element at all times (and for accessibility declare
role="group"
aria-labelledby="group_label"
).Now let's take a look at the Appearance Page:
This time the fieldsets don't even have a
Form-group
class and they are not wrapped inside aForm
either, we also have aForm
at the beginning containing afieldset
with noForm-group
class. This was tedious when trying to customize the dashboard.Solution The structure should be normalized and consistent across all pages. a
Form
containingdiv
Form-group
elements everywhere.