Changelog

2.0.0 (Sept 27, 2024)

  • Added new Modern Homepage 07.
  • Added new Pricing page v2.
  • Added Pricing Compare Table.
  • Added Blog Sidebar page.
  • Added Content Table page.
  • Added All In-House Components page.
  • Added new Modern Header.
  • Added new Modern Mega Menu.
  • Added new Modern Sections and Layouts.
  • Added new Modern Footer.
  • Added Unicon icons CheatSheet.
  • Added GDPR Compliance (Cookies Popup).
  • Fully optimized.
  • Improve SEO.
  • Major improvements.
  • Fix some minor issues.

1.5.0 (July 11, 2024)

  • Added new Modern Homepage 06.
  • Added new Modern Header.
  • Added new Modern Sections and Layouts.
  • Added new Modern Footer.
  • Homepage 06 Fully Responsive.
  • Homepage 06 Fully RTL supported.
  • Fix, improve Home 04.
  • Fix, improve Home 05.
  • Fully optimized.
  • Improve SEO.
  • Major improvements.
  • Fix some minor issues.

1.4.0 (June 26, 2024)

  • Added new Homepage 05.
  • Added new Team page.
  • Added new Header.
  • Added new Navbar Megamenu.
  • Added new Sections and Layouts.
  • Added new Footer.
  • Homepage 05 support RTL.
  • Team page support RTL.
  • Improve Speed.
  • Improve SEO.
  • Major improvements.
  • Fix some minor issues.

1.3.0 (June 06, 2024)

  • Full RTL Support.
  • Bootstrap extended to support LTR/RTL classes for ex: (ltr:ms-2 rtl:me-2)
  • You can now set Dark or Light as the default or use the user's system preferences.
  • Enable or disable page preloader option.
  • You can now set your default breakpoints.
  • Some codes have been improved and shortened in order to further improve performance.
  • High Speed Performance (Score 94).
  • Added PurgeCSS feature, as also available in Tailwind!
  • Reduced the size of the main.min.css file from 4-6MB to only 130KB.
  • Major improvements.
  • Fix some minor issues.
  • Adding new explanations to the documentation.

1.2.0 (May 24, 2024)

  • Added new Homepage 04.
  • Added new Header.
  • Added new Navbar Megamenu.
  • Added new Sections and Layouts.
  • Added new Footer.
  • Organize, rename and optimize some images.
  • Bootstrap update from 5.2.3 to 5.3.3.
  • Improve template performance and speed.
  • Improve SEO.
  • Improve major components and UI.
  • Fix some minor issues.

1.1.0 (May 21, 2024)

  • We have added an improved Lite version, which is faster and runs smoothly.
  • The full version, which includes all UniCore components has also been improved!
  • Improve template performance and speed.
  • Improve SEO.
  • Add a video on how to easily customize the template via user-config.scss.
  • Fix some minor issues.

1.0.0 (April 10, 2024)

  • Initial Release.

# Introduction

Get familiar with the basic setup and overview of Lexend.

Lexend is a high-quality multi-layout HTML template designed for SaaS websites. We understand the need of a modern SaaS website so Lexend provides an excellent user experience, making it easy for visitors to navigate and find the information they need.

Current version: 2.0.0 (Sept 27, 2024)


# Installation

Warning: NodeJS v18 is required to install the package!

Unzip the template package to any folder and open a command line at that location.

Lexend's dev tools require Node. run npm install and the required packages for the Lexend dev tools will be downloaded to the node_modules directory.

npm install --unsafe-perm

NB: If you are a Mac user add sudo before every command.

NB: If the npm installation failed due to permissions use --unsafe-perm command to install as admin.

When you want to customize or view template use the command line below so while dev mode is running all files in the pages, scss and js folders are monitored for changes, which will inject updated CSS or cause a refresh in ViteJs.

npm run dev

Optional, If you want to know the external output of the scss files use the command line below for debugging:

npm run css:debug

# Build

Normal Build:

After you've finished customizing your template, it's time to build your production version, which you will find in a folder called /dist/ by using the command below:

npm run build
Lite Build (PurgeCSS Version):

This option will purge all styles in the base, components, and utilities layers to produce the smallest CSS file possible by only generating the CSS you are actually using in your website.

npx gulp build-lite

# Options

Enable/disable or edit these options to suit your needs by editing the assets/js/app-head.js file.

Dark/Light Modes:
Option Default Description
DEFAULT_DARK_MODE !1 or false To set dark mode as your default theme change it to !0 or true.
USE_LOCAL_STORAGE !0 or true To disable the LocalStorage usage then change it to !1 or false.
USE_SYSTEM_PREFERENCES !1 or false To use your visitors system preferences change it to !0 or true.
Page Preloader:
Option Default Description
ENABLE_PAGE_PRELOADER !0 or true Enabled, to disable the page preloader then change it to !1 or false.

# RTL Support

Activate RTL:

To activate and support RTL languages, Go to your pages header and on the html tag replace <html dir="ltr"> by <html dir="rtl">. This way the site will automatically switch from right to left.

Extended Classes for RTL:

