Can one use Clarity without Angular?

user_7520592 0
Viewed 1409

In recent years I've been mostly using Bootstrap3 for handling css and responsiveness, but a few weeks ago I stumbled on Clarity Project. The one thing I cannot understand is related to Angular Components that is commonly mentioned in documentation. Example could be found here. The later link mentions HTML-esque tags like <clr-dropdown>...</clr-dropdown> or <clr-icon>...</clr-icon>. Did I understood it correctly, that usage of such tags only makes sense when using Angular and they will be ignored otherwise?

I have no experience with Angular and I do not intend to learn it, but using these Clarity components in such fashion witjout Angular would be pretty awesome. Have anyone tried it? Does it even makes sense to do so? I haven't found answer in Documentation, so I would be grateful for an answer here.

Thanks in advance.

vmware-clarity angular
3 Answers

Clarity has CSS and Angular components. The CSS styling for any component is provided through the clarity-ui package, and the clarity-angular package has Angular implementations of some of the more complex components. For example, a CSS only datagrid is not possible so the Angular component is the only way to use the datagrid. However, if you wanted to use the datagrid CSS and build your own implementation of the datagrid you are free to do so. The documentation page https://vmware.github.io/clarity/documentation shows the list of components that have an Angular (NG) component.

To have the best Clarity experience today, you would need to use Angular for access to all of the components and implementations, otherwise you'll be on the hook to build the Javascript implementation for the complex behaviors that CSS can't support.

user_39699460

You can, as long as you don't need advanced SPA-like interactions to work out of the box. This means, for example dropdowns, modals, date pickers, wizards, ...

Most of the user interaction functionality can be achieved without using Angular, but in most of those cases, it is a real pain to do so. You'll have to work out what's happening in the background and write your own JavaScript handlers to emulate what is normally done by Angular components.

Regarding the user interaction, You'll be definitely able to employ dropdowns, responsive side menus and modals. For the static elements, you can use probably everything you see in the docs. Sometimes though you'll have to dig HTML code generated through Angular-based example.

Note: I've been successfully using Clarity UI for a number of dashboards without Angular with a satisfactory degree of success.

user_43810410

Clarity Project is actually framework free UI/UX guidelines only.

Their documentation seems like they have a highly tight relationship with angular, yet they are not actually. As for your question

<div class="dropdown open">
    <button type="button" class="dropdown-toggle btn btn-link">
        Dropdown Toggle
        <clr-icon shape="caret down"></clr-icon> <!-- Notice here -->
    </button>
    <div class="dropdown-menu">
        <h4 class="dropdown-header">Dropdown header</h4>
        <button type="button" class="dropdown-item">Lorem.</button>
        <button type="button" class="dropdown-item">Lorem ipsum.</button>
        <button type="button" class="dropdown-item">Lorem ipsum dolor.</button>
        <div class="dropdown-divider"></div>
        <button type="button" class="dropdown-item">Link</button>
    </div>
</div>

I took this one from example. As you see the above tree actually doesn't have any angular defined elements except the <clr-icon> (which can only be injected to DOM via JavaScript if needed without angular.)

The css styles can be used separately and can be accomplished to build web apps with clarity design guidelines and css without, yet if you need the functionality right now Clarity project is only working with Angular2-5+.

user_28302460
Related