UniStudio - UniCore

UniCore, based on Bootstrap 5 with the flavor of TailwindCSS and the power of UIkit 3

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.

Get Started Browse Templates

UniCore based on

Bootstrap ^5.2.3 Feature-packed toolkit

TailwindCSS ^3.2+ Utility-first CSS framework

UIkit ^3.15.20 JS only but still powerfull

Anime.js ^3.2.1 Lightweight animation library

Swiper ^8.4+ Modern mobile touch slider

jQuery ^3.6.0 Lightweight JavaScript library

What makes UniCore the best out there?

Full featured framework

Easy to install and customize

Advanced but more flexible

Solid design system foundation

Extensive utility classes

In-house components

Optimized performance

Dark mode supported

Carbon icons library

Well coded and documented

Free and premium templates

Frequent future updates

Let's getting started

Quick Installation

Install the dependencies using Yarn or NPM and use our custom made Gulp or Webapck build tools to get your project up and running literally in a minutes.

Get started

Extended Utility Classes

Build whatever you want without a single line of CSS/SASS code by just using our low-level utility classes and base components.

Learn more

In-house Components

Based on the components of Bootstrap we have created our exclusive components are made to empower your next project with our new UI/UX vision.

Browse components

3rd-Party Plugins

All popular 3rd-party plugins are deeply customized in order to perfectly meet our design system requirements and blend with your unique in-house components.

Browse plugins

Hand-picked templates based on UniCore

Dannel

Minimal Agency HTML5 Template

$20

59 Sales

Nerko

NFT Portfolio HTML5 Template

$29

83 Sales

Renox

NFT Marketplace HTML5 Template

$20

8 Sales

View more templates

Getting started

In order to use UniCore framework you need to install tools such as Node.js, NPM and Git on your system.

Install & Check Tools

Node.js and NPM

In order to use UniCore for your project you need a few tools installed that help with the development and build process. This includes tools tha help with such tasks as compiling CSS, removing unused CSS, and minifying and bundling JavaScript files. You'll need Node.js and NPM installed (Note that installing Node.js also installs NPM). To check if they're installed, open terminal and use these commands:

node -v

and

npm -v

Git

To clone the UniCore repo you need Git installed, check if you have it, by running this command:

git --version

Install UniCore

Clone UniCore repository:

git clone 'we will add git repository for this framework soon..'

Go to the UniCore directory:

cd unicore

Install Dependencies:

npm install

Development

Running the below command to launches the development server at http://0.0.0.0:3000/.
To change port, open vite.config.js and change the server.port: 3000 to your preferred port.

npm run dev

Production

Runing the following command compiles the production ready assets under the dist folder.

npm run build

Previous page Introduction

Next page Customization

Customization

A guide to configuring and customizing your UniCore.

Because UniCore is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

By default, UniCore will look for an optional config.scss file at the root of your project where you can define any customizations.

Every section of the config file is optional, so you only have to specify what you’d like to change. Any missing sections will fall back to UniCore’s default configuration.

$config: (
    'key': value,
    'section': (
        'key': value,
        'section': (
            'key': value,
            'key': value,
            ...
        ),
        ...
    ),
    ...               
)

Colors

UniCore includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

But when you do need to customize your palette, you can configure your colors under the color section in the config.scss file.

$config: (
    'color': (
        'gray': #525252,
        'slate': #6b7280,
        'primary': #553cdf,
        'secondary': #d946ef,
        'info': #03a5d6,
        'success': #4CAF50,
        'warning': #ffb307,
        'danger': #e44b4b,
        'blue': #4285f4,
        'indigo': #553cdf,
        'purple': #8921e4,
        'red': #ea4335,
        'rose': #d20e4f,
        'pink': #f753e4,
        'orange': #fb6b1e,
        'yellow': #fcbc05,
        'green': #34a853,
        'lime': #aef359,
        'teal': #06f6c6,
        'cyan': #38e1ff
    )
)

Typography

Use the text, heading, display and code keys in the font section of your config.scss file to customize typography.

$config: (
    'font': (
        'text': (
            'family': ( 'font_name', sans-serif ),
            'weight': 400,
        ),
        'heading': (
            'family': ( 'font_name', sans-serif ),
            'weight': 700,
        ),
        'display': (
            'family': ( 'font_name', serif ),
            'weight': 800,
        ),
        'code': (
            'family': ( 'font_name', monospace ),
            'weight': 400,
        )
    )
)

Sizing

Customizing the default spacing and all sizing scale for your project.

Spacing

Use the spacing key in the sizes section of your config.scss file to customize spacing.

$config: (
    'sizes': (
        'spacing': (
            'narrow': 0.25rem,
            '2xsmall': 0.5rem,
            'xsmall': 1rem,
            'small': 1.5rem,
            'medium': 2rem,
            'large': 2.5rem,
            'xlarge': 3rem,
            'xxlarge': 3rem,
            '3xlarge': 4rem,
            '4xlarge': 5rem,
            '5xlarge': 8rem,
        )
    )
)

Grid gutters

Use the grid key in the sizes section of your config.scss file to customize grid gutters.

$config: (
    'sizes': (
        'grid': (
            'narrow': 0.25rem,
            '2xsmall': 0.5rem,
            'xsmall': 1rem,
            'small': 1.5rem,
            'medium': 2rem,
            'large': 2.5rem,
            'xlarge': 3rem,
            'xxlarge': 3rem,
            '3xlarge': 4rem,
            '4xlarge': 5rem,
            '5xlarge': 8rem,
        )
    )
)

Previous page Getting Started

Next page JavaScript

JavaScript

UniCore's best practice of using its components and should always be considered first.

Our in-house components are listening for DOM manipulations and will automatically initialize, connect and disconnect components as they are inserted or removed from the DOM. That way it can easily be used with JavaScript frameworks like Vue.js and React.js.

Component usage

You can use our in-house components by adding data-uc-* attributes to your HTML elements without writing a single line of JavaScript.

<div data-uc-sticky="start: 100;"></div>

<div data-uc-height-viewport="offset-top: true;"></div>

<div data-uc-grid="masonry: true;"></div>

Component configuration

You can also initialize components via JavaScript and apply them to elements in your document.

var sticky = UniCore.sticky('#sticky', {
    offset: 50
});

You can retrieve an already initialized component by passing a selector or an element as a first Argument to the component function.

var sticky = UniCore.sticky('#sticky');

Omitting the second parameter will not re-initialize the component but serve as a getter function.

Programmatic use

Programmatically, components may be initialized with the element, options arguments format in JavaScript. The element argument may be any Node, selector or jQuery object. You'll receive the initialized component as return value. Functional Components (e.g. Notification) should omit the element parameter.

// Passing a selector and an options object.
var sticky = UniCore.sticky('.sticky', {
    offset: 50,
    top: 100
});

// Functional components should omit the 'element' argument.
var notifications = UniCore.notification('MyMessage', 'danger');

The options names must be in their camel cased representation, e.g. show-on-up becomes showOnUp.

After initialisation, you can get your component by calling the same initialisation function, omitting the options parameter.

// Sticky is now the prior initialised components
var sticky = UniCore.sticky('.sticky');

Previous page Customization

Colors

Convey meaning through color with a handful of color utility classes.

Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible so you can make sure you're designing with accessibility in mind.

Click on the color box to copy it's class code *-color-shade to your clipboard!

Usage

As you see you have color shades from 25, 50 and 100 to 900 for each built-in color and you can use this shades grades as classes to colorize text, background and border utilities.

The class formula is property-color-shade to call any color you want from our extended Colors library.

For example class="bg-primary-25 text-gray-700 border-primary-400".

Dark Mode is supported for this utilities: bg-*, text-* and border-*!

Primary colors

W/B

White

600 #FCFCFD

700 #FCFCFD

800 #FCFCFD

900 #FCFCFD

Typography

Common text utilities to font size, weight, style, control alignment, wrapping, and more.

While Bootstrap doesn’t include an icon set by default, we do have our own icon library called Unicons. Feel free to use them or any other icon set in your project. We’ve included details for Unicons below.

Headings

Name	Size	Weight	Class
Heading 1	48px/1.2	700	`.h1`
Heading 2	36px/1.2	700	`.h2`
Heading 3	28px/1.2	700	`.h3`
Heading 4	24px/1.2	700	`.h4`
Heading 5	20px/1.2	700	`.h5`
Heading 6	16px/1.2	700	`.h6`

<h1 class="h1">Heading 1</h1> or <h1>Heading 1</h1>
<h2 class="h2">Heading 2</h2> or <h2>Heading 2</h2>
<h3 class="h3">Heading 3</h3> or <h3>Heading 3</h3>
<h4 class="h4">Heading 4</h4> or <h4>Heading 4</h4>
<h5 class="h5">Heading 5</h5> or <h5>Heading 5</h5>
<h6 class="h6">Heading 6</h6> or <h6>Heading 6</h6>

Displays

Name	Size	Weight	Class
Display 1	16rem/1.2	700	`.display-1`
Display 2	12rem/1.2	700	`.display-2`
Display 3	10rem/1.2	700	`.display-3`
Display 4	8rem/1.2	700	`.display-4`
Display 5	6rem/1.2	700	`.display-5`
Display 6	5rem/1.2	700	`.display-6`

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h2 class="display-5">Display 5</h2>
<h2 class="display-6">Display 6</h2>

Text font size

Name	Size	Weight	Class
2X large	36px/1.5	400	`.fs-1`
X large	28px/1.5	400	`.fs-2`
Large	24px/1.5	400	`.fs-3`
Medium	20px/1.5	400	`.fs-4`
Small	16px/1.5	400	`.fs-5`
X Small	14px/1.5	400	`.fs-6`
2X Small	12px/1.5	400	`.fs-7`

<p class="fs-1">Body text xxl</p>
<p class="fs-2">Body text xl</p>
<p class="fs-3">Body text l</p>
<p class="fs-4">Body text m</p>
<p class="fs-5">Body text s</p>
<p class="fs-6">Body text xs</p>
<p class="fs-7">Body text 2xs</p>

Text font styles

Preview	Name	Weight	Class
Aa	Primary typeface	400	`.ft-primary`
Aa	Secondary typeface	400	`.ft-secondary`
Aa	Display typeface	400	`.ft-display`
Aa	Mono typeface	400	`.ft-mono`
Aa	Bolder	900	`.fw-bolder`
Aa	Bold	700	`.fw-bold`
Aa	Medium	500	`.fw-medium`
Aa	Normal	400	`.fst-normal`, `.fw-normal`
Aa	Light	300	`.fw-light`
Aa	Lighter	200	`.fw-lighter`
Aa	Italic	400	`.fst-italic`
Aa	Underline	400	`.text-underline`
Aa	Overline	400	`.text-overline`
Aa	Line through	400	`.text-line-through`
Aa	Remove decoration	400	`.text-none`
Aa	Lowercase	400	`.text-lowercase`
Aa	Capitalize	400	`.text-capitalize`
Aa	Uppercase	400	`.text-uppercase`

<!-- font-typeface -->
<p class="ft-primary">Sans-serf font</p>
<p class="ft-secondary">Serif font</p>
<p class="ft-display">Display font</p>
<p class="ft-mono">Mono font</p>

<!-- font-weight -->
<p class="fw-bolder">Bold 900</p>
<p class="fw-bold">Bold 700</p>
<p class="fw-medium">Medium 500</p>
<p class="fw-normal">Normal 400</p>
<p class="fw-light">Light 300</p>
<p class="fw-lighter">Lighter 200</p>

<!-- font-style -->
<p class="fst-normal">Normal</p>
<p class="fst-italic">Italic</p>

<!-- text-transform -->
<p class="text-uppercase">Uppercase</p>
<p class="text-lowercase">Lowercase</p>
<p class="text-capitalize">Capitalize</p>

<!-- text-decoration -->
<p class="text-underline">Underline</p>
<p class="text-overline">Overline</p>
<p class="text-line-through">Line through</p>
<p class="text-none">No decoration</p>

Layout

A powerful mobile-first grid to build layouts of all shapes and sizes based on 8pt System.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.

Containers

Extended

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

Name	Class	Description
Default	`.container`	This is the default size of the container.
Large	`.container max-w-lg`	Add this class for a large container.
Medium	`.container max-w-md`	Add this class for a medium container.
Small	`.container max-w-sm`	Add this class for a small container.
Expand	`.container max-w-100`	Add this class, if you do not want to limit the `container` width but still want the dynamic horizontal padding.

Flexbox Grid

Extended

Extended built-in features usage and examples for Flexbox Grid 8pt system.

To make sure the JavaScript functionalities works well add data-uc-grid attribute on the same element which have row class.

Class	Responsive	Rule
`.child-cols`, `.child-cols-{n}`	`true`	Now you can easily control all child columns with one class, just add it next to "row" class for example if we want a layout of 3 columns which means 4/12 each column, you have to write `class="row child-cols-4"`. Reminder: This feature is way different than `.row-cols-{n}` because you still have the ability to edit the child columns through thier own class to adjust their width you will find some examples below.
`.col-match`	`false`	Where you can make all columns match in height added this class just next to "row" class, for ex. `class="row col-match"`.

Child columns usage:

<div class="row child-cols-4">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

Instead of:

<div class="row">
    <div class="col-4">Col 1</div>
    <div class="col-4">Col 2</div>
    <div class="col-4">Col 3</div>
</div>

Child columns + custom column width

<div class="row child-cols-2">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div class="col-6">Col 4</div>
    <div class="col-6">Col 5</div>
    <div>Col 6</div>
    <div>Col 7</div>
    <div>Col 8</div>
</div>

Child columns + responsive:

TailwindCSS's method

<div class="row child-cols-12 sm:child-cols-6 md:child-cols-3">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
</div>

Bootstrap's method

<div class="row child-cols-12 child-cols-sm-6 child-cols-md-3">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
</div>

For more details about how responsive design syntax works.

