Create an page

What is Lessjs?

Lessjs is a performant and simple web components framework that makes it easy to build websites. You don’t need to install any dependencies. You only need to introduce the following CDN resources in the page header to use any Lessjs component in the page

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lessjs HTML</title>

  <!-- Lessjs Resources -->
  <meta name="runtime-host" content="https://static.shoplazza.com/cuttlefish/2022101221">
  <script crossorigin="anonymous" src="https://static.shoplazza.com/cuttlefish/2022101221/v0.js"></script>
  <style spz-boilerplate>body{-webkit-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-spz-start 8s steps(1,end) 0s 1 normal both;animation:-spz-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style spz-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <h1>Lessjs HTML</h1>
  <!-- ... -->
</body>
</html>

In the above code, it shows how to introduce the Lessjs framework on the page. Let’s explain their meaning below:

Step 1

Contain a <meta> tag inside the <head> tag.

<meta name="runtime-host" content="https://static.shoplazza.com/cuttlefish/2022101221">

When we do not manually introduce other component resources, if we use other components such as spz-carousel, v0.js will automatically import other component resources according to the current URL prefix of the content of the tag.

In the above code, if we add the following code, v0.js will automatically load the component resource.

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <spz-carousel layout="responsive" width="200" height="200">
      <!-- ... -->
    </spz-carousel>
    <!-- ... -->
  </body>
</html>

Step 2

Contain a <script> tag inside the <head> tag. As a best practice, you should include the script as early as possible. It is used to load the main logic code of the Lessjs component library.

<script crossorigin="anonymous" src="https://static.shoplazza.com/cuttlefish/2022101221/v0.js"></script>

Step 3

Contain a <style> style tag inside the <head> tag. CSS boilerplate to initially hide the content until Lessjs JS is loaded.

<style spz-boilerplate>body{-webkit-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-spz-start 8s steps(1,end) 0s 1 normal both;animation:-spz-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style spz-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>