Cuttlefish Docs
  • English

    • Introduction

    What is Lessjs?

    Lessjs is a frontend component library used for building high-performance pages. It is developed based on Web Components and provides a series of ready-to-use components, such as carousels, videos, waterfall layouts, etc., to help you develop user interfaces more efficiently.

    Using Lessjs via CDN

    You can use Lessjs directly via CDN with the script tag:

    <script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>

    You just need to include this script in the <head> tag of the page. The best practice is to introduce this script as early as possible in the <head>.

    Creating a Lessjs Page

    The structure of your HTML may look like this:

    <!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Lessjs</title>
  <!-- ... -->
  <script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>
  <style>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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <!-- ... -->
</body>
</html>

    So far, the content in the code is very simple and easy to understand, but there are a few places where we must use it according to the specifications. In the following examples, we will default to omitting the code related to Lessjs resource import.

    A Lessjs HTML document must meet the following conditions:

    1. The script that introduces the CDN must have an async attribute to ensure better page performance.

    2. Include a style code in the head. The CSS style will initially hide the page content until the Lessjs JS is fully loaded.

    3. The lang attribute must take one of the following values (case insensitive):

    lang ValueCountry RepresentedExample
    ar-SAArabic (Saudi Arabia)أضف إلى السلة
    de-DEGermanIn den Warenkorb legen
    en-USEnglishAdd to cart
    es-ESSpanishAñadir a la cesta
    fr-FRFrenchAjouter au panier
    id-IDIndonesianMasukkan ke keranjang
    it-ITItalianAggiungi al carrello
    ja-JPJapaneseカートに追加
    ko-KRKorean카트에 추가하십시오
    nl-NLDutchVoeg toe aan winkelkar
    pl-PLPolishDodaj do koszyka
    pt-PTPortugueseAdicionar ao carrinho
    ru-RURussianДобавить в корзину
    th-THThaiเพิ่มลงในรถเข็น
    zh-CNChinese (Simplified)加入购物车
    zh-TWChinese (Traditional)加入購物車

    AI Usage Notes (LLM Ready)

    • Section density: detected 3 level-2 headings.
    • Example density: detected 2 code blocks.
    • Read conclusions first: extract definitions, constraints, and boundary conditions.
    • Then verify with examples: rely on executable snippets rather than prose only.
    • Finally cross-check: open related component pages to avoid doc/runtime drift.