Columns match height:

Before

After

<div class="row child-cols-4 col-match">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

Grid Separators:

Column separator

Row separator

All sides separator

<div class="row child-cols-4 gx-4 sep-y" data-uc-grid>
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

<div class="row child-cols-12 gy-4 sep-x" data-uc-grid>
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

<div class="row child-cols-4 g-4 sep" data-uc-grid>
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
    <div>Col 5</div>
    <div>Col 6</div>
</div>

Important: You should add data-uc-grid attribute to make sure the grid separator works well.

Masonry Grid

Built-in

If grid cells have different heights, a layout free of gaps can be created by adding masonry: true to data-uc-grid="" attribute.

<div class="row child-cols-4" data-uc-grid="masonry: true;">
    <div><div style="height: 200px">Col 1</div></div>
    <div><div style="height: 80px">Col 2</div></div>
    <div><div style="height: 150px">Col 3</div></div>
    <div><div style="height: 80px">Col 4</div></div>
    <div><div style="height: 150px">Col 5</div></div>
    <div><div style="height: 200px">Col 6</div></div>
</div>

CSS Grid

Extended

Extended built-in features usage and examples for CSS Grid 8pt system.

Class	Responsive	Rule
`.g-child-cols`, `.g-child-cols-{n}`	`true`	Utilities for specifying the columns in a grid layout. Use the `g-child-cols-{n}` utilities to create grids with n equally sized columns.
`.g-col-auto`, `.g-col-span-full`, `.g-col-span-{n}`	`true`	Utilities for controlling how elements are sized and placed across grid columns. Use the `g-col-span-{n}` utilities to make an element span n columns.
`.g-col-start-{n}`, `.g-col-end-{n}`	`true`	Use the `g-col-start-{n}` and `g-col-end-{n}` utilities to make an element start or end at the nth grid line. These can also be combined with the `g-col-span-{n}` utilities to span a specific number of columns. Note that CSS grid lines start at 1, not 0, so a full-width element in a 12-column grid would start at line 1 and end at line 13.
`.g-child-rows`, `.g-child-rows-{n}`	`true`	Utilities for specifying the rows in a grid layout. Use the `g-child-rows-{n}` utilities to create grids with n equally sized rows.
`.g-row-auto`, `.g-row-span-full`, `.g-row-span-{n}`	`true`	Utilities for controlling how elements are sized and placed across grid rows. Use the `row-span-{n}` utilities to make an element span n rows.
`.g-row-start-{n}`, `.g-row-end-{n}`	`true`	Use the `g-row-start-{n}` and `g-row-end-{n}` utilities to make an element start or end at the nth grid line. These can also be combined with the `g-row-span-{n}` utilities to span a specific number of rows. Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

Child columns usage:

<div class="grid g-child-cols-4">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
</div>

Instead of:

<div class="grid">
    <div class="g-col-4">Col 1</div>
    <div class="g-col-4">Col 2</div>
    <div class="g-col-4">Col 3</div>
</div>

Grid row/column span usage:

<div class="grid g-child-rows-4 g-child-cols-6 g-2">
    <div class="g-row-span-4">1</div>
    <div class="g-row-span-2 g-col-span-3">2</div>
    <div class="g-row-span-2 g-col-span-3">3</div>
    <div class="g-row-span-2">4</div>
</div>

<div class="grid g-child-rows-4 g-child-cols-6 g-2">
    <div class="g-row-span-2">1</div>
    <div class="g-row-span-4">2</div>
    <div class="g-row-span-2 g-col-span-2">3</div>
    <div class="g-row-span-2 g-col-span-2">4</div>
    <div class="g-row-span-2 g-row-span-2">5</div>
</div>

Playground:

<div class="grid g-child-rows-8 g-child-cols-6">
    <div class="g-row-span-4 g-col-span-2 g-row-start-3">
        ...
    </div>
    <div class="g-row-span-3 g-col-span-2 g-row-start-2 g-col-start-3">
        ...
    </div>
    <div class="g-row-span-3 g-col-span-2 g-row-start-5 g-col-start-3">
        ...
    </div>
    <div class="g-row-span-8 g-col-span-4 g-row-start-1 g-col-start-5">
        ... <!-- This must have a fixed height so other boxes base on that height -->
    </div>
    <div class="g-row-span-3 g-col-span-2 g-row-start-5 g-col-start-9">
        ...
    </div>
    <div class="g-row-span-3 g-col-span-2 g-row-start-2 g-col-start-9">
        ...
    </div>
    <div class="g-row-span-4 g-col-span-2 g-row-start-3">
        ...
    </div>
</div>

Gutters / Gaps

Extended

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

Name	Size	Class
Gutter narrow	4px	`.g-narrow`, `.gx-narrow`, `.gy-narrow`, `.gap-narrow`
Gutter 1	8px	`.g-1`, `.gx-1`, `.gy-1`, `.gap-1`
Gutter 2	16px	`.g-2`, `.gx-2`, `.gy-2`, `.gap-2`
Gutter 3	24px	`.g-3`, `.gx-3`, `.gy-3`, `.gap-3`
Gutter 4	32px	`.g-4`, `.gx-4`, `.gy-4`, `.gap-4`
Gutter 5	40px	`.g-5`, `.gx-5`, `.gy-5`, `.gap-5`
Gutter 6	48px	`.g-6`, `.gx-6`, `.gy-6`, `.gap-6`
Gutter 7	56px	`.g-7`, `.gx-7`, `.gy-7`, `.gap-7`
Gutter 8	64px	`.g-8`, `.gx-8`, `.gy-8`, `.gap-8`
Gutter 9	80px	`.g-9`, `.gx-9`, `.gy-9`, `.gap-9`
Gutter 10	128px	`.g-10`, `.gx-10`, `.gy-10`, `.gap-10`

Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters and of course you have the option to choose between Bootstrap or TailwindCSS method.

All sides gutters/gap

<div class="row child-cols-4 g-2">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
</div>

Custom vertical (y) sides gutters/gap

<div class="row child-cols-4 g-2 md:gy-4">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
</div>

Custom horiztonal (x) sides gutters/gap

<div class="row child-cols-4 g-2 md:gx-4">
    <div>Col 1</div>
    <div>Col 2</div>
    <div>Col 3</div>
    <div>Col 4</div>
</div>

Gutter classes g* works well for Flexbox Grid only, but, Gap classes gap* works for CSS Grid and any other Flex Elements.

Icons

A huge collection and well-crafted icons from IBM Plex Carbon.

Click on the icon box to copy it's class to your clipboard!

Library

Sizes

By default the icon will inherit the size of the font size 1rem = 16px.

Name	Size	Class
Size 1	20px	`.icon-1`
Size 2	24px	`.icon-2`
Size 3	32px	`.icon-3`
Size 4	48px	`.icon-4`
Size 5	64px	`.icon-5`
Size 6	80px	`.icon-6`

Usage

You can use unicon-* class to call any icon from our extended Unicons library.

To control the size of the icon use the default icon sizes classes icon-1 to icon-5 or font size classes fs-1 to fs-7.

To control the thickness of the icon, use the font weight classes for ex:
fw-bold, fw-light, etc.

Dark Mode

An inspired feature from TailwindCSS to style your site in dark mode.

Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.

To make this as easy as possible, We includes a dark:{class_name} variant that lets you style your site differently when dark mode is enabled, anyway, we have added this feature just like TailwindCSS with the same usage for more control over your design.

By default this uses the prefers-color-scheme CSS media feature, but you can also build sites that support toggling dark mode manually using the class strategy.

How it works

Now instead of dark:{class_name} classes being applied based on prefers-color-scheme, they will be applied whenever uc-dark class is present earlier (globally) or in the same tag (locally) in the HTML tree.

<!-- Dark mode not enabled -->
<html>
    <body>
    <!-- Will be white -->
    <div class="bg-white dark:bg-black">
        This is a content
    </div>
    </body>
</html>

<!-- Dark mode enabled globally -->
<html class="uc-dark">
    <body>
        <!-- Will be black -->
        <div class="bg-white dark:bg-black">
            This is a content
        </div>
    </body>
</html>

<!-- Dark mode enabled locally -->
<html>
    <body>
        <!-- Will be black -->
        <div class="bg-white dark:bg-black uc-dark">
            This is a content
        </div>
    </body>
</html>

How you add the dark class to the html element is up to you, but a common approach is to use a bit of JS that reads a preference from somewhere ( like localStorage ) and updates the DOM accordingly.

Responsive Design

Using responsive utility variants to build adaptive user interfaces.

An combination of Bootstrap's syntax and an inspired TailwindCSS's syntax to easily define your styles for a selected breakpoint.

Every utility class in UniCore can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

By default, the two syntaxes are works properly, but, you can enable/disable the syntax that you want to work with.

Class	Syntax	Description
`-{bp}-`	Infix breakpoint	The Bootstrap's reponsive class syntax.
`{bp}:*`	Prefix breakpoint	The TailwindCSS's reponsive class syntax.

There are five breakpoints by default, inspired by common device resolutions:

Breakpoint	Minimum Width	CSS
`sm`	576px	`@media (min-width: 576px) { ... }`
`md`	768px	`@media (min-width: 768px) { ... }`
`lg`	992px	`@media (min-width: 992px) { ... }`
`xl`	1200px	`@media (min-width: 1200px) { ... }`
`xxl`	1400px	`@media (min-width: 1400px) { ... }`

Bootstrap's syntax

Bootstrap’s responsive styles are built to be responsive, an approach that’s often referred to as mobile-first.

Here is a simple responsive grid layout with is method:

<div class="row g-2 g-lg-4">
    <div class="col col-sm-2 col-md-4">Item</div>
    <div class="col col-sm-2 col-md-4">Item</div>
    <div class="col col-sm-2 col-md-4">Item</div>
</div>

TailwindCSS's syntax

For this method to add a utility or a grid layout but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, followed by the : character.

Here is a simple responsive grid layout with this method:

<div class="row g-2 lg:g-4">
    <div class="col sm:col-2 md:col-4">Item</div>
    <div class="col sm:col-2 md:col-4">Item</div>
    <div class="col sm:col-2 md:col-4">Item</div>
</div>

Now, it's up to you to choose which syntax your prefer to work with! anyway, our pre-made templates used TailwindCSS's syntax cause we prefer that syntax!

Playground

Here’s a simple example of a component that uses a stacked layout on small screens, and a side-by-side layout on larger screens (resize your browser to see it in action):

Company retreats

Incredible accomodation for your team

Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.

<!-- Bootstrap syntax -->
<div class="card w-100 mx-auto rounded-3 shadow-sm overflow-hidden bg-white dark:bg-gray-700 dark:border-gray-700">
    <div class="d-lg-flex">
        <div class="flex-lg-shrink-0">
            <img class="h-100 object-cover" src="./assets/images/img-01.jpg" alt="Image title">
        </div>
        <div class="p-4">
            <div class="fs-6 fw-bold text-primary dark:text-primary-400">Company retreats</div>
            <a href="#" class="d-block mt-1 fs-4 text-none text-black dark:text-white">Incredible accomodation for your team</a>
            <p class="fs-6 mt-2 mb-0 text-gray-400 dark:text-gray-200">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
        </div>
    </div>
</div>

<!-- TailwindCSS syntax -->
<div class="card w-100 mx-auto rounded-3 shadow-sm overflow-hidden bg-white dark:bg-gray-700 dark:border-gray-700">
    <div class="lg:d-flex">
        <div class="lg:flex-shrink-0">
            <img class="h-100 object-cover" src="./assets/images/img-01.jpg" alt="Image title">
        </div>
        <div class="p-4">
            <div class="fs-6 fw-bold text-primary dark:text-primary-400">Company retreats</div>
            <a href="#" class="d-block mt-1 fs-4 text-none text-black dark:text-white">Incredible accomodation for your team</a>
            <p class="fs-6 mt-2 mb-0 text-gray-400 dark:text-gray-200">Looking to take your team away on a retreat to enjoy awesome food and take in some sunshine? We have a list of places to do just that.</p>
        </div>
    </div>
</div>

Utilities

A collection of useful utility classes to style your content.

We've overrided some of the existing Bootstrap utilities, extended some and added other useful ones to give you more control over your design, some of which are inspired by the TailwindCSS framework.

Spacing

Extended

Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance.

Name	Size	Class
Spacing narrow	4px	`.*-narrow`
Spacing 1	8px	`.*-1`
Spacing 2	16px	`.*-2`
Spacing 3	24px	`.*-3`
Spacing 4	32px	`.*-4`
Spacing 5	40px	`.*-5`
Spacing 6	48px	`.*-6`
Spacing 7	56px	`.*-7`
Spacing 8	64px	`.*-8`
Spacing 9	80px	`.*-9`
Spacing 10	128px	`.*-10`

Sizing

Extended

Utilities for setting the width or height of an element. we extended this utility for more control about setting a width or height of an element.

Width

