unicore-logo

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.

UniCore based on

bootstrap-logo
Bootstrap 5.2.3 Feature-packed toolkit
tailwind-logo
TailwindCSS 3.2+ Utility-first CSS framework
uikit-logo
UIkit 3.15.20 JS only but still powerfull
bootstrap-logo
Anime.js 3.2.1 Lightweight animation library
swiper-logo
Swiper 8.4+ Modern mobile touch slider
jquery-logo
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.

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.

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.

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.

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

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

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,
        )
    )
)

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');

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
#FFFFFF
Black
#000000

Gray

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Slate

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Primary

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Secondary

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Success

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Info

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Warning

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Danger

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Secondary colors

Blue

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Indigo

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Purple

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Pink

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Rose

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Red

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Orange

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Yellow

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Lime

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Green

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Teal

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
600 #FCFCFD
700 #FCFCFD
800 #FCFCFD
900 #FCFCFD

Cyan

10 #FCFCFD
25 #FCFCFD
50 #FCFCFD
100 #FCFCFD
200 #FCFCFD
300 #FCFCFD
400 #FCFCFD
500 #FCFCFD
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.

Preview 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.

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.

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.

Preview 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):

Modern building architecture
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.

Preview 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:

<!-- 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.

1
<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.

1
<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.

1
<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.

1
2
3
4
<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

Utilities for controlling the placement of positioned elements.

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

Preview 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.

Blend Mode
.opacity-0
Blend Mode
.opacity-5
Blend Mode
.opacity-10
Blend Mode
.opacity-15
Blend Mode
.opacity-20
Blend Mode
.opacity-25
Blend Mode
.opacity-30
Blend Mode
.opacity-35
Blend Mode
.opacity-40
Blend Mode
.opacity-45
Blend Mode
.opacity-50
Blend Mode
.opacity-55
Blend Mode
.opacity-60
Blend Mode
.opacity-65
Blend Mode
.opacity-70
Blend Mode
.opacity-75
Blend Mode
.opacity-80
Blend Mode