Page History

...

1. Increase real estate for the fields (i.e make the grey area bigger - stretch it to the left and right).
2. Left align all fields in each column.
3. Add three columns with headings:
   
   1. Field name
   2. Appearance - Show the actual field, item, 'thing'.
   3. Function (or Description)
4. Consider adding visible lines as column indicators (i.e grey vertical lines)
5. 1. - Add a short usage description per field. Say, max 140 characters. (Use this for... Can also be used for... etc.) Where, why, how. (Use on x pages to describe....Try not to use more than x times per page.)
   Add link to official documentation, where users can find detailed information on using fields. The link could be by the line "Showcase apps......."
   1.  
6. Left align everything in each column.
7. To accommodate the About text (Function, Description) increase space between each row so that 140 characters can fit comfortably in the third column.
8. Consider adding visible lines as column or row indicators (i.e grey vertical lines). Am not 100% convinced of this. There appear to be semi row indicators in the Vaadin fields tab. Not to great effect though.
9. Remove references to 'in a form' in the field name.
   
   

Current look

Proposal mockup

Image Added

...

1. Increase real estate for the fields (i.e make the light grey area bigger - stretch it to the left and right).
2. Add three columns:
   
   1. Field name
   2. Appearance - show the field
   3. Function (or Description) - description
3. Left align everything in each column. 
4. For the Field names:
   
   1. Use sentence case for headings (First word capitalized only.) At present there we have 'Magnolia icons' but 'Progress Indicator'. 'Progress indicator' is goodbetter.
   2. Perhaps BOLD the highest level of heading (the category - for example Magnolia icons) not secondary headings. 
   3. Label each item, field individualllyindividually, either as an independent things thing or as members of a bolded category.
   4. Name each field individually and separately. Currently there is 'Magnolia table and tree table'. This should be:
   
   
   • Magnolia table
   • Tree table
5. Consider adding visible lines (grey) as column indicators.Add a short description per field (see 6c,. Say, max 140 characters. (Use this for... Can also be used for... etc.) Where, why, how. (Use on x pages to describe....Try not to use more than x times per page.)
   
   

...