Class	Properties
`.w-auto`	`width: auto;`
`.w-0`	`width: 0px;`
`.w-px`	`width: 1px;`
`.w-2px`	`width: 2px;`
`.w-4px`	`width: 4px;`
`.w-8px`	`width: 8px;`
`.w-16px`	`width: 16px;`
`.w-24px`	`width: 24px;`
`.w-32px`	`width: 32px;`
`.w-40px`	`width: 40px;`
`.w-48px`	`width: 48px;`
`.w-56px`	`width: 56px;`
`.w-64px`	`width: 64px;`
`.w-72px`	`width: 72px;`
`.w-80px`	`width: 80px;`
`.w-96px`	`width: 96px;`
`.w-100px`	`width: 100px;`
`.w-128px`	`width: 128px;`
`.w-150px`	`width: 150px;`
`.w-200px`	`width: 200px;`
`.w-300px`	`width: 300px;`
`.w-400px`	`width: 400px;`
`.w-500px`	`width: 500px;`
`.w-600px`	`width: 600px;`
`.w-xs`	`width: 440px;`
`.w-sm`	`width: 660px;`
`.w-md`	`width: 880px;`
`.w-lg`	`width: 1100px;`
`.w-xl`	`width: 1280px;`
`.w-2xl`	`width: 1320px;`
`.w-1/2`	`width: 50%;`
`.w-1/3`	`width: 33.333333%;`
`.w-2/3`	`width: 66.666667%;`
`.w-1/4`	`width: 25%;`
`.w-2/4`	`width: 50%;`
`.w-3/4`	`width: 75%;`
`.w-1/5`	`width: 20%;`
`.w-2/5`	`width: 40%;`
`.w-3/5`	`width: 60%;`
`.w-4/5`	`width: 80%;`
`.w-1/6`	`width: 16.666667%;`
`.w-2/6`	`width: 33.333333%;`
`.w-3/6`	`width: 50%;`
`.w-4/6`	`width: 66.666667%;`
`.w-5/6`	`width: 83.333333%;`
`.w-full` / `.w-100`	`width: 100%;`
`.w-screen`	`width: 100vw;`
`.w-min`	`width: min-content;`
`.w-max`	`width: max-content;`
`.w-fit`	`width: fit-content;`

Min width

Class	Properties
`.min-w-0`	`min-width: 0px;`
`.min-w-100px`	`min-width: 100px;`
`.min-w-150px`	`min-width: 150px;`
`.min-w-200px`	`min-width: 200px;`
`.min-w-300px`	`min-width: 300px;`
`.min-w-400px`	`min-width: 400px;`
`.min-w-500px`	`min-width: 500px;`
`.min-w-600px`	`min-width: 600px;`
`.min-w-xs`	`min-width: 440px;`
`.min-w-sm`	`min-width: 660px;`
`.min-w-md`	`min-width: 880px;`
`.min-w-lg`	`min-width: 1100px;`
`.min-w-xl`	`min-width: 1280px;`
`.min-w-2xl`	`min-width: 1320px;`
`.min-w-full` / `.min-w-100`	`min-width: 100%;`
`.min-w-min`	`min-width: min-content;`
`.min-w-max`	`min-width: max-content;`
`.min-w-fit`	`min-width: fit-content;`

Max width

Class	Properties
`.max-w-0`	`max-width: 0px;`
`.max-w-none`	`max-width: none;`
`.max-w-100px`	`max-width: 100px;`
`.max-w-150px`	`max-width: 150px;`
`.max-w-200px`	`max-width: 200px;`
`.max-w-300px`	`max-width: 300px;`
`.max-w-400px`	`max-width: 400px;`
`.max-w-500px`	`max-width: 500px;`
`.max-w-600px`	`max-width: 600px;`
`.max-w-xs`	`max-width: 440px;`
`.max-w-sm`	`max-width: 660px;`
`.max-w-md`	`max-width: 880px;`
`.max-w-lg`	`max-width: 1100px;`
`.max-w-xl`	`max-width: 1280px;`
`.max-w-2xl`	`max-width: 1320px;`
`.max-w-full` / `.max-w-100`	`max-width: 100%;`
`.max-w-min`	`max-width: min-content;`
`.max-w-max`	`max-width: max-content;`
`.max-w-fit`	`max-width: fit-content;`

Height

Class	Properties
`.h-auto`	`height: auto;`
`.h-0`	`height: 0px;`
`.h-px`	`height: 1px;`
`.h-2px`	`height: 2px;`
`.h-4px`	`height: 4px;`
`.h-8px`	`height: 8px;`
`.h-16px`	`height: 16px;`
`.h-24px`	`height: 24px;`
`.h-32px`	`height: 32px;`
`.h-40px`	`height: 40px;`
`.h-48px`	`height: 48px;`
`.h-56px`	`height: 56px;`
`.h-64px`	`height: 64px;`
`.h-72px`	`height: 72px;`
`.h-80px`	`height: 80px;`
`.h-96px`	`height: 96px;`
`.h-100px`	`height: 100px;`
`.h-128px`	`height: 128px;`
`.h-150px`	`height: 150px;`
`.h-200px`	`height: 200px;`
`.h-300px`	`height: 300px;`
`.h-400px`	`height: 400px;`
`.h-500px`	`height: 500px;`
`.h-600px`	`height: 600px;`
`.h-xs`	`height: 440px;`
`.h-sm`	`height: 660px;`
`.h-md`	`height: 880px;`
`.h-lg`	`height: 1100px;`
`.h-xl`	`height: 1280px;`
`.h-2xl`	`height: 1320px;`
`.h-1/2`	`height: 50%;`
`.h-1/3`	`height: 33.333333%;`
`.h-2/3`	`height: 66.666667%;`
`.h-1/4`	`height: 25%;`
`.h-2/4`	`height: 50%;`
`.h-3/4`	`height: 75%;`
`.h-1/5`	`height: 20%;`
`.h-2/5`	`height: 40%;`
`.h-3/5`	`height: 60%;`
`.h-4/5`	`height: 80%;`
`.h-1/6`	`height: 16.666667%;`
`.h-2/6`	`height: 33.333333%;`
`.h-3/6`	`height: 50%;`
`.h-4/6`	`height: 66.666667%;`
`.h-5/6`	`height: 83.333333%;`
`.h-full` / `.h-100`	`height: 100%;`
`.h-screen`	`height: 100vh;`
`.h-min`	`height: min-content;`
`.h-max`	`height: max-content;`
`.h-fit`	`height: fit-content;`

Min height

Class	Properties
`.min-h-0`	`min-height: 0px;`
`.min-h-100px`	`min-height: 100px;`
`.min-h-150px`	`min-height: 150px;`
`.min-h-200px`	`min-height: 200px;`
`.min-h-300px`	`min-height: 300px;`
`.min-h-400px`	`min-height: 400px;`
`.min-h-500px`	`min-height: 500px;`
`.min-h-600px`	`min-height: 600px;`
`.min-h-xs`	`min-height: 440px;`
`.min-h-sm`	`min-height: 660px;`
`.min-h-md`	`min-height: 880px;`
`.min-h-lg`	`min-height: 1100px;`
`.min-h-xl`	`min-height: 1280px;`
`.min-h-2xl`	`min-height: 1320px;`
`.min-h-full` / `.min-h-100`	`min-height: 100%;`
`.min-h-screen`	`min-height: 100vh;`
`.min-h-min`	`min-height: min-content;`
`.min-h-max`	`min-height: max-content;`
`.min-h-fit`	`min-height: fit-content;`

Max height

Class	Properties
`.max-h-0`	`max-height: 0px;`
`.max-h-none`	`max-height: none;`
`.max-h-100px`	`max-height: 100px;`
`.max-h-150px`	`max-height: 150px;`
`.max-h-200px`	`max-height: 200px;`
`.max-h-300px`	`max-height: 300px;`
`.max-h-400px`	`max-height: 400px;`
`.max-h-500px`	`max-height: 500px;`
`.max-h-600px`	`max-height: 600px;`
`.max-h-xs`	`max-height: 440px;`
`.max-h-sm`	`max-height: 660px;`
`.max-h-md`	`max-height: 880px;`
`.max-h-lg`	`max-height: 1100px;`
`.max-h-xl`	`max-height: 1280px;`
`.max-h-2xl`	`max-height: 1320px;`
`.max-h-full` / `.max-h-100`	`max-height: 100%;`
`.max-h-screen`	`max-height: 100vh;`
`.max-h-min`	`max-height: min-content;`
`.max-h-max`	`max-height: max-content;`
`.max-h-fit`	`max-height: fit-content;`

Flexbox

Extended

Utilities for setting the width or height of an element. we extended this utility for more control about setting a width or height of an element.

Flex

Class	Properties
`.flex-1`	`flex: 1 1 0%;`
`.flex-auto`, `.flex-fill`	`flex: 1 1 auto;`
`.flex-initial`	`flex: 0 1 auto;`
`.flex-none`	`flex: none;`

Justify content

Class	Properties
`.justify-start`	`justify-content: flex-start;`
`.justify-end`	`justify-content: flex-end;`
`.justify-center`	`justify-content: center;`
`.justify-between`	`justify-content: space-between;`
`.justify-around`	`justify-content: space-around;`
`.justify-evenly`	`justify-content: space-evenly;`

Justify items

Class	Properties
`.justify-items-start`	`justify-items: start;`
`.justify-items-end`	`justify-items: end;`
`.justify-items-center`	`justify-items: center;`
`.justify-items-stretch`	`justify-items: stretch;`

Justify self

Class	Properties
`.justify-self-auto`	`justify-self: auto;`
`.justify-self-start`	`justify-self: start;`
`.justify-self-end`	`justify-self: end;`
`.justify-self-center`	`justify-self: center;`
`.justify-self-stretch`	`justify-self: stretch;`

Align content

Class	Properties
`.content-start`	`align-content: flex-start;`
`.content-end`	`align-content: flex-end;`
`.content-center`	`align-content: center;`
`.content-between`	`align-content: space-between;`
`.content-around`	`align-content: space-around;`
`.content-evenly`	`align-content: space-evenly;`
`.content-baseline`	`align-content: baseline;`

Align items

Class	Properties
`.items-start`	`align-items: flex-start;`
`.items-end`	`align-items: flex-end;`
`.items-center`	`align-items: center;`
`.items-baseline`	`align-items: baseline;`
`.items-stretch`	`align-items: stretch;`

Align self

Class	Properties
`.self-auto`	`align-self: auto;`
`.self-start`	`align-self: flex-start;`
`.self-end`	`align-self: flex-end;`
`.self-center`	`align-self: center;`
`.self-baseline`	`align-self: baseline;`
`.self-stretch`	`align-self: stretch;`

Place content

Class	Properties
`.place-start`	`place-content: flex-start;`
`.place-end`	`place-content: flex-end;`
`.place-center`	`place-content: center;`
`.place-between`	`place-content: space-between;`
`.place-around`	`place-content: space-around;`
`.place-evenly`	`place-content: space-evenly;`
`.place-baseline`	`place-content: baseline;`
`.place-stretch`	`place-content: stretch;`

Place items

Class	Properties
`.place-items-start`	`place-items: start;`
`.place-items-end`	`place-items: end;`
`.place-items-center`	`place-items: center;`
`.place-items-baseline`	`place-items: baseline;`
`.place-items-stretch`	`place-items: stretch;`

Place self

Class	Properties
`.place-self-auto`	`place-self: auto;`
`.place-self-start`	`place-self: start;`
`.place-self-end`	`place-self: end;`
`.place-self-center`	`place-self: center;`
`.place-self-stretch`	`place-self: stretch;`

Hover & Focus

Extended

Use this utility to style elements on hover and focus.

There are two ways to work with states, you can use Bootstrap's default syntax *-hover or use our built-in syntax hover:* inspired by TailwindCSS.

You can choose the method that suits you best as UniCore supports the both ways, knowing that we prefer working with the TailwindCSS method hover:bg-secondary, here is an example as we overrided button hover state see this:

Get started

<!-- TailwindCSS method -->
<href="#" class="btn btn-primary hover:bg-secondary hover:border-secondary">
    Get started
</a>

<!-- Bootstrap default method -->
<href="#" class="btn btn-primary bg-secondary-hover border-secondary-hover">
    Get started
</a>

Border radius

Extended

We've extended the border radius property on the border utility, and it now supports responsive breakpoints and hover state.

0
(0px)

1
(4px)

Default
(8px)

2
(16px)

3
(24px)

4
(32px)

5
(40px)

6
(48px)

7
(56px)

8
(64px)

Pill
(50rem)

Circle
(100%)

<img src="..." class="rounded-0" alt="..."><!-- Radius 0px -->
<img src="..." class="rounded-1" alt="..."><!-- Radius 4px -->
<img src="..." class="rounded" alt="..."><!-- Radius 8px (Default) -->
<img src="..." class="rounded-2" alt="..."><!-- Radius 16px -->
<img src="..." class="rounded-3" alt="..."><!-- Radius 24px -->
<img src="..." class="rounded-4" alt="..."><!-- Radius 32px -->
<img src="..." class="rounded-5" alt="..."><!-- Radius 40px -->
<img src="..." class="rounded-6" alt="..."><!-- Radius 48px -->
<img src="..." class="rounded-7" alt="..."><!-- Radius 56px -->
<img src="..." class="rounded-8" alt="..."><!-- Radius 64px -->
<img src="..." class="rounded-pill" alt="..."><!-- Radius 50rem -->
<img src="..." class="rounded-circle" alt="..."><!-- Radius 50% -->
<img src="..." class="rounded-full" alt="..."><!-- Radius 100% -->

Responsive

Now border radius support responsive and you can set a radius for each breakpoint.

<img src="..." class="rounded-0 sm:rounded-4 md:rounded-circle" alt="...">

Resize the screen to see it in action!

Change on hover

We also make it support hover state so you can change the radius size on hover.

<img src="..." class="rounded-circle hover:rounded" alt="...">

Let's give it some smooth transitions

This is an example using hover state with transitions and transforms utilities.

<img src="..." class="rounded-circle hover:rounded transition-all duration-1s ease-expo" alt="...">

Playground

In this example you will find out how you can play with border radius.

<img src="..." class="rounded-end-4 rounded-bottom-8 rounded-start-2" alt="...">
<img src="..." class="rounded-top-5" alt="...">
<img src="..." class="rounded-5 rounded-top-start-0" alt="...">
<img src="..." class="rounded-bottom-start-7" alt="...">

Position

Extended

Utility for controlling the placement of positioned elements.

Included but not documented yet, coming soon.

Gradient

Built-in

Utility for adding gradient effect to your elements.

Included but not documented yet, coming soon.

Text

Extended

Utility for styling your content, headings and text elements.

Included but not documented yet, coming soon.

Stacks