Classes have been added to the Bootstrap Utility API so you can have full control over how layouts are displayed for comprehensive and seamless RTL languages support.

An example ltr:ms-2 rtl:me-2, ltr:start-0 rtl:end-0, ltr:text-start rtl:text-end


# Unicore framework

Our templates are based on our Unicore framework, is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system, extensive utility classes and custom made in-house components.

Unicore is based on Bootstrap 5 with the flavor of TailwindCSS and the power of UIkit 3 JavaScript components as you can build whatever you want without a single line of CSS/SASS code by just using our low-level utility classes and base components.

Unicore has its own documentation explaining how to use all the features that were used to create the Lexend template. You can check it out from here.

Unicore framework

# Package contents

Pages are named according to their purpose, and you can open any of the files in your browser to see it in action, or modify the markup to suit your needs.

Package contents

# HTML Markup

The HTML markup of Lexend.

<!DOCTYPE html>
<html lang="zxx" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Lexend</title>
        <meta name="description" content="Multi-purpose Marketing Agency & Startup Site Template">
        <meta name="theme-color" content="#178d72">

        <!-- Meta for SEO and Link Cards -->
        <meta name="twitter:image" content="../assets/images/common/lexend-preview.jpg" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Lexend" />
        <meta property="og:description" content="Multi-purpose Marketing Agency & Startup Site Template" />
        <meta property="og:url" content="https://unistudio.co/html/lexend/" />
        <meta property="og:site_name" content="Lexend" />
        <meta property="og:image" content="../assets/images/common/lexend-preview.jpg" />
        <meta property="og:image:width" content="1180" />
        <meta property="og:image:height" content="600" />
        <meta property="og:image:type" content="image/png" />
        <link rel="canonical" href="https://unistudio.co/html/lexend/" />

        <!-- preload head styles -->
        <link rel="preload" href="assets/css/unicons.min.css" as="style">
        <link rel="preload" href="assets/css/swiper-bundle.min.css" as="style">

        <!-- preload footer scripts -->
        <link rel="preload" href="assets/js/libs/jquery.min.js" as="script">
        <link rel="preload" href="assets/js/libs/scrollmagic.min.js" as="script">
        <link rel="preload" href="assets/js/libs/swiper-bundle.min.js" as="script">
        <link rel="preload" href="assets/js/libs/anime.min.js" as="script">
        <link rel="preload" href="assets/js/helpers/data-attr-helper.js" as="script">
        <link rel="preload" href="assets/js/helpers/swiper-helper.js" as="script">
        <link rel="preload" href="assets/js/helpers/anime-helper.js" as="script">
        <link rel="preload" href="assets/js/helpers/anime-helper-defined-timelines.js" as="script">
        <link rel="preload" href="assets/js/libs/gsap.min.js" as="script">
        <link rel="preload" href="assets/js/libs/split-type.min.js" as="script">
        <link rel="preload" href="assets/js/helpers/splitype-helper.js" as="script">
        <link rel="preload" href="assets/js/core/preloader.js" as="script">
        <link rel="preload" href="assets/js/uikit-components-bs.js" as="script">
        <link rel="preload" href="assets/js/app.js" as="script">

        <!-- app head for bootstrap core -->
        <script src="assets/js/app-head-bs.js"></script>

        <!-- include uni-core components -->
        <link rel="stylesheet" href="assets/js/uni-core/css/uni-core.min.css">

        <!-- include styles -->
        <link rel="stylesheet" href="assets/css/unicons.min.css">
        <link rel="stylesheet" href="assets/css/prettify.min.css">
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/magic-cursor.min.css">

        <!-- include main style -->
        <link rel="stylesheet" href="assets/css/theme/main.min.purge.css">

        <!-- include scripts -->
        <script src="assets/js/uni-core/js/uni-core-bundle.min.js"></script>
    </head>
    <body class="uni-body bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-200 overflow-x-hidden">
        
        // Body markup here..

        <!-- include jquery & bootstrap js -->
        <script defer src="assets/js/libs/jquery.min.js"></script>
        <script defer src="assets/js/libs/bootstrap.min.js"></script>
    
        <!-- include scripts -->
        <script defer src="assets/js/libs/anime.min.js"></script>
        <script defer src="assets/js/libs/swiper-bundle.min.js"></script>
        <script defer src="assets/js/libs/scrollmagic.min.js"></script>
        <script defer src="assets/js/helpers/data-attr-helper.js"></script>
        <script defer src="assets/js/helpers/swiper-helper.js"></script>
        <script defer src="assets/js/helpers/anime-helper.js"></script>
        <script defer src="assets/js/helpers/anime-helper-defined-timelines.js"></script>
        <script defer src="assets/js/libs/split-type.min.js"></script>
        <script defer src="assets/js/libs/gsap.min.js"></script>
        <script defer src="assets/js/helpers/splitype-helper.js"></script>
        <script defer src="assets/js/core/preloader.js"></script>
        <script defer src="assets/js/core/marquee.js"></script>
        <script defer src="assets/js/uikit-components-bs.js"></script>
    
        <!-- include app script -->
        <script defer src="assets/js/app.js"></script>
    </body>
</html>
                            

# Plugins

