How to implement Clay in Liferay 7.2

Question

As much as i try to find an explicit manual over the Liferay 7.2 documentation im not able to get a concrete and "non cryptic" way of implement clay in Liferay 7.2. Just looking forward for some feedback about just how to implement Clay on a Liferay 7.2 theme because everything i have found so far is how great Clay is and how great Clay works with Liferay but no how to implement inside it. Will really appreciate some feedback.

Update:

After a lot of research, this is what i did but now i have JAVA errors (I repeat im a front end dev so im 100% ignorant when it comes to JAVA):

1. Added this code to my build.gradle in the liferay-workspace directory:

   compileOnly group: "com.liferay", name: "com.liferay.frontend.taglib.soy", version: "1.0.10"

   compileOnly group: "com.liferay", name: "com.liferay.frontend.taglib.clay", version: "1.0.0"

2. Import the taglib on mi init.jsp (inside liferay-dxp-7.2.10-ga1\tomcat-9.0.17\webapps\ROOT\html\portal) in order to use it in every portlet and webcontent:

And now i'm getting this error:

"The absolute uri: [http://liferay.com/tld/clay] cannot be resolved in either web.xml or the jar files deployed with this application"

Answer 1

You can use Clay using tag library available for it

1. You need to import compile group: 'com.liferay', name: 'com.liferay.frontend.taglib.clay'.
2. Then you can use tag lib by importing <%@ taglib uri="http://liferay.com/tld/clay" prefix="clay"%>.
3. use tag <clay:alert title="test" message="test"/>

You can also use clay without tag lib by using direct html

<div class="alert alert-danger" role="alert">
    <span class="alert-indicator">
        <svg class="lexicon-icon lexicon-icon-exclamation-full" focusable="false" role="presentation">
            <use href="/images/icons/icons.svg#exclamation-full"></use>
        </svg>
    </span>
    <strong class="lead">Error:</strong>This is an error message
</div>

For this you can refer https://v2.clayui.com/docs/components/alerts.html