Extended

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. We make it responsive ready so you can now control which breakpoint you need an hstack-{bp} or {bp}:hstack horizontal layout and a .vstack-{bp} or {bp}:vstack vertical layout direction.

Resize the screen to see it in action.

<!-- Bootstrap syntax -->
<div class="form-group vstack hstack-sm gap-narrow">
    <input type="email" class="form-control h-48px w-full bg-gray-25 border-gray-25 dark:bg-gray-700 dark:text-white dark:border-gray-700" placeholder="Your email address..">
    <button type="submit" class="btn btn-primary btn-md w-100 w-1/3-sm rounded-1">Sign in</button>
</div>

<!-- TailwindCSS syntax -->
<div class="form-group vstack sm:hstack gap-narrow">
    <input type="email" class="form-control h-48px w-full bg-gray-25 border-gray-25 dark:bg-gray-700 dark:text-white dark:border-gray-700" placeholder="Your email address..">
    <button type="submit" class="btn btn-primary btn-md w-100 sm:w-1/3 rounded-1">Sign in</button>
</div>

Shadows

Name	Size	Class
Shadow XS	0 2px 4px	`.shadow-xs`
Shadow S	0 4px 8px	`.shadow-sm`
Shadow M / Default	0 8px 16px	`.shadow`
Shadow L	0 16px 24px	`.shadow-lg`
Shadow XL	0 24px 32px	`.shadow-xl`
Shadow 2XL	0 32px 40px	`.shadow-2xl`

Transitions & Animation

Built-in

Create smooth transitions between two states when hovering an element.

Transition Property

Utilities for controlling which CSS properties transition.

Class	Properties
`.transition-none`	`transition-property: none;`
`.transition-all`	`transition-property: all;`
`.transition`	`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;`
`.transition-colors`	`transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;`
`.transition-sizes`	`transition-property: width, height, padding, margin;`
`.transition-opacity`	`transition-property: opacity;`
`.transition-shadow`	`transition-property: shadow;`
`.transition-transform`	`transition-property: transform;`

Transition Duration

Utilities for controlling the duration of CSS transitions.

Class	Properties
`.duration-0`	`transition-duration: 0ms;`
`.duration-75`	`transition-duration: 75ms;`
`.duration-100`	`transition-duration: 100ms;`
`.duration-150`	`transition-duration: 150ms;`
`.duration-200`	`transition-duration: 200ms;`
`.duration-250`	`transition-duration: 250ms;`
`.duration-300`	`transition-duration: 300ms;`
`.duration-350`	`transition-duration: 350ms;`
`.duration-400`	`transition-duration: 400ms;`
`.duration-450`	`transition-duration: 450ms;`
`.duration-500`	`transition-duration: 500ms;`
`.duration-1s`	`transition-duration: 1000ms;`
`.duration-2s`	`transition-duration: 2000ms;`
`.duration-3s`	`transition-duration: 3000ms;`
`.duration-4s`	`transition-duration: 4000ms;`
`.duration-5s`	`transition-duration: 5000ms;`
`.duration-10s`	`transition-duration: 10000ms;`

Transition Delay

Utilities for controlling the delay of CSS transitions.

Class	Properties
`.delay-0`	`transition-delay: 0ms;`
`.delay-75`	`transition-delay: 75ms;`
`.delay-100`	`transition-delay: 100ms;`
`.delay-150`	`transition-delay: 150ms;`
`.delay-200`	`transition-delay: 200ms;`
`.delay-250`	`transition-delay: 250ms;`
`.delay-300`	`transition-delay: 300ms;`
`.delay-350`	`transition-delay: 350ms;`
`.delay-400`	`transition-delay: 400ms;`
`.delay-450`	`transition-delay: 450ms;`
`.delay-500`	`transition-delay: 500ms;`
`.delay-1s`	`transition-delay: 1000ms;`
`.delay-2s`	`transition-delay: 2000ms;`
`.delay-3s`	`transition-delay: 3000ms;`
`.delay-4s`	`transition-delay: 4000ms;`
`.delay-5s`	`transition-delay: 5000ms;`
`.delay-10s`	`transition-delay: 10000ms;`

Transition Timing Function

Utilities for controlling the easing of CSS transitions.

Class	Properties
`.ease-linear`	`transition-timing-function: linear;`
`.ease-in`	`transition-timing-function: cubic-bezier(0.4, 0, 1, 1);`
`.ease-out`	`transition-timing-function: cubic-bezier(0, 0, 0.2, 1);`
`.ease-in-out`	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
`.ease-elastic`	`transition-timing-function: cubic-bezier(1, 0, 1, 0);`
`.ease-expo`	`transition-timing-function: cubic-bezier(1, 0, 0, 1);`
`.ease-bounce`	`transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);`

Transforms

Built-in

Create smooth transitions between two states when hovering an element.

Scale

Utilities for scaling elements with transform.

Class	Properties
`.scale-0`	`transform: scale(0);`
`.scale-x-0`	`transform: scaleX(0);`
`.scale-y-0`	`transform: scaleY(0);`
`.scale-50`	`transform: scale(.5);`
`.scale-x-50`	`transform: scaleX(.5);`
`.scale-y-50`	`transform: scaleY(.5);`
`.scale-75`	`transform: scale(.75);`
`.scale-x-75`	`transform: scaleX(.75);`
`.scale-y-75`	`transform: scaleY(.75);`
`.scale-90`	`transform: scale(.9);`
`.scale-x-90`	`transform: scaleX(.9);`
`.scale-y-90`	`transform: scaleY(.9);`
`.scale-95`	`transform: scale(.95);`
`.scale-x-95`	`transform: scaleX(.95);`
`.scale-y-95`	`transform: scaleY(.95);`
`.scale-100`	`transform: scale(1);`
`.scale-x-100`	`transform: scaleX(1);`
`.scale-y-100`	`transform: scaleY(1);`
`.scale-105`	`transform: scale(1.05);`
`.scale-x-105`	`transform: scaleX(1.05);`
`.scale-y-105`	`transform: scaleY(1.05);`
`.scale-110`	`transform: scale(1.1);`
`.scale-x-110`	`transform: scaleX(1.1);`
`.scale-y-110`	`transform: scaleY(1.1);`
`.scale-125`	`transform: scale(1.25);`
`.scale-x-125`	`transform: scaleX(1.25);`
`.scale-y-125`	`transform: scaleY(1.25);`
`.scale-150`	`transform: scale(1.5);`
`.scale-x-150`	`transform: scaleX(1.5);`
`.scale-y-150`	`transform: scaleY(1.5);`

Translate

Utilities for translating elements with transform.

Class	Properties
`.translate-0`	`transform: translate(0);`
`.translate-x-0`	`transform: translateX(0);`
`.translate-y-0`	`transform: translateY(0);`
`.translate-px`	`transform: translate(1px);`
`.translate-x-px`	`transform: translateX(1px);`
`.translate-y-px`	`transform: translateY(1px);`
`.translate-narrow`	`transform: translate(0.25rem);`
`.translate-x-narrow`	`transform: translateX(0.25rem);`
`.translate-y-narrow`	`transform: translateY(0.25rem);`
`.translate-1`	`transform: translate(0.5rem);`
`.translate-x-1`	`transform: translateX(0.5rem);`
`.translate-y-1`	`transform: translateY(0.5rem);`
`.translate-2`	`transform: translate(1rem);`
`.translate-x-2`	`transform: translateX(1rem);`
`.translate-y-2`	`transform: translateY(1rem);`
`.translate-3`	`transform: translate(1.5rem);`
`.translate-x-3`	`transform: translateX(1.5rem);`
`.translate-y-3`	`transform: translateY(1.5rem);`
`.translate-4`	`transform: translate(2rem);`
`.translate-x-4`	`transform: translateX(2rem);`
`.translate-y-4`	`transform: translateY(2rem);`
`.translate-5`	`transform: translate(2.5rem);`
`.translate-x-5`	`transform: translateX(2.5rem);`
`.translate-y-5`	`transform: translateY(2.5rem);`
`.translate-6`	`transform: translate(3rem);`
`.translate-x-6`	`transform: translateX(3rem);`
`.translate-y-6`	`transform: translateY(3rem);`
`.translate-7`	`transform: translate(4rem);`
`.translate-x-7`	`transform: translateX(4rem);`
`.translate-y-7`	`transform: translateY(4rem);`
`.translate-8`	`transform: translate(5rem);`
`.translate-x-8`	`transform: translateX(5rem);`
`.translate-y-8`	`transform: translateY(5rem);`
`.translate-9`	`transform: translate(6rem);`
`.translate-x-9`	`transform: translateX(6rem);`
`.translate-y-9`	`transform: translateY(6rem);`
`.translate-10`	`transform: translate(8rem);`
`.translate-x-10`	`transform: translateX(8rem);`
`.translate-y-10`	`transform: translateY(8rem);`
`.translate-25`	`transform: translate(25%);`
`.translate-x-25`	`transform: translateX(25%);`
`.translate-y-25`	`transform: translateY(25%);`
`.translate-50`	`transform: translate(50%);`
`.translate-x-50`	`transform: translateX(50%);`
`.translate-y-50`	`transform: translateY(50%);`
`.translate-75`	`transform: translate(75%);`
`.translate-x-75`	`transform: translateX(75%);`
`.translate-y-75`	`transform: translateY(75%);`
`.translate-full`	`transform: translate(100%);`
`.translate-x-full`	`transform: translateX(100%);`
`.translate-y-full`	`transform: translateY(100%);`

To use a negative translate value, prefix the class name with a dash to convert it to a negative value.
For example: -translate-y-6.

Rotate

Utilities for rotating elements with transform.

Class	Properties
`.rotate-0`	`transform: rotate(0deg);`
`.rotate-1`	`transform: rotate(1deg);`
`.rotate-2`	`transform: rotate(2deg);`
`.rotate-3`	`transform: rotate(3deg);`
`.rotate-6`	`transform: rotate(6deg);`
`.rotate-12`	`transform: rotate(12deg);`
`.rotate-45`	`transform: rotate(45deg);`
`.rotate-90`	`transform: rotate(90deg);`
`.rotate-180`	`transform: rotate(180deg);`

To use a negative rotate value, prefix the class name with a dash to convert it to a negative value.
For example: -rotate-90.

Transform Origin

Utilities for specifying the origin for an element's transformations.

Class	Properties
`.origin-center`	`transform-origin: center;`
`.origin-right`	`transform-origin: right;`
`.origin-left`	`transform-origin: left;`
`.origin-top`	`transform-origin: top;`
`.origin-top-right`	`transform-origin: top right;`
`.origin-top-left`	`transform-origin: top left;`
`.origin-bottom`	`transform-origin: bottom;`
`.origin-bottom-right`	`transform-origin: bottom right;`
`.origin-bottom-left`	`transform-origin: bottom left;`

Opacity

Extended

The opacity property sets the opacity level for an element. Opacity level describes the transparency level. We extended this utility from only 25, 50, 75, 100 to a step by 5 for a full control 0, 5, n..., 100.

.opacity-0

.opacity-5

.opacity-10

.opacity-15

.opacity-20

.opacity-25

.opacity-30

.opacity-35

.opacity-40

.opacity-45

.opacity-50

.opacity-55

.opacity-60

.opacity-65

.opacity-70

.opacity-75

.opacity-80

.opacity-85

.opacity-90

.opacity-95

.opacity-100

<div class="opacity-0"></div><!-- opacity: 0; -->
<div class="opacity-5"></div><!-- opacity: 0.05; -->
<div class="opacity-10"></div><!-- opacity: 0.1; -->
<div class="opacity-15"></div><!-- opacity: 0.15; -->
<div class="opacity-20"></div><!-- opacity: 0.2; -->
<div class="opacity-25"></div><!-- opacity: 0.25; -->
<div class="opacity-30"></div><!-- opacity: 0.3; -->
<div class="opacity-35"></div><!-- opacity: 0.35; -->
<div class="opacity-40"></div><!-- opacity: 0.4; -->
<div class="opacity-45"></div><!-- opacity: 0.45; -->
<div class="opacity-50"></div><!-- opacity: 0.5; -->
<div class="opacity-55"></div><!-- opacity: 0.55; -->
<div class="opacity-60"></div><!-- opacity: 0.6; -->
<div class="opacity-65"></div><!-- opacity: 0.65; -->
<div class="opacity-70"></div><!-- opacity: 0.7; -->
<div class="opacity-75"></div><!-- opacity: 0.75; -->
<div class="opacity-80"></div><!-- opacity: 0.8; -->
<div class="opacity-85"></div><!-- opacity: 0.85; -->
<div class="opacity-90"></div><!-- opacity: 0.9; -->
<div class="opacity-95"></div><!-- opacity: 0.95; -->
<div class="opacity-100"></div><!-- opacity: 1; -->

The extended opacity classes also supports background bg-opacity-{*}, border border-opacity-{*} and text text-opacity-{*}.

<!-- Background opacity: 0.5 -->
<div class="bg-primary bg-opacity-50">

<!-- Border opacity: 0.1 -->
<div class="border-primary border-opacity-10">

<!-- Text opacity: 0.65 -->
<div class="text-primary text-opacity-65">

Anyway, our classes provide only step by 5 values, for a custom opacity you can use css variable --bs-{propery}-opacity in an inline css <style> attribute. for example:

<!-- Background opacity: 0.12 -->
<div class="bg-primary" style="--bs-bg-opacity: .12;">

<!-- Border opacity: 0.44 -->
<div class="border-primary" style="--bs-border-opacity: .44;">

<!-- Text opacity: 0.86 -->
<div class="text-primary" style="--bs-text-opacity: .86;">

This utility support darkmode dark:class_name and hover state hover:class_name.

Blend Modes

Built-in

Add one of the following classes to apply different Blend Modes to your backgrounds, for example when placing them on images. You can combine these with the Opacity utility.

Default

color

color-burn

color-dodge

darken