An overview of the custom configured plugins supplied with Lexend.

Swiper Js

We made it easy to deal with and even responsive to different screens using breakpoints.


Basic usage:

To configure SwiperJs, use the data-uc-swiper attribute and use the built-in options that are explained in the table below.

<div class="swiper" data-uc-swiper="items: 3; dots: .swiper-pagination;">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

Responsive:

We have custom configured responsive control using breakpoints data-uc-swiper-{breakpoint}, the available breakpoints: s, m, l and xl.

<div class="swiper" data-uc-swiper="items: 1; center: true;" data-uc-swiper-m="items: 3; center: false;">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
</div>

Buil-in Options:

Option Value Default Description
items number | 'auto' 1 number of slides per view.
sets number 1 Set numbers of slides to define and enable group sliding.
active number 0 Index number of initial slide.
connect string null Connet two sliders via css class selector.
gap number 48 Distance between slides in px.
center boolean false If true, then active slide will be centered, not always on the left side.
center-bounds boolean false If true, then active slide will be centered without adding gaps at the beginning and end of slider.
dots string .swiper-dotnav String with CSS selector or HTML element of the container with pagination.
dots-type string bullets String with type of pagination. Can be 'bullets', 'fraction', 'progressbar' or 'custom'.
dots-click boolean true If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.
next string .swiper-next String with CSS selector or HTML element of the element that will work like 'next' button after click on it.
prev string .swiper-prev String with CSS selector or HTML element of the element that will work like 'prev' button after click on it.
disable-class string uk-invisible CSS class name added to navigation button when it becomes disabled.
auto-height boolean false Set to true and slider wrapper will adapt its height to the height of the currently active slide.
autoplay number 3000 Activate autoplay and set a delay between transitions (in ms). If this parameter is not specified, auto play will be disabled.
autoplay-init boolean true Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.
offset number 0 Add (in px) additional slide offset in the end of the container (after all slides).
fade boolean false Enables slides cross fade.

As you can see, we have shortened some useful options according to their meaning. If you do not find one of the options here, know that it has not been shortened and you should use the default option found in the documentation for this plugin.

Typed Js

To configure TypedJs, use the data-typed attribute and it's options.


Basic usage:
<span data-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: false">
    <span>portfolio</span>
    <span>studio</span>
    <span>agency</span>
    <span>creative</span>
</span>

Options:

You can find all options on TypedJs documentation.

Anime Js

To configure AnimeJs, use the data-anime attribute and it's options or our built-in options below.


Basic usage:
<div data-anime="translateX: 250; scale: 2; rotate: 1turn; onclick: true;">
    Animate me
</div>

Buit-in Options:

Option Value Default Description
onclick boolean string false alternate || restart Start animation when element clicked.
onhover boolean false Start animation when element hovered.
onview boolean number false 0 Start animation when it's on viewport. You can set an offset in px for ex: 100 or -100.
autoplay boolean true Autoplay animation when element it's on viewport.

You can find all other options on AnimeJs documentation.


# Customizing CSS

SCSS Method:

The most streamlined way to make edits and additions to the template CSS is to use the provided user-config.scss, user.scss and user-init.scss files located in the /assets/scss/theme/custom folder.

When used in conjunction with the provided dev tools, your custom CSS is included in main.scss and overrides the default template style.

This is the preferred method as your changes are kept separate from the core framework or template files. By separating your CSS edits into their own files, you can easily overwrite all of the default template SCSS files when you update the template.

If you need to add CSS for additional components or other needs, simply edit user.scss and add any SCSS or CSS you require.


CSS Method:

If you prefer to work with Lexend as a static source without the aid of Node, Gulp and Sass, you will need to add custom CSS through a separate CSS file.

We have provided a blank custom.css file in the assets/css folder. To make your custom CSS active, you will need to add the following line after main.scss is referenced in the <head> of each page:

<link href="./assets/css/custom.css" rel="stylesheet" type="text/css" media="all" />

# Updating template

Updates will be released periodically to add new features, provide fixes where necessary and maintain compatibility.

Most often, the updated files are javascript or CSS and your project should need little adjustment in order to stay up to date.

The changelog is be updated with each release and lists the updated files.

To bring your project up to date with the latest version of Lexend, simply download the latest version, unzip the files and replace the old version in your project with the updated version of each Lexend file.

Any breaking changes that affect compatibility with older versions of Lexend will be noted, and further instructions on updating will be provided in the changelog.


How to get support

We provide support for bugfixes and guidance on using the template including:

  • Availability to answer questions.
  • Answering technical questions about template's features
  • Assistance with reported bugs and issues.
  • Help with included 3rd party assets.

However, item support does not include:

  • Customization services.
  • Installation services.

To access support, find the support link in your Themeforest Marketplace item dashboard support tab.

In case you need help installing or customizing your template according to your requirements, we are pleased to provide this service by send a message via email support@unistudio.co.

This type of service may charge you a fee depending on your requirements.


Giving Feedback

We strive to improve our products and we rely on feedback from our customers.

Please feel free to share any feedback about Lexend via your downloads page on Themeforest Marketplace.

Thank you for being one of our valued customers!