Why not HTML?

[geri777]

I have already used earlier versions of CoreUI. Now I come back and see that you have replaced nearly all HTML Tags with directives like CRow, CCol, CCard, CTable, CTableWrapper, etc.

To a certain degree I understand this abstraction. But for anyone not dedicating his life to CoreUi so much like you guys this is just a pain.

For example:

INPUT:

<CRow>
    <CCol col>
        <CCard>

OUTPUT:

<div class="row">
    <div class="col">
        <div class="card">

So instead of using some CSS classes which are common anyway (Bootstrap 4) I have to learn some CoreUI Tag Syntax. Maybe I just don't get the point. It would be easier for me to become familiar with this syntax if I understood its idea / purpose.

[woothu]

Using the components is fully optional. The template is only showing examples of usage of our components in the component based approach.

As you said the main disadvantage of this approach is for someone who knows bootstrap CSS already and has to learn our components, though it is not so hard because component names often are very similar to bootstrap classes.

In the case of stateful and complex components, it is natural to use components, but I understand that your concern is about wrapper components, which have no additional logic. (like CRow)

Advantages of this approach in simple components:

• abstracting similar elements - let's say you want to change the behavior of CRow later in development. Then you can create the CRowNew component which extends CRow and just replace it with simple regex in the project.
• More readable code - you have descriptive tags instead of just divs
• Easier bug fixing - if you know that some specific element is bugged
• IntelliSense support in VSCode - we deliver hints with prop names which often shows functionalities of the component (color, size, etc.)
• less code - since usually base element classes are inside a component
• automatic bug fixing - sometimes there are some bugs that are solved by us automatically, by changing CSS classes inside the component to fix it.

[geri777]

Thank you very much for your helpful explanation. I think I will use the native HTML whenever possible, because it's easier to see what's happening under the hood.

With Bootstrap: html+css = result

With CoreUI elements: Celement+[HTML generated]+[CSS fixes maybe]+[JS fixes maybe] = display

But who knows - I consider myself as a beginner with this great UI - so the way of working with it might change as time goes by. Thank you very much for this awesome ui/template.