difference

exclusion

hard-light

hue

lighten

luminosity

multiply

normal

overlay

plus-lighter

saturation

screen

soft-light

<div class="bg-primary blend-color"> ... </div>
<div class="bg-primary blend-color-burn"> ... </div>
<div class="bg-primary blend-color-dodge"> ... </div>
<div class="bg-primary blend-darken"> ... </div>
<div class="bg-primary blend-difference"> ... </div>
<div class="bg-primary blend-exclusion"> ... </div>
<div class="bg-primary blend-hard-light"> ... </div>
<div class="bg-primary blend-hue"> ... </div>
<div class="bg-primary blend-lighten"> ... </div>
<div class="bg-primary blend-luminosity"> ... </div>
<div class="bg-primary blend-multiply"> ... </div>
<div class="bg-primary blend-normal"> ... </div>
<div class="bg-primary blend-overlay"> ... </div>
<div class="bg-primary blend-plus-lighter"> ... </div>
<div class="bg-primary blend-saturation"> ... </div>
<div class="bg-primary blend-screen"> ... </div>
<div class="bg-primary blend-soft-light"> ... </div>

This utility support darkmode dark:class_name and hover state hover:class_name.

Blur effect

Built-in

Add one of the following classes to apply different Blend Modes to your backgrounds, for example when placing them on images. You can combine these with the Opacity utility.

.blur-0

.blur-1

.blur-2

.blur-3

.blur-4

.blur-5

.blur-6

.blur-7

.blur-8

.blur-9

.blur-10

<div class="blur-0"></div><!-- filter: blur(0); -->
<div class="blur-1"></div><!-- filter: blur(4px); -->
<div class="blur-2"></div><!-- filter: blur(8px); -->
<div class="blur-3"></div><!-- filter: blur(16px); -->
<div class="blur-4"></div><!-- filter: blur(24px); -->
<div class="blur-5"></div><!-- filter: blur(32px); -->
<div class="blur-6"></div><!-- filter: blur(48px); -->
<div class="blur-7"></div><!-- filter: blur(64px); -->
<div class="blur-8"></div><!-- filter: blur(80px); -->
<div class="blur-9"></div><!-- filter: blur(96px); -->
<div class="blur-10"></div><!-- filter: blur(128px); -->

This utility support darkmode dark:class_name and hover state hover:class_name.

Visibility

Built-in

Use responsive and toggle visibility classes to display or hide elements on different devices.

Toggle

To display elements on hover or focus only, add the .visible-toggle class to a parent element and one of the following classes to any child elements which should be hidden.

Class	Description
`hidden-hover`	The element is removed from the document flow when hidden.
`invisible-hover`	The element is not removed from the document flow when hidden.

The child elements will be displayed when the parent element is hovered or focused. Add tabindex="0" to the parent element to allow it to receive focus through keyboard navigation and on touch devices.

If there are <a> or <button> elements within the hidden child element, they are already focusable through keyboard navigation and will make the child element appear. Therefore, add tabindex="-1" so the parent element is still focusable on touch devices.

Hover me!

I'm hidden but visible on hover

<div class="visible-toggle" tabindex="0">
    <div class="hidden-hover"></div>
</div>

Hover me!

I still have a place and hidden but visible on hover

<div class="visible-toggle" tabindex="0">
    <div class="invisible-hover"></div>
</div>

Other

Built-in

A collection of useful utility classes to style your content.

Panel

UniCore uses panels to outline certain sections of your content. These can be arranged in grid columns from the Grid component, for example.

Add the .panel class to a <div> element to create a position context, set box-sizing to border-box, apply a clearfix and to remove the bottom margin of its last child element.

<div class="panel"><!-- ... --></div>

Object Fit and Position

Define how the content of an image or video should be resized to fit its element.

Class	Description
`.object-cover`	Scales the image by keeping its aspect ratio to completely cover the content box.
`.object-contain`	Scales the image by keeping its aspect ratio as far as its width and height can fit inside the content box.
`.object-fill`	Scales the image to fill the element's content box.
`.object-none`	Scales the image to fill the element's content box.
`.object-scale-down`	Like contain, but never up-scales.

<img class="object-cover" src="..." alt="...">

To modify the alignment of the image or video within its element, add one of the object-position-* classes.

Class	Description
`.object-position-center`	Align to the center.
`.object-position-top`	Align to the top.
`.object-position-right`	Align to the right.
`.object-position-bottom`	Align to the bottom.
`.object-position-left`	Align to the left.

<img class="object-cover object-position-top" src="..." alt="...">

Ratio (Extended feature)

To have an image cover its parent element, add the .ratio-*x* class to the parent element.

<div class="ratio-4x3">
    <img src="..." alt="...">
</div>

Class	Value
`.ratio-1x1`	`100%`
`.ratio-1x2`	`200%`
`.ratio-2x1`	`50%`
`.ratio-2x3`	`150%`
`.ratio-3x2`	`66.6666667%`
`.ratio-3x4`	`133.333333%`
`.ratio-4x3`	`75%`
`.ratio-16x9`	`56.25%`
`.ratio-21x9`	`42.8571429%`

Media Cover

Expand images to cover their entire container as you can place your own content on top.

<div class="position-relative h-xs">
    <img class="media-cover" src="..." alt="...">
</div>

Note: You should have position: relative applied on the parent element and set a height on it.

Z-index

Add this class to apply a z-index on a element. for negative z-index suffix the class with n

Class	Property
`.z-0`	`z-index: 0;`
`.z-1`	`z-index: 1;`
`.z-1n`	`z-index: -1;`
`.z-2`	`z-index: 2;`
`.z-2n`	`z-index: -2;`
`.z-3`	`z-index: 3;`
`.z-3n`	`z-index: -3;`
`.z-99`	`z-index: 99;`
`.z-999`	`z-index: 999;`
`.z-1000`	`z-index: 1000;`
`.z-1020`	`z-index: 1020;`
`.z-1030`	`z-index: 1030;`
`.z-1040`	`z-index: 1040;`
`.z-1045`	`z-index: 1045;`
`.z-1050`	`z-index: 1050;`
`.z-1055`	`z-index: 1055;`
`.z-1060`	`z-index: 1060;`
`.z-1070`	`z-index: 1070;`
`.z-1080`	`z-index: 1080;`
`.z-1090`	`z-index: 1090;`
`.z-9999`	`z-index: 9999;`

<!-- default z-index -->
<div class="z-1"></div>

<!-- for negative z-index -->
<div class="z-1n"></div>

Accordions

Included but not documented yet, coming soon.

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).

A simple primary alert

A simple secondary alert

A simple success alert

A simple danger alert

A simple warning alert

A simple info alert

A simple dark alert

<div class="alert alert-primary" role="alert">
    A simple primary alert
</div>
<div class="alert alert-secondary" role="alert">
    A simple secondary alert
</div>
<div class="alert alert-success" role="alert">
    A simple success alert
</div>
<div class="alert alert-danger" role="alert">
    A simple danger alert
</div>
<div class="alert alert-warning" role="alert">
    A simple warning alert
</div>
<div class="alert alert-info" role="alert">
    A simple info alert
</div>
<div class="alert alert-dark" role="alert">
    A simple dark alert
</div>

Animations

A collection of smooth animations to use within your page.

All animations themselves are implemented with CSS, so they do not require JavaScript to play.

Usage

Add one of the .uc-animation-* classes to any element. The animation is shown when the class is added, so usually immediately on page load.

Class	Description
`.uc-animation-fade`	The element fades in.
`.uc-animation-scale-up` `.uc-animation-scale-down`	The element fades in and scales up or down.
`.uc-animation-slide-top` `.uc-animation-slide-right` `.uc-animation-slide-bottom` `.uc-animation-slide-left`	The element fades and slides in from the top, bottom, left or right by its own height or width.
`.uc-animation-slide-top-small` `.uc-animation-slide-right-small` `.uc-animation-slide-bottom-small` `.uc-animation-slide-left-small`	The element fades and slides in from the top, bottom, left or right with a smaller distance which is specified by a fixed pixel value.
`.uc-animation-slide-top-medium` `.uc-animation-slide-right-medium` `.uc-animation-slide-bottom-medium` `.uc-animation-slide-left-medium`	The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value.
`.uc-animation-kenburns`	The element will scales very slowly up without fading in.
`.uc-animation-shake`	The element shakes.
`.uc-animation-stroke`	The SVG element strokes are drawn.
`.uc-animation-spin`	The element spin.
`.uc-animation-ping`	The element ping.
`.uc-animation-pulse`	The element pulse.
`.uc-animation-bounce`	The element bounce.

<div class="uc-animation-fade"></div>

Toggle animation

To toggle an animation on hover or focus, add the uc-animation-toggle class to a parent element. Also add tabindex="0" to make the animation focusable through keyboard navigation and on touch devices.

Slide left

Slide top

Slide right

Slide bottom

<div class="uc-animation-toggle" tabindex="0">
    <div class="uc-animation-fade"></div>
</div>

Reverse animation

By default, all animations are incoming. To reverse any animation, add the uc-animation-reverse class.

Slide left

Slide top

Slide right

Slide bottom

<div class="uc-animation-fade uc-animation-reverse"></div>

Speed modifier

To play animations at a faster speed, add the uc-animation-fast class to the element.

Slide left

Slide top

Slide right

Slide bottom

<div class="uc-animation-fade uc-animation-speed"></div>

Origin modifiers

By default, scaling animations originate from the center. To modify this behavior, add one of the .origin-* classes from the Utilities.

Top left

Top center

Bottom right

Ken Burns

To add a simple Ken Burns effect, add the uc-animation-kenburns class to any image. You can also apply the uc-animation-reverse or one of the .origin-* classes from the Utilities to modify the effect. Hover on the images below to see it in action!

Origin: default = center

Origin: top-right

<img class="uc-animation-kenburns" src="" width="" height="" alt="" />

<img class="uc-animation-kenburns origin-top-right" src="" width="" height="" alt="" />

By default, the animation starts on page load. In this example we used the uc-animation-toggle, to toggle the effect when mouse move over the image.

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Color

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. but, we extended it to use all the color shades class to style your buttons as you want.

Primary P 200 P 700 Secondary Success

Info Warning Danger Dark Gray Light

<href="#" class="btn btn-primary">Primary</a>
<href="#" class="btn btn-primary-200 text-primary-700">Primary 200</a>
<href="#" class="btn btn-primary-700 text-primary-200">Primary 700</a>
<href="#" class="btn btn-secondary">Secondary</a>
<href="#" class="btn btn-success">Success</a>
<href="#" class="btn btn-info">Info</a>
<href="#" class="btn btn-warning">Warning</a>
<href="#" class="btn btn-danger">Danger</a>
<href="#" class="btn btn-dark">Dark</a>
<href="#" class="btn btn-gray">Gray</a>
<href="#" class="btn btn-light">Light</a>

Size

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

2X X L M S XS 2XS

<href="#" class="btn btn-primary btn-2xl">2X Large</a>
<href="#" class="btn btn-primary btn-xl">X Large</a>
<href="#" class="btn btn-primary btn-lg">Large</a>
<href="#" class="btn btn-primary">Medium</a><!-- default size -->
<href="#" class="btn btn-primary btn-sm">Small</a>
<href="#" class="btn btn-primary btn-xs">X Small</a>
<href="#" class="btn btn-primary btn-2xs">2X Small</a>

Type

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast, anyway, you have four type to work with!

Default Outline Alternate Ghost

<href="#" class="btn btn-primary">Default</a>
<href="#" class="btn btn-outline-primary">Outline</a>
<href="#" class="btn btn-alt-primary">Alternate</a>
<href="#" class="btn btn-ghost-primary">Ghost</a>

Icon

You can add icons to your buttons and customize your buttons using some useful utilities like sizing, radius to achieve the needed style and shape.

Check it out Download

<href="#" class="btn btn-primary">
    <span>Check it out</span><i class="unicon-arrow-right"></i>
</a>
<href="#" class="btn btn-primary">
    <i class="unicon-cloud-download"></i><span>Download</span>
</a>
<href="#" class="btn btn-primary w-48px h-48px rounded-circle">
    <i class="unicon-close"></i>
</a>

Responsive

Now buttons are responsive and you can set a button size to a selected breakpoint.

Resize screen

<href="#" class="btn btn-primary btn-sm sm:btn-md lg:btn-lg">...</a>

Carousel

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Usage

By the way, this component is from Bootstrap and we have no change or extend any options so you can check out the full instructions for this component on their docs!

Here’s a simple example of a carousel with slides, controls and indicators.

<div id="carousel-demo" class="carousel slide rounded overflow-hidden" data-bs-ride="true">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <div class="ratio ratio-4x3">
                <img src="..." alt="...">
            </div>
        </div>
        <div class="carousel-item">
            <div class="ratio ratio-4x3">
                <img src="..." alt="...">
            </div>
        </div>
        <div class="carousel-item">
            <div class="ratio ratio-4x3">
                <img src="..." alt="...">
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carousel-demo" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carousel-demo" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

Form

Give textual form controls an upgrade with custom styles, sizing, focus states, and more.

Overview

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Looks good!

Please put your address email!

Password

Looks good!

Password is required!

Address

Address 2

City

State

Zip

I read and accept the terms and conditions.

