the new DXP version uses Clay, a web implementation of Liferay’s Lexicon Experience Language. The Lexicon Experience Language provides styling guidelines and best practices for application UIs. Clay’s CSS, HTML, and JavaScript components enable developers to build fully-realized UIs quickly and effectively. Liferay DXP’s compatibility layer let’s you use Lexicon CSS markup alongside Clay CSS.
This section demonstrates how to apply Clay to the Lunar Resort’s form.
Follow these steps:
Replace the control-group
classes with form-group
classes:
Remove the control-label
classes from the label
elements:
Remove <div class="controls">
elements.
Add the form-control
class to each input
element.
Add the btn-primary
class to your submit buttons to emphasize them.
The Lunar Resort’s original form and updated form are shown below:
Original form markup:
<form class="form-horizontal">
<fieldset>
<legend>Reservation Form</legend>
<div class="control-group">
<label class="control-label" for="inputName">Name</label>
<div class="controls">
<input type="text" id="inputName"
placeholder="Enter your Name here" required="required">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="inputEmail"
placeholder="Enter your E-Mail here" required="required">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Submit</button>
</div>
</div>
</fieldset>
</form>
Updated form markup:
<form role="form-horizontal">
<fieldset>
<legend>Reservation Form</legend>
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" id="inputName" class="form-control"
placeholder="Enter your Name here" required="required">
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" id="inputEmail" class="form-control"
placeholder="Enter your E-Mail here" required="required">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit
</button>
</div>
</fieldset>
</form>
The Lunar Resort theme is updated for the new DXP version!