Foundations
colors typography layout icons Dark Mode responsive utilitiesComponents
accordion alert animation button carousel form image Magic cursor Marquee text modal nav navbar preloader sticky SVG tabPlugins
AnimeJS ScrollMagic Swiper 8 SplitType TiltJS TypedJSOther
templates references changelog 1.2.8 Beta
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
What makes UniCore the best out there?
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
On this page:
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
On this page:
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,
)
)
)
On this page:
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');
On this page:
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
#FFFFFFBlack
#000000Gray
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
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>
On this page:
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
ExtendedContainers 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
ExtendedExtended 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 Reminder: This feature is way different than |
.col-match |
false |
Where you can make all columns match in height added this class just next to "row" class, for ex. |
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-12sm:child-cols-6md: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-4sep-y"data-uc-grid> <div>Col 1</div> <div>Col 2</div> <div>Col 3</div> </div> <div class="row child-cols-12 gy-4sep-x"data-uc-grid> <div>Col 1</div> <div>Col 2</div> <div>Col 3</div> </div> <div class="row child-cols-4 g-4sep"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-inIf 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
ExtendedExtended 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. |
.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-start-{n}, .g-col-end-{n}
|
true |
Use the 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. |
.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 |
.g-row-start-{n}, .g-row-end-{n}
|
true |
Use the 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
ExtendedGutters 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.
On this page:
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.
On this page:
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.
On this page:
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):
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>
On this page:
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
ExtendedBootstrap 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
ExtendedUtilities 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
ExtendedUtilities 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
ExtendedUse 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
ExtendedWe've extended the border radius property on the border utility, and it now supports responsive breakpoints and hover state.
(0px)
(4px)
(8px)
(16px)
(24px)
(32px)
(40px)
(48px)
(56px)
(64px)
(50rem)
(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-0sm:rounded-4md: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
ExtendedUtility for controlling the placement of positioned elements.
Included but not documented yet, coming soon.
Gradient
Built-inUtility for adding gradient effect to your elements.
Included but not documented yet, coming soon.
Text
ExtendedUtility for styling your content, headings and text elements.
Included but not documented yet, coming soon.
Stacks
ExtendedShorthand 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-groupvstackhstack-smgap-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-groupvstacksm:hstackgap-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-inCreate 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-inCreate 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%); |
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); |
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
ExtendedThe 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