<form class="row gx-2 gy-3 needs-validation" novalidate>
    <div class="col-md-6">
        <label for="inputEmail4" class="form-label">Email</label>
        <input type="email" class="form-control" id="inputEmail4" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please put your address email!</div>
    </div>
    <div class="col-md-6">
        <label for="inputPassword4" class="form-label">Password</label>
        <input type="password" class="form-control" id="inputPassword4" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Password is required!</div>
    </div>
    <div class="col-12">
        <label for="inputAddress" class="form-label">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
    </div>
    <div class="col-12">
        <label for="inputAddress2" class="form-label">Address 2</label>
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
    </div>
    <div class="col-md-6">
        <label for="inputCity" class="form-label">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="col-md-4">
        <label for="inputState" class="form-label">State</label>
        <select id="inputState" class="form-select">
        <option selected>Choose...</option>
        <option>...</option>
        </select>
    </div>
    <div class="col-md-2">
        <label for="inputZip" class="form-label">Zip</label>
        <input type="number" class="form-control" id="inputZip">
    </div>
    <div class="col-12">
        <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck">
        <label class="form-check-label" for="gridCheck">
            I read and accept the <a href="#" class="link-gradient">terms and conditions</a>.
        </label>
        </div>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary w-full mt-1">Sign in</button>
    </div>
</form>

Sizing

Set heights using classes like .form-control-lg and .form-control-sm.

<!-- lg: height 56px -->
<input type="email" class="form-control form-control-lg">

<!-- default: height 48px -->
<input type="email" class="form-control">

<!-- sm: height 40px -->
<input type="email" class="form-control form-control-sm">

Form and icons (Built-in feature)

You can use an icon from the Icon library inside a form control. Wrap the form control + icon on an element has .form-icon-group class and add .form-icon class to your icon element.

By default, the icon will be placed on the left side of the form, to change the alignment,
add the .form-icon-flip class just next to .form-icon-group class.

To enable an action, use an <a> or <button> element to make the icon clickable for an action.

<!-- Default alignement + Non-clickable icon -->
<div class="form-icon-group w-1/2 mx-auto">
    <input type="email" class="form-control" placeholder="Search..">
    <span class="form-icon text-gray">
        <i class="unicon-search icon-2"></i>
    </span>
</div>

<!-- Flip alignement + <a> element -->
<div class="form-icon-group form-icon-flip w-1/2 mx-auto">
    <input type="email" class="form-control" placeholder="Search..">
    <a href="#" class="form-icon text-gray">
        <i class="unicon-arrow-right icon-2"></i>
    </a>
</div>

<!-- Flip alignement + <button> element -->
<div class="form-icon-group form-icon-flip w-1/2 mx-auto">
    <input type="email" class="form-control" placeholder="Search..">
    <button type="button" class="form-icon text-gray">
        <i class="unicon-send-alt icon-2"></i>
    </button>
</div>

Playground

Here are some examples of how you can create a custom froms from inputs, buttons and some utilities.

<div class="vstack hstack-sm gap-narrow">
    <input type="email" class="form-control h-48px w-full bg-gray-25 border-gray-25 dark:bg-gray-700 dark:text-white dark:border-gray-700" placeholder="Your email address..">
    <button type="submit" class="btn btn-primary btn-md w-100 sm:w-1/3 rounded-1">Sign in</button>
</div>
<div class="vstack hstack-sm gap-narrow">
    <input type="email" class="form-control h-48px w-full dark:text-white" placeholder="Your email address..">
    <button type="submit" class="btn btn-primary btn-md w-100 sm:w-1/3 rounded-1">Sign in</button>
</div>
<div class="vstack hstack-sm gap-1 rounded-2 p-narrow bg-gray-25 dark:bg-gray-700 dark:border-gray-700">
    <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address..">
    <button type="submit" class="btn btn-primary w-100 sm:w-1/3 rounded-1">Sign in</button>
</div>
<div class="vstack hstack-sm gap-1 border rounded-2 p-narrow bg-white dark:bg-gray-700 dark:border-gray-700">
    <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address..">
    <button type="submit" class="btn btn-ghost-primary w-100 sm:w-1/3 rounded-1">Sign in</button>
</div>
<div class="hstack gap-1 border-bottom p-narrow dark:border-gray-700">
    <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address..">
    <button type="submit" class="btn btn-alt-primary w-48px h-48px rounded-circle"><i class="unicon-send-alt icon-2"></i></button>
</div>

Background Image

Use background images with lazy loading, responsive images and different image sources.

Usage

To apply this component, add the data-uc-img and the data-src attribute containing the image path for the background image to a div or any other element. By default, the background image will be lazy loaded as it enters the viewport when scrolling.

<div class="h-300px w-300px" data-src="{Image_URL}" data-uc-img></div>

Note: you should give it a height and width or make it cover to the parent element.

Extended classes

We have made some built-in classes for more controll on your background images.

Class	Default	Description
`.bg-auto` `.bg-cover` `.bg-contain`	cover	The background size of the image.
`.bg-center` `.bg-top` `.bg-right` `.bg-bottom` `.bg-left`	center	The background position of the image.
`.bg-fixed` `.bg-local` `.bg-scroll`	unset	The background attachment of the image.
`.bg-no-repeat` `.bg-repeat-x` `.bg-repeat-y` `.bg-round` `.bg-space`	no-repeat	The background repeat of the image.

An example with extended background image classes.

<div class="bg-contain bg-center bg-fixed" data-src="{Image_URL}" data-uc-img=""></div>

Srcset

To use the srcset feature for background images, just add the data-srcset attribute. Optionally, add the sizes attribute but without prefix.

<div data-src="{Image_URL}" data-srcset="{Image_multi_sizes_URLs}" sizes="" data-uc-img=""></div>

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option	Value	Default	Description
`dataSrc`	String	`''`	The image's `src` attribute.
`sources`	String	`''`	The image's sources. This option is used for background images only. The sources attributes be passed in `key: value;` format for a single source. For multiple sources in JSON format.
`loading`	`lazy`	`eager`	To avoid lazy loading background images for the first visible viewport but still use other features of this component, add the `loading="eager"` parameter.
`margin`	String	`50%`	The margin is added to the viewport's bounding box, before computing an intersection with the image. The value must be in `px` or `%` units.
`target`	String	`false`	A list of targets whose bounding boxes will be used to compute an intersection with the image. Defaults to the image itself.

dataSrc is the Primary option, and its key may be omitted if it's the only option in the attribute value.

JavaScript

Learn more about JavaScript components.

Initialization

UniCore.img(element, options);

The Image component keeps records of already loaded images in the Session Storage. That's how it tries to determine if an image is already cached. A cached image is loaded immediately, without the lazy loading mechanism to prevent any rendering flashes. Prior to testing the Image component, make sure to clear these records from your browser's Session Storage.

Magic Cursor

A creative, aesthetic Magic Cursor effects for your creative website.

Recently, customizations have begun to appear at the mouse pointer level to add an aesthetic and creative effect to the site.

Of course, we have taken into consediration the addition of this feature as an in-house component to facilitate its use only through data-uc-cursor.

Below you will find how it works and all the options and settings you can implement.

By default, the cursor initiated on our framework and good to go just enable it by removing the disable-cursor class from body tag.

Usage

Any of these options can be applied to the component attribute. Separate multiple options with a space and also these options are CSS classes or Selectors.

To apply this component, add the data-uc-cursor attribute to an element you want the cursor to interact with!

Hover to see how it interact!

<element data-uc-cursor> ... </element>

By default when you added data-uc-cursor attribute the cursor start to interact with that element, but, we made some built-in options to customize it more and below you will find out how!

This component attribute can accept multiple css classes by bootstrap or our exclusive built-in classes as well to customize it as you want.

The main cursor will inherit any classes you add on data-uc-cursor attribute.

Size

You can customize the cursor size by adding xs, sm, md, lg classes as an option.

X Small

Small

Medium

Large

X Large

Color

You can customize the cursor color by adding text-{color} and it will inherit that color as it's background.

Primary

Secondary

Success

Danger

<element data-uc-cursor="text-primary"> ... </element>

Text

You can add your custom text to the cursor by adding data-uc-cursor-text attribute on the same element or any child element and write your custom text just inside the text attribute.

<!-- On the same element that has "data-uc-cursor" -->
<element data-uc-cursor="" data-uc-cursor-text="Your text"> ... </element>

<!-- On the child level works too -->
<element data-uc-cursor="">
    <element data-uc-cursor-text="Your text"></element>
</element>

Icon

You can add your custom icon to the cursor by adding data-uc-cursor-icon attribute on the same element or any child element and write your custom icon class just inside the attribute.

Move

Scroll down

Zoom in

<!-- On the same element that has "data-uc-cursor" -->
<element data-uc-cursor="" data-uc-cursor-icon="unicon-move icon-4"> ... </element>

<!-- On the child level works too -->
<element data-uc-cursor="">
    <element data-uc-cursor-icon="unicon-search icon-3"></element>
</element>

You can use our integrated icons library Unicons or any icon library that only works via CSS classes, as well as, you can resize icons using our icon size instructions.

Stick effect

Stick is a great effect for your links, buttons and any UI element, this will add a creative touch to your UI/UX design and here is how it works by adding data-uc-cursor-stick attribute on the same element that have main attribute and accepts CSS selectors like .elem class, #elem ID and > * child selectors.

Let's find out how it works.

You just need to hover on the image and the button below to see it sticked!

Get started

<!-- ID selector -->
<element data-uc-cursor="" data-uc-cursor-stick="#element-stick">
    <childElement id="element-stick"> ... </childElement>
</element>

<!-- Class selector -->
<element data-uc-cursor="" data-uc-cursor-stick=".element-stick">
    <childElement class="element-stick"> ... </childElement>
</element>

<!-- Child node/tag selector -->
<element data-uc-cursor="" data-uc-cursor-stick="childElement">
    <childElement> ... </childElement>
</element>

The Stick effect accpets only one selector to make the cursor stick on it!

Magnetic effect

Magnetic, the same as Stick effect both are too way great effects to add a creative touch to your UI/UX design and here is how it works by adding data-uc-magnetic attribute on the element that you want this effect works on.

<!-- On element to be magneted -->
<element data-uc-cursor="opaque">
    <childElement data-uc-magnetic> ... </childElement>
</element>

<!-- Only one selector by class to be magneted -->
<element data-uc-cursor="opaque" data-uc-magnetic=".magnetic-element">
    <childElement class="magnetic-element"> ... </childElement>
    <childElement> ... </childElement>
</element>

<!-- Select all the child elements to be magneted -->
<element data-uc-cursor="opaque" data-uc-magnetic="*">
    <childElement> ... </childElement>
    <childElement> ... </childElement>
    <childElement> ... </childElement>
</element>

The Magnetic effect accpets one or multi-child selectors to make the cursor magnet on it!

Playground

As these effects are great now we will combine them to achive a creative fusion and here is how it works.

Sticked Social Icons:

<ul data-uc-cursor="md" data-uc-cursor-stick="*">
    <li data-uc-cursor="text-dark" data-uc-cursor-icon="unicon-logo-github icon-3">
        <a href="#"><i class="icon-3 unicon-logo-github"></i></a>
    </li>
    <li data-uc-cursor="text-blue" data-uc-cursor-icon="unicon-logo-twitter icon-3">
        <a href="#"><i class="icon-3 unicon-logo-twitter"></i></a>
    </li>
    <li data-uc-cursor="text-secondary" data-uc-cursor-icon="unicon-logo-instagram icon-3">
        <a href="#"><i class="icon-3 unicon-logo-instagram"></i></a>
    </li>
</ul>

Creative Link:

Scroll to

<a  href="#link" 
    data-uc-cursor="md text-secondary-200 inverse-text fw-bold" 
    data-uc-cursor-text="TOP" 
    data-uc-cursor-stick="i" 
    data-uc-magnetic="i">
    <span>Scroll to</span>
    <i class="unicon-arrow-up"></i>
</a>

Magnetic Gallery:

<div class="row g-5 child-cols-3" data-uc-magnetic="**" data-uc-cursor-stick=".stick-element">
    <div>
        <div class="ratio ratio-1x1 rounded-2 overflow-hidden"
             data-uc-cursor="sm text-white inverse-text shadow-sm"
             data-uc-cursor-icon="unicon-add icon-3">
            <img src=" ... " alt="Image alt" data-uc-img>
            <div class="stick-element position-absolute top-50 start-50 translate-middle d-inline-flex justify-center items-center">
                <a class="position-cover" href="#link"></a>
            </div>
        </div>
    </div>
    ...
</div>

Slider + Stick controls:

<div class="swiper" data-swiper="items: 1; prev: .swiper-nav-prev; next: .swiper-nav-next;">
    <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" data-uc-cursor="xs text-white inverse-text" data-uc-cursor-stick=">*"></div>

    <!-- Add Arrows -->
    <div class="swiper-nav swiper-nav-prev position-absolute top-0 start-0 bottom-0 z-1 w-1/2" data-uc-cursor="lg transparent difference" data-uc-cursor-icon="unicon-arrow-left icon-5"></div>
    <div class="swiper-nav swiper-nav-next position-absolute top-0 end-0 bottom-0 z-1 w-1/2" data-uc-cursor="lg transparent difference" data-uc-cursor-icon="unicon-arrow-right icon-5"></div>
</div>

Options

Any of these options or classes can be applied to the component attribute. Separate multiple options or classes with a space.

[data-uc-cursor]

Class	Value	Description
`opaque`, `exclusion`, `difference`	Mode	Exclusion or opaque or difference are modes to invert the cursor color. For ex `[data-uc-cursor="difference"]`.
`xs`, `sm`, `md`, `lg`, `xl`	Size	Set a size to your cursor via this classes. For ex `[data-uc-cursor="lg"]`.
`text-{*}`	Color	You can set a background color to your cursor via all Bootstrap text coloring classes. For ex `[data-uc-cursor="text-primary"]`.
`opacity-{*}`	Opacity	You can control the transparency of your cursor via all our extended Bootstrap Opacity classes. For ex `[data-uc-cursor="opacity-25"]`.
`transparent`	Transparent background	You can make the cursor background transparent by using this class. For ex `[data-uc-cursor="transparent"]`.
`inverse-text`	Color Invert	By default, the text color is white and by using this class will invert it to black. This feature works only when you set a `[data-uc-cursor-text]` or `[data-uc-cursor-icon]`. For ex `[data-uc-cursor="inverse-text"]`.
`fw-bold`, `fw-light`	Font Weight	You can control the font-weight of your cursor text via Bootstrap font-weight classes. For ex `[data-uc-cursor="fw-bold"]`.

