List of all classes

  • I understand that there a a few predefined custom classes like lemmony-mobile-hidden etc

    Isn’t it better to provide list of all classes, so that we can use where we want. Currently, I have to go and check advance tab in different blocks to see the classes applied and copy those classes in other areas if I need.

    You can give link to all the classes in dashboard.

Viewing 1 replies (of 1 total)
  • Theme Author shufflehound

    (@shufflehound)

    Hello,


    Thank you for your suggestion! We agree that having easy access to all custom classes could enhance flexibility and efficiency when building pages. For now, here’s a list of useful Lemmony custom classes that you can apply manually. Please note that some classes may require specific blocks or situations, so use them with caution:

    • .lemmony-absolute – Positions the element absolutely within its container.
    • .lemmony-zindex-10 – Positions the element on top of others using a higher z-index.
    • .lemmony-rounded-24px – Adds a 24px border-radius for rounded corners.
    • .lemmony-box-shadow – Adds a subtle shadow effect to elevate the element.
    • .lemmony-aspect-square – Forces a square aspect ratio (1:1).
    • .lemmony-aspect-1_1 – Sets a 1:1 aspect ratio (square).
    • .lemmony-aspect-2_1 – Sets a 2:1 aspect ratio (wide).
    • .lemmony-aspect-3_2 – Sets a 3:2 aspect ratio.
    • .lemmony-aspect-16_9 – Sets a 16:9 aspect ratio (widescreen).
    • .lemmony-aspect-radio-square – Forces a 1:1 aspect ratio.
    • .lemmony-aspect-radio-landscape – Forces a 2:1 aspect ratio.
    • .lemmony-aspect-radio-landscape-small – Sets a 3:2 aspect ratio.
    • .lemmony-mobile-center – Centers text and elements on mobile devices.
    • .lemmony-mobile-reverse – Reverses the flex direction on mobile devices.
    • .lemmony-mobile-width-full – Sets the element’s width to 100% on mobile devices.
    • .lemmony-mobile-hidden – Hides the element on mobile devices.
    • .lemmony-mobile-border-none – Removes borders on mobile devices.
    • .lemmony-mobile-justify-center – Centers content horizontally within a group on mobile devices.
    • .lemmonny-max-w-400px – Sets the maximum width of the element to 400px.
    • .lemmonny-max-w-500px – Sets the maximum width of the element to 500px.
    • .lemmonny-max-w-600px – Sets the maximum width of the element to 600px.
    • .lemmonny-max-w-700px – Sets the maximum width of the element to 700px.
    • .lemmony-parallax – Enables a parallax scrolling effect for backgrounds.
    • .lemmony-sticky – This class makes the element “sticky” by positioning it at the top of the viewport when the user scrolls down.

    Best regards,
    Shufflehound team

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.