Panel API: CSS #242
taufik-nurrohman
started this conversation in
General
Replies: 1 comment
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
This article is a draft and will be moved to the official web site when the API is matured.
This concept acts as a communication bridge between the developer (human) and the code, with the hope that human can get the idea of what the code will do when they skim through it. Some of the concepts here may not be implemented in the core Panel extension, but they will be a standard guide that developers need to follow to ensure the application runs as it should.
API is dominated by standardized HTML classes, and some HTML
data-*attributes in case classes are unable to describe the intent and purpose of the command. Standard HTML class format on the panel consists of adjectives, separated by a colon; making it look like key-value pairs of an object.Some are also used to express nouns. Usually preceded by
content:orlot:prefix. About why I chosecontentandlotas a prefix is related tocontentandlotdata which is very common in the components. The HTML output generated bycontentdata should be given classcontentand the HTML output generated bylotdata should be given classlot.Class
contentindicates that the element contains a non-collection data, while classlotdescribes that the element contains a collection data.However, you don’t have to apply this class to all elements. A set of elements formed by a WYSIWYG application, or elements rendered from Markdown syntax do not need to apply these classes. In most cases, it would be more appropriate to use WAI-ARIA attributes as a marker so that it can be selected by CSS using attribute selectors.
Base
Base styles serve to normalize the appearance of miscellaneous elements such as paragraphs, headings, links, tables, forms, etc. They mostly don’t target classes but rather make use of attributes and pseudo classes/elements.
Classes
Adjective
asas:button,as:link,as:text,as:user.areare:active.cancan:fetch,can:flex,can:sort.hashas:description,has:icon,has:shadow,has:title.isis:active,is:current.notnot:active,not:vital.ofof:user.withwith:fields,with:options.Note: Class
is:flexindicates that child elements are arranged horizontally. When the container width is no longer able to accommodate, then the child elements will be flowed down just the way text flows. Classcan:flexis also the same, but in narrow container conditions, the horizontal styling may be forced to be vertical styling by media queries. Or vice-versa, you can make them arranged vertically by default, and in narrow container conditions, make them arranged horizontally. In essence, using this class should indicate that the child elements can be arranged horizontally if certain conditions are met.Noun
content$page->content.description$page->description.figureicon$page->icon.image$page->image.lotstatustitle$page->title.Example:
Quantity
countClass
contentandlotis usually followed by classcount:*where*indicates the number of items in it. Not all child elements are considered items. Title and description that inevitably have to be in the container may not need to be taken into account. The developer is free to determine if a component is empty or contains.The purpose of this information is to communicate with CSS easily. For example, when a tabs component has only one trigger tab, the designer may want to hide the tabs row because tab switching ability is no longer relevant when there is only one trigger tab in the component.
Beta Was this translation helpful? Give feedback.
All reactions