[data-uc-cursor-text]

Option	Value	Description
`Your_Text`	Text/HTML	This data attribute accepts only Text or HTML content. For ex `[data-uc-cursor-text="Hello World!"]`.

[data-uc-cursor-icon]

Option	Value	Description
`unicon-{*}`	Icon class	You can set an icon from our Icon Library or set your custom icon class. For ex `[data-uc-cursor-icon="unicon-search"]`.
`icon-{*}`	Icon size	You can customize the icon size using our icon sizing instructions that start from `1` to `6`. For ex `[data-uc-cursor-icon="unicon-search icon-4"]`.

[data-uc-cursor-stick]

Option	Value	Description
`.class`, `#id`, `>*` or `tag`	CSS Selector	This data attribute accepts only CSS selectors and can work only for one selected element. For ex `[data-uc-cursor-stick=".stick-element"]` and add `stick-element` class to only one element that you want the cursor to stick on it.

[data-uc-magnetic]

Option	Value	Description
`.class`, `#id`, `>*` or `tag`	CSS Selector	This data attribute accepts only CSS selectors and can work for one or multiple selected elements. For ex `[data-uc-magnetic]` or `[data-uc-magnetic=".element"]` and add `element` class to any element(s) that you want the cursor to interact with magnet.

JavaScript

Learn more about JavaScript components.

Cursor Initialization

const yourCursor = new UCCursor(options);

Cursor Options

Option	Value	Default	Description
`container`	string	body	The cursor will fly only on the boundaries of selected container. Can accept multi selectors.
`speed`	number	0.7	Cursor speed when following the mouse pointer. Value on seconds.
`visibleTimeout`	number	300	The cursor will appear after the timout you set. Value on milliseconds.
`ease`	string	"expo.out"	Cursor easing.
`stickForce`	number	0	Cursor stick effect force. Value on seconds.
`stickMagneticForce`	number	0.3	Cursor stick and magnetic force. Value on seconds.

Magnetic Initialization

$("[data-uc-magnetic]").each(function () {
    const $elements = this.dataset.ucMagnetic ? $(this).find(this.dataset.ucMagnetic) : $(this);
    $elements.each(function () {
        new UCMagnetic(this, yourCursor);
    });
});

Magnetic Options

Option	Value	Default	Description
`x`	number	0.4	Magnetic ratio for x-axis.
`y`	number	0.4	Magnetic ratio for y-axis.
`s`	number	0.3	Magnetic speed when mouse enter the element.
`rs`	number	0.5	Magnetic return speed when mouse leave the element.

Marquee Text

A creative, aesthetic Marquee text effects for your creative website.

With this component you can create a marquee text effect for your headlines, texts and even paragraphs, It is just a way to display texts in a creative and modern way, in sync with what is trend now, let's see how it works.

Usage

To apply this effect you need only to add the data-uc-marquee attribute to that element. but, you need to have an inner <div> element then the element you want effects to work on it.

<div data-uc-marquee> <!-- The parent element where the attribute should be! -->
    <div> <!-- This is the inner div which is required! -->
        <element> ... </element> <!-- The element that the effect will applied on! -->
    </div>
</div>

This is an example of how it works and how the html structure should be.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

<div data-uc-marquee>
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Clone

If you have a less content or a small sized content you may have to add a clone option to that element data attribute. true equal clone one more time but you can set a number as many as clone times you may need.

<!-- Clone your content one time -->
<div data-uc-marquee="clone: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

<!-- Clone your content 3 times -->
<div data-uc-marquee="clone: 3;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Pause on hover

You can give the user the ability to pause the animation when mouse enter the marquee text by adding hover: true; option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

<div data-uc-marquee="hover: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Reverse

You can reverse the marquee text direction by adding reverse: true; option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

<div data-uc-marquee="reverse: true;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Speed

You can change the speed to the marquee text by adding speed: {1 to n}; option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

<div data-uc-marquee="speed: 50;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Gap

You can set a gap to the marquee text to create a space between the cloned content by adding gap: {1 to n}; option to that element data attribute.

Unicore is a full featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system

<div data-uc-marquee="clone: 2; gap: 20;">
    <div>
        <div> Your marquee text </div>
    </div>
</div>

Playground

This is an example of a multiple marquee text effect.

✦ Creative ✦ Solid ✦ Modern ✦ Trendy ✦ Minimal

<div class="vstack gap-2 justify-center">
    <div class="h3 text-lowercase bg-secondary-200 py-2" data-uc-marquee="clone: 3; gap: 40;"  style="transform: translateY(50%) rotate(5deg);">
        <div>
            <div class="hstack" style="gap: var(--gap);">
                <span>✦</span>
                <span>Creative</span>
                <span>✦</span>
                <span>Solid</span>
                <span>✦</span>
                <span>Modern</span>
                <span>✦</span>
                <span>Trendy</span>
                <span>✦</span>
                <span>Minimal</span>
            </div>
        </div>
    </div>
    <div class="h3 text-lowercase bg-lime-200 py-2" data-uc-marquee="clone: 3; gap: 40; reverse: true;"  style="transform: translateY(-50%) rotate(-5deg);">
        <div>
            <div class="hstack" style="gap: var(--gap);">
                <span>✦</span>
                <span>Creative</span>
                <span>✦</span>
                <span>Solid</span>
                <span>✦</span>
                <span>Modern</span>
                <span>✦</span>
                <span>Trendy</span>
                <span>✦</span>
                <span>Minimal</span>
            </div>
        </div>
    </div>
</div>

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option	Value	Default	Description
`clone`	`boolean` `number`	`false`	To clone your content as many times as you set.
`hover`	`boolean`	`false`	Set it to `true` to pause the animation on hover.
`reverse`	`boolean`	`false`	Set it to `true` to reverse the animation.
`speed`	`number`	`30`	Animation speed on `s` (seconds).
`gap`	`number`	`16`	The gap between your cloned content on `px` (pixels).

Modal

Create Modal dialogs with different styles and transitions.

Usage

The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the data-uc-toggle attribute. An <a> element needs to be linked to the modal's id. If you are using another element, like a button, just add the data-uc-toggle="target: #ID" attribute to target the id of the modal container.

Add the data-uc-modal attribute to a <div> element to create the modal container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling. Use the following classes to define the modal's sections.

<!-- This is a button toggling the modal -->
<button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

<!-- This is the modal -->
<div id="modal-id" data-uc-modal>
    <div class="uc-modal-dialog p-3">
        <button class="uc-modal-close-default" type="button">Close</button>
        <h2 class="h4">Modal heading</h2>
        <p> ... </p>
    </div>
</div>

Header and footer

To divide the modal into different content sections use panel, padding p-{*} and border-{*}.

<!-- This is a button toggling the modal -->
<button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button>

<!-- This is the modal -->
<div id="modal-id" data-uc-modal>
    <div class="uc-modal-dialog p-3">
        <button class="uc-modal-close-default" type="button">Close</button>

        <!-- The modal header -->
        <div class="panel p-3 border-bottom">
            <h2 class="h4">Modal heading</h2>
        </div>

        <!-- The modal body -->
        <div class="panel p-3">
            <p> ... </p>
        </div>

        <!-- The modal footer -->
        <div class="panel p-3 border-top">
            ...
        </div>
    </div>
</div>

Full modifier

To create a modal, that fills the entire page, add the uc-modal-full class. It is also recommended adding the .uc-modal-close-full class to the close button, so that it adapts its styling.

<div class="uc-modal-full" data-uc-modal>
    <div class="uc-modal-dialog">
        <button class="uc-modal-close-full" type="button">Close</button>
        ...
    </div>
</div>

Close behavior

To create a close button, enable its functionality and add proper styling and positioning using one of the classes below.

Class	Description
`uc-modal-close-default`	Add this class to your `<button>` or `<a>` to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right of the modal dialog but still inside.
`uc-modal-close-outside`	Add this class to your `<button>` or `<a>` to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right but outside of the modal dialog.
`uc-modal-close-full`	Add this class to your `<button>` or `<a>` to add a close modal behavior, this class works well with full modal.
`uc-modal-close`	Add this class to your `<button>` or `<a>` to add a close modal behavior only.

Nav

A custom navigation built with flexbox and provide a strong foundation for building all types of navigation components.

Vertical

Use .nav-y for vertical (y-axis) navigation, you can add .hr on <li> element as an horizontal separator.

<ul class="nav-y">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li class="hr"></li>
    <li><a href="#">Nav item</a></li>
</ul>

Horiztonal

Use .nav-x for horizontal (x-axis) navigation, you can add .vr on <li> element as a vertical separator.

<ul class="nav-x">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li class="vr"></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
</ul>

Spacing

You can customize the navigation spacing by using .gap-* to create a gap/space between nav items it works for the both directions.

<ul class="nav-x gap-6">
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
    <li><a href="#">Nav item</a></li>
</ul>

Nav + icon

You can add icons to your navigation, and they will fit seamlessly into place.

<ul class="nav-y">
    <li><a href="#"><i class="unicon-store"></i>Dashboard</a></li>
    <li><a href="#"><i class="unicon-view-next"></i>Purchase history</a></li>
    <li><a href="#"><i class="unicon-enterprise"></i>Billing address</a></li>
    <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i>Edit profile</a></li>
    <li class="hr"></li>
    <li><a class="text-danger" href="#"><i class="unicon-power"></i>Log out</a></li>
</ul>

<ul class="nav-x gap-6">
    <li><a href="#"><i class="unicon-home"></i>Home</a></li>
    <li><a href="#"><i class="unicon-star"></i>Services</a></li>
    <li><a href="#"><i class="unicon-document"></i>Blog</a></li>
    <li><a href="#"><i class="unicon-send-alt"></i>Contact us</a></li>
</ul>

RTL support

By default the navigation component support RTL languages for example use dir="rtl" attribute to see it in action.

<ul class="nav-y" dir="rtl">
    <li><a href="#"><i class="unicon-store"></i> لوحة التحكم </a></li>
    <li><a href="#"><i class="unicon-view-next"></i> المشتريات </a></li>
    <li><a href="#"><i class="unicon-enterprise"></i> تعديل العناوين </a></li>
    <li><a href="#"><i class="unicon-user-avatar-filled-alt"></i> تعديل الملف الشخصي </a></li>
    <li class="hr"></li>
    <li><a href="#"><i class="unicon-power"></i> تسجيل الخروج </a></li>
</ul>

<ul class="nav-x gap-6" dir="rtl">
    <li><a href="#"><i class="unicon-home"></i> الرئيسية </a></li>
    <li><a href="#"><i class="unicon-star"></i> الخدمات </a></li>
    <li><a href="#"><i class="unicon-document"></i> مقالات </a></li>
    <li><a href="#"><i class="unicon-send-alt"></i> >إتصل بنـا </a></li>
</ul>

Navbar

A custom navigation bar built with flexbox and provide a strong foundation for building all types of navigation components.

Navbar menu + multi-level

Add .navbar-menu class on <ul> child element of <element class="navbar"> parent to initiate a built-in multi-level navbar.

<nav class="navbar">
    <ul class="navbar-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Branding</a></li>
                <li><a href="#">Design</a>
                    <ul>
                        <li><a href="#">Graphic</a></li>
                        <li><a href="#">Web</a></li>
                        <li><a href="#">Mobile</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Navbar menu + spacing

You can customize the navigation spacing by adding .gap-* next to .navbar-menu class to customize a gap/space between nav items.

<nav class="navbar">
    <ul class="navbar-menu gap-5">
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Navbar menu + icon

You can add Icons or UTF-8 symbols for the parents of multi-levels on your navigation, you only need to add a css variable on a style attribute for ex style="--bs-nav-icon: '\e93f'" alongside to navbar class.

<nav class="navbar" style="--bs-nav-icon: '\e93f'">
    <ul class="navbar-menu has-childs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Elements</a></li>
                <li><a href="#">JS Plugins</a></li>
                <li><a href="#">Page Builder</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

RTL support

By default the navigation component support RTL languages for example use dir="rtl" attribute to see it in action.

<nav class="navbar" dir="rtl">
    <ul class="navbar-menu has-childs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Elements</a></li>
                <li><a href="#">JS Plugins</a></li>
                <li><a href="#">Page Builder</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Preloader

Included but not documented yet, coming soon.

Sticky

Make elements remain at the top of the viewport, like a sticky navigation, sidebars and content.

Usage

To create an element that remains at the top of the viewport when scrolling down the site,
add the data-uc-sticky attribute to that element.

Stick to the top

<div data-uc-sticky>Stick to the top</div>

Position

By default, the element sticks to the top of the viewport. You can set the position: bottom option to stick it to the bottom of the viewport.

Stick to the bottom

<div data-uc-sticky="position: bottom">Stick to the bottom</div>

Start

Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
The default value of 0 means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.

100px

10vh

100%

Selector

<!-- Sticks after 100px scrolling -->
<div data-uc-sticky="start: 100;"></div>

<!-- Sticks after 10vh scrolling -->
<div data-uc-sticky="start: 10vh;"></div>

<!-- Sticks after scrolling the elements height -->
<div data-uc-sticky="start: 100%;"></div>

<!-- Sticks after the top of the selected element -->
<div data-uc-sticky="start: #selector;"></div>

End

End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
A value of 0 means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to 0. A CSS Selector will set the end to the selected element's bottom and the element's bottom border.
false will make the element stick until the end of the page.
true selects the parent element.

100px

10vh

100%

Selector

<!-- Sticks until 100px scrolling -->
<div data-uc-sticky="end: 100;"></div>

<!-- Sticks until 10vh scrolling -->
<div data-uc-sticky="end: 10vh;"></div>

<!-- Sticks until scrolling the elements height -->
<div data-uc-sticky="end: 100%;"></div>

