describo / crate-builder-component

A VueJS UI component to build an RO-Crate
MIT License
6 stars 3 forks source link

Add semantic css classes to properties #86

Closed beepsoft closed 7 months ago

beepsoft commented 7 months ago

This is an experiment/proof of concept implementation to add semantic css classes to make it easier to find and style rocrate property components together or selectively.

This feature would allow users of Describo to make overall or precise styling modifications as necessary. Without this it is difficult or sometimes not even possible to style selected properties from CSS.

It generates the following css classes into components (indentation reflects their use inside a property component):

describo-property: row of a property
describo-property-name-<name of property>: unique class for the propery by its name
    describo-property-heading: left column with name and help
        describo-property-name: element containing the property name
        describo-property-help: element containing the property's help
        describo-property-help-more: element containing the property's help with a "show more" option
    describo-property-value: the right column with the property's value (component)
        describo-property-type-<type name>: the type of the property's value, eg. describo-property-type-date, describo-property-type-url, etc.

All this allows styling components like this. Some styles applied to all components, some selectively to one kind of property:

screenshot-localhost_9000-2023 11 21-13_58_46

Looking forward to hearing what you think about this!