<!-- Sticks until the bottom of the selected element -->
<div data-uc-sticky="end: #selector;"></div>

<!-- Sticks until the bottom of its parent container -->
<div data-uc-sticky="end: true;"></div>

Offset

To set an offset to the viewport's edge when the element is sticky, add the offset option. The value can be in vh, % and px. It supports basic mathematics operands + and -.

Stick 150px below the top

<div data-uc-sticky="offset: 150">Stick 150px below the top</div>

Show on up

You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience.

Slide in on scroll up

<div data-uc-sticky="show-on-up: true">Slide in on scroll up</div>

Animation

Add an animation from the Animation component in order to have the sticky element reappear smoothly if a start offset is set.

Animation Slide Top

<div data-uc-sticky="animation: uc-animation-slide-top;">Animation Slide Top</div>

Overflow flip

The overflow-flip option disables the sticky behavior for oversized content. Instead, it only flips the sticky position if the element is larger than the viewport. Changing the scroll direction will not affect the sticky position. Together with the start and end options, two nice sticky effects can be achieved. Cover an element by following content or reveal it by previous content.

overflow-flip: true
end: 100%

Cover previous section.
Reveal next section.

position: bottom
overflow-flip: true
start: -100%
end: 0

<!-- Section will be covered by the next section -->
<div data-uc-sticky="overflow-flip: true; end: 100%;"></div>

<div>A section the will cover previous section and reveal next section.</div>

<!-- Section will be revealed by the previous section -->
<div data-uc-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0;"></div>

Oversized content

Sticky content that is larger than the viewport will scroll down and stick to the bottom of the viewport. Changing the scroll direction will immediately scroll the sticky content up and change the sticky behavior to stick to the top of the viewport. Scrolling down will change the behavior again.

Oversized content...

Stick until content end.

<div class="row">
    <div class="col-8">
        <div>Oversized content...</div>
    </div>
    <div class="col-4">
        <div data-uc-sticky="end: true;">Stick until content end.</div>
    </div>
</div>

Responsive

It's possible to disable the sticky behavior for different device widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixel, for example media: 640, or a breakpoint, for example media: @m. The element will be sticky from the specified viewport width and upwards, but not below.

Only be sticky on viewports larger than 640px.

<div data-uc-sticky="media: 640">Only be sticky on viewports larger than 640px.</div>

Resize the screen to see it in action.

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option	Value	Default	Description
`position`	`top` `bottom`	`top`	The position the element should be stuck to.
`Start`	Length, CSS Selector	`0`	Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of `0` means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.
`End`	Length, CSS Selector, Boolean	`false`	End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of `0` means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to `0`. A CSS Selector will set the end to the selected element's bottom and the element's bottom border. `false` will make the element stick until the end of the page. `true` selects the parent element.
`offset`	Length	`0`	The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -.
`overflow-flip`	Boolean	`false`	Flip the Sticky's position option if the element overflows the viewport and disable overflow scrolling.
`animation`	String	`false`	The animation to use when the element becomes sticky.
`cls-active`	String	`uc-active`	The active class.
`cls-inactive`	String	`''`	The inactive class.
`show-on-up`	Boolean	`false`	Only show sticky element when scrolling up.
`media`	Number, String	`null`	Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).
`target-offset`	`false`, Length	`false`	Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. `false` will disable this behavior.

JavaScript

Learn more about JavaScript components.

Initialization

UniCore.sticky(element, options);

Events

The following events will be triggered on elements with this component attached:

Name	Description
`active`	Fires after the element becomes sticky.
`inactive`	Fires after the element is no longer sticky.

SVG

Inject inline SVG images into the page markup and style them with CSS.

SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.

Usage

To apply this component, add the data-uc-svg attribute to an <img> element.

Using the data-uc-svg attribute also allows you to inject a symbol from the SVG file. Just append the symbol's ID to the image path as you would in any fragmented URL.

Injected SVG

Injected SVG + Preserve

<img class="text-dark dark:text-white" src="{image.svg}" alt="..." data-uc-svg />

Using the data-uc-svg attribute also allows you to inject a symbol from the SVG file. Just append the symbol's ID to the image path as you would in any fragmented URL.

SVGs will adapt the current color for their stroke and fill color.
To prevent this behavior, add the .uc-preserve class to the SVG itself or the elements inside the SVG.

The loading="lazy" attribute for <img> elements is taken into account, and SVG images will be injected as inline SVG as they enter the viewport.

Stroke Animation

There are two ways to animate SVG strokes.
First by using the Animations component and data-uc-svg="stroke-animation: true", and second by using the Parallax component.

Options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.

Option	Value	Default	Description
`src`	String	`''`	The SVG source URL. If a location hash is present, only the `<symbol>` of the SVG with the given ID is shown.
`stroke-animation`	Boolean	`false`	Animate all elements with the `<stroke>` attribute in the SVG.

JavaScript

Learn more about JavaScript components.

Initialization

UniCore.svg(element, options);

Properties

UniCore.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })

A JavaScript Promise that will resolve with the added SVG Node.

Tab

Included but not documented yet, coming soon.

AnimeJS

A collection of smooth animations to use within your page via Anime.js library.

We used Anime.js library for animations, is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Usage

We made it easy to deal with Anime.js and even easy to implement just by using data attributes instead of initiating animations via javascript code.

To configure Anime.js, use the data-anime attribute and thier options or our built-in options below.

Click me to animate!

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

Options

These are our built-in options to target, trigger or initiate the animations.

Option	Value	Default	Description
`targets`	`string`	`""`	Target child elements by class or ID or any css selector for ex: `targets: > *`.
`onclick`	`boolean` `string`	`false`	Start animation when element clicked. You can set it to `true` or use `alternate` or `restart`.
`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 out all the options and functions on their documentation.

ScrollMagic

Animate CSS properties depending on the scroll position of the document.

We combined between Anime.js and ScrollMagic to acheive the Onscroll Effect. Now you can easly fire animatin on scroll with a powerful controll for your animations using anime.js options.

Usage

To apply this component, add the onscroll:'{trigger-element}' option to the data-anime attribute to apply the onscroll effect.

I'm a onscroll element, say hi :)

<div class="parent-scene">
    <p data-anime="onscroll: .parent-scene; translateX: 240; opacity: [0, 1]" ></p>
</div>

Options

We have made some most used built-in options from ScrollMagic default ones.

Option	Value	Default	Description
`onscroll`	`boolean` `string`	`null` `'.css-selector'`	Enable/Disable "on-scroll" effect or enable it with a trigger element which is a selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).
`onscroll-trigger`	`number`	`1`	When animation fires, default: bottom. `0 = top`, `0.5 = middle`, `1 = bottom`
`onscroll-duration`	`number` `string` `function`	`100%`	The duration of the scene.
`onscroll-offset`	`number`	`0`	Offset trigger position by px.
`onscroll-reverse`	`boolean`	`true`	Should the scene reverse, when scrolling up?

You can find out all the options and functions on their documentation.

Swiper 8

We made it easy to deal with Swiper 8 slider and even easy to implement with responsive on different screens using breakpoints.

Usage

To setup Swiper 8, use the data-uc-swiper attribute and use our 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>

Options

These are our built-in and most used options to configure and customize your swiper slider 8.

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`	`.swiper-disabled`	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.

You can find out all the options and functions on their documenation.

SplitType

Changes the html structure of the target elements, wrapping each line, word, and/or character in a element.

We include SplitType.js is a small javascript library that splits HTML text into elements so that lines, words, and characters can be animated independently. And can be used with any animation library.

Usage

To configure SplitType.js, use the data-uc-splitext attribute and it's options.

I'm a splited text

<h3 class="h1" data-uc-splitext="types: 'chars'">I'm a splited text</h3>

To see the results of the splited text see it via inspect elements.

SplitType with anime.js

Now it's time to take advantage of SplitType and use Anime.js plugin to create good and smooth (60FPS) animations.

I'm a splited animated text

<h3 class="h1" data-uc-splitext="types: 'chars'" data-anime="translateY: [-80, 0]; translateX: 80; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true; targets: > *;">Hello World!</h3>

Options

These are the most used options to configure and customize your splited text.

Option	Value	Default	Description
`types`	`string`	`"lines, words, chars"`	Comma separated list of types.
`absolute`	`boolean`	`false`	If true, absolute position will be used for split text nodes.
`tagName`	`string`	`"div"`	The HTML tag that will be used for split text nodes.

You can find out all the options and functions on their documentation.

TiltJS

Included but not documented yet, coming soon.

TypedJS

Add typing effect to your sentences.

An integrated lightweight Javascript library called Typed.js, It give you the ability to types out sentences and then delete them.

Usage

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

We are a digital studio! agency! creative!

<h3 class="h1">
    We are a digital 
    <span class="text-gray" data-uc-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: true; loop: true;">
        <span>studio!</span>
        <span>agency!</span>
        <span>creative!</span>
    </span>
</h3>

Options

These are the most used options to configure and customize how sentences should be typed.

Option	Value	Default	Description
`typeSpeed`	`number`	`80`	Type speed in milliseconds.
`backSpeed`	`number`	`50`	Backspacing speed in milliseconds.
`backDelay`	`number`	`1500`	Time before backspacing in milliseconds.
`shuffle`	`boolean`	`false`	Shuffle the strings.
`loop`	`boolean` `number`	`false`	Loop strings or set the amount of loops.

You can find out all the options and functions on their documentation.

Browse templates

There are thousands of templates out there to choose from,
but none quite like ours.

Nerko

Metaverse & NFT Portfolio
Onepage Template

83 Sales $29

Dannel

Minimal Personal Portfolio
Onepage Template

59 Sales $20

Renox

Complete NFT Marketplace
Multi-pages Template

8 Sales $20

Gentium

Creative Digital Agency
Onepage Template

707 Sales $29

Indigo

Creative Personal Portfolio
Onepage Template

0 Sales Soon

Sora

Aesthetic & Personal
Blogging Template

0 Sales Soon

Browse all templates

References

UniCore uses the following open source resources:

Name	Link	Version
Node.js	https://www.npmjs.com/	`14.16.0`
Gulp	https://gulpjs.com/	`4.0.2`
Bootstrap 5	https://getbootstrap.com/	`5.2.3`
UIkit 3 (JS Components ONLY)	https://getuikit.com/	`3.15.20`
Swiper 8	https://swiperjs.com/	`8.4.5`
Anime.js	https://animejs.com/	`3.2.1`
ScrollMagic	https://scrollmagic.io/	`2.0.7`
SplitType.js	https://github.com/lukePeavey/SplitType	`0.3.3`
Typed.js	https://github.com/mattboldt/typed.js	`2.0.12`

UniCore Changelog

1.2.8 (Beta) — Feb 06, 2023

Added

New in-house component "Marquee" using data-uc-marquee attribute with useful options for making creative marquee text effect.
Added

New advanced and flexible Gradient utility.
Changed

Improve performance and code quality.
Changed

Clean and re-organize some files.
Changed

Major improvments on the UI.
Fixed

Data attribute helper.
Fixed

Some minor bugs and issues.

1.2.7 (Beta) — Feb 03, 2023

Added

Button sizes 2xs and 2xl.
Added

Percentage and progress preloader.
Added

New creative built-in animations for buttons and links.
Changed

Minor improvments on the UI.
Fixed

Dynamic background works perfectly even after page reload and now support active state background and text color.
Fixed

Some minor issues.
Removed

Padding from .btn class and replaced with height property.

1.2.6 (Beta) — Feb 02, 2023

Added

Dynamic background on scroll for sections.
Added

Shortcuts classes for Flexbox.
Added

We've extended shadow utility by adding a contrast shadow.
Changed

Re-organize some libraries and other files.
Changed

Major improvments on the UI.
Fixed

Some minor issues.

1.2.5 (Beta) — Feb 01, 2023

Added

We've extended Flexbox utility.
Added

We've extended Blur utility.

1.2.4 (Beta) — Jan 30, 2023

Added

We extend background, text and border opacity.
Added

We added responsive utility to Button component.
Changed

Darkmode class from uni-dark to uc-dark.
Changed

Major improvments on the UI.
Fixed

make-responsive() mixin to also support TailwindCSS's responsive syntax.
Removed

We removed padding from .section class as you can use padding spacing utility classes.

1.2.1 (Beta) — Jan 23, 2023

Added

Magic Cursor component.
Changed

Major improvments on the UI.

1.1.0 (Beta) — Jan 01, 2023

Added

Display, visibility and hidden are now support hover state.
Changed

Width and Height utilities.
Fixed

ReactJS compatiblity issues.

1.0.0 (Beta) — Dec 15, 2022

Initial

Initial release.

UniCore, based on Bootstrap 5 with the flavor of TailwindCSS and the power of UIkit 3

UniCore based on

What makes UniCore the best out there?

Let's getting started

Quick Installation

Extended Utility Classes

In-house Components

3rd-Party Plugins

Hand-picked templates based on UniCore

Dannel

Nerko

Renox

On this page:

Getting started

Install & Check Tools

Node.js and NPM

Git

Install UniCore

Development

Production

On this page:

Customization

Colors

Typography

Sizing

Spacing

Grid gutters

On this page:

JavaScript

Component usage

Component configuration

Programmatic use

On this page:

Colors

Usage

Primary colors

W/B

White

Black

Gray

Slate

Primary

Secondary

Success

Info

Warning

Danger

Secondary colors

Blue

Indigo

Purple

Pink

Rose

Red

Orange

Yellow

Lime

Green

Teal

Cyan

On this page:

Typography

Headings

Displays

Text font size

Text font styles

On this page:

Layout

Containers

Flexbox Grid

Child columns usage:

Child columns + custom column width

Child columns + responsive:

Columns match height:

Grid Separators:

Masonry Grid

CSS Grid

Child columns usage:

Grid row/column span usage:

Playground: