Foundations
colors typography layout icons Dark Mode responsive utilitiesComponents
buttons forms image in-house Marquee text in-house Magic cursor in-house modals in-house accordions alerts animations in-house nav in-house navbar carousel sticky in-house SVG in-house tabsPlugins
AnimeJS ScrollMagic Swiper 8 SplitType TypedJSOther
templates references changelog 1.2.8 BetaFull featured, most advanced, powerfull, flexible and easy-to-customize framework with a solid design system, extensive utility classes and custom made in-house components.
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.
Build whatever you want without a single line of CSS/SASS code by just using our low-level utility classes and base 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.
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.
In order to use UniCore framework you need to install tools such as Node.js, NPM and Git on your system.
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
To clone the UniCore repo you need Git installed, check if you have it, by running this command:
git --version
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
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
Runing the following command compiles the production ready assets under the dist
folder.
npm run build
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, ... ), ... ), ... )
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 ) )
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, ) ) )
Customizing the default spacing and all sizing scale for your project.
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, ) ) )
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, ) ) )
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.
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>
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.
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');
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!
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-*
!
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.
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>
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>
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>
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>
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 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. |
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 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. |
<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>
<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>
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.
Before
After
<div class="row child-cols-4 col-match
">
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</div>
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.
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>
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. |
.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. |
<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>
<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-2g-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>
<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 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.
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!
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 |
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.
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.
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-blackuc-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.
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 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>
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!
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>
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.
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 |
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.
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; |
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; |
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; |
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; |
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; |
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; |
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.
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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; |
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>
We've extended the border radius property on the border utility, and it now supports responsive breakpoints and hover state.
<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% -->
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!
We also make it support hover state so you can change the radius size on hover.
<img src="..." class="rounded-circle hover:
rounded" alt="...">
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="...">
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="...">
Utilities for controlling the placement of positioned elements.
Coming soon.
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-groupvstack
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-groupvstack
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>
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 |
Create smooth transitions between two states when hovering an element.
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; |
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; |
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; |
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); |
Create smooth transitions between two states when hovering an element.
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); |
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%); |
-translate-y-6
.
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); |
-rotate-90
.
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; |
The opacity property sets the opacity level for an element. Opacity level describes the transparency level. We extended this utility from only 25, 50, 75, 100
to a step by 5 for a full control 0, 5, n..., 100
.
.opacity-0
.opacity-5
.opacity-10
.opacity-15
.opacity-20
.opacity-25
.opacity-30
.opacity-35
.opacity-40
.opacity-45
.opacity-50
.opacity-55
.opacity-60
.opacity-65
.opacity-70
.opacity-75
.opacity-80
.opacity-85
.opacity-90
.opacity-95
.opacity-100
<div class="opacity-0"></div><!-- opacity: 0; --> <div class="opacity-5"></div><!-- opacity: 0.05; --> <div class="opacity-10"></div><!-- opacity: 0.1; --> <div class="opacity-15"></div><!-- opacity: 0.15; --> <div class="opacity-20"></div><!-- opacity: 0.2; --> <div class="opacity-25"></div><!-- opacity: 0.25; --> <div class="opacity-30"></div><!-- opacity: 0.3; --> <div class="opacity-35"></div><!-- opacity: 0.35; --> <div class="opacity-40"></div><!-- opacity: 0.4; --> <div class="opacity-45"></div><!-- opacity: 0.45; --> <div class="opacity-50"></div><!-- opacity: 0.5; --> <div class="opacity-55"></div><!-- opacity: 0.55; --> <div class="opacity-60"></div><!-- opacity: 0.6; --> <div class="opacity-65"></div><!-- opacity: 0.65; --> <div class="opacity-70"></div><!-- opacity: 0.7; --> <div class="opacity-75"></div><!-- opacity: 0.75; --> <div class="opacity-80"></div><!-- opacity: 0.8; --> <div class="opacity-85"></div><!-- opacity: 0.85; --> <div class="opacity-90"></div><!-- opacity: 0.9; --> <div class="opacity-95"></div><!-- opacity: 0.95; --> <div class="opacity-100"></div><!-- opacity: 1; -->
The extended opacity classes also supports background bg-opacity-{*}
, border border-opacity-{*}
and text text-opacity-{*}
.
<!-- Background opacity: 0.5 --> <div class="bg-primarybg-opacity-50
"> <!-- Border opacity: 0.1 --> <div class="border-primaryborder-opacity-10
"> <!-- Text opacity: 0.65 --> <div class="text-primarytext-opacity-65
">
Anyway, our classes provide only step by 5 values, for a custom opacity you can use css variable --bs-{propery}-opacity
in an inline css <style>
attribute. for example:
<!-- Background opacity: 0.12 --> <div class="bg-primary" style="--bs-bg-opacity: .12;
"> <!-- Border opacity: 0.44 --> <div class="border-primary" style="--bs-border-opacity: .44;
"> <!-- Text opacity: 0.86 --> <div class="text-primary" style="--bs-text-opacity: .86;
">
This utility support darkmode dark:class_name
and hover state hover:class_name
.
Add one of the following classes to apply different Blend Modes to your backgrounds, for example when placing them on images. You can combine these with the Opacity utility.
<div class="bg-primary blend-color"> ... </div> <div class="bg-primary blend-color-burn"> ... </div> <div class="bg-primary blend-color-dodge"> ... </div> <div class="bg-primary blend-darken"> ... </div> <div class="bg-primary blend-difference"> ... </div> <div class="bg-primary blend-exclusion"> ... </div> <div class="bg-primary blend-hard-light"> ... </div> <div class="bg-primary blend-hue"> ... </div> <div class="bg-primary blend-lighten"> ... </div> <div class="bg-primary blend-luminosity"> ... </div> <div class="bg-primary blend-multiply"> ... </div> <div class="bg-primary blend-normal"> ... </div> <div class="bg-primary blend-overlay"> ... </div> <div class="bg-primary blend-plus-lighter"> ... </div> <div class="bg-primary blend-saturation"> ... </div> <div class="bg-primary blend-screen"> ... </div> <div class="bg-primary blend-soft-light"> ... </div>
This utility support darkmode dark:class_name
and hover state hover:class_name
.
Add one of the following classes to apply different Blend Modes to your backgrounds, for example when placing them on images. You can combine these with the Opacity utility.
.blur-0
.blur-1
.blur-2
.blur-3
.blur-4
.blur-5
.blur-6
.blur-7
.blur-8
.blur-9
.blur-10
<div class="blur-0"></div><!-- filter: blur(0); --> <div class="blur-1"></div><!-- filter: blur(4px); --> <div class="blur-2"></div><!-- filter: blur(8px); --> <div class="blur-3"></div><!-- filter: blur(16px); --> <div class="blur-4"></div><!-- filter: blur(24px); --> <div class="blur-5"></div><!-- filter: blur(32px); --> <div class="blur-6"></div><!-- filter: blur(48px); --> <div class="blur-7"></div><!-- filter: blur(64px); --> <div class="blur-8"></div><!-- filter: blur(80px); --> <div class="blur-9"></div><!-- filter: blur(96px); --> <div class="blur-10"></div><!-- filter: blur(128px); -->
This utility support darkmode dark:class_name
and hover state hover:class_name
.
Use responsive and toggle visibility classes to display or hide elements on different devices.
To display elements on hover or focus only, add the .visible-toggle
class to a parent element and one of the following classes to any child elements which should be hidden.
Class | Description |
---|---|
hidden-hover |
The element is removed from the document flow when hidden. |
invisible-hover |
The element is not removed from the document flow when hidden. |
The child elements will be displayed when the parent element is hovered or focused. Add tabindex="0"
to the parent element to allow it to receive focus through keyboard navigation and on touch devices.
If there are <a>
or <button>
elements within the hidden child element, they are already focusable through keyboard navigation and will make the child element appear. Therefore, add tabindex="-1"
so the parent element is still focusable on touch devices.
<div class="visible-toggle" tabindex="0"> <div class="hidden-hover"></div> </div>
<div class="visible-toggle" tabindex="0"> <div class="invisible-hover"></div> </div>
A collection of useful utility classes to style your content.
UniCore uses panels to outline certain sections of your content. These can be arranged in grid columns from the Grid component, for example.
Add the .panel
class to a <div>
element to create a position context, set box-sizing to border-box, apply a clearfix and to remove the bottom margin of its last child element.
<div class="panel
"><!-- ... --></div>
Define how the content of an image or video should be resized to fit its element.
Class | Description |
---|---|
.object-cover |
Scales the image by keeping its aspect ratio to completely cover the content box. |
.object-contain |
Scales the image by keeping its aspect ratio as far as its width and height can fit inside the content box. |
.object-fill |
Scales the image to fill the element's content box. |
.object-none |
Scales the image to fill the element's content box. |
.object-scale-down |
Like contain, but never up-scales. |
<img class="object-cover
" src="..." alt="...">
To modify the alignment of the image or video within its element, add one of the object-position-*
classes.
Class | Description |
---|---|
.object-position-center |
Align to the center. |
.object-position-top |
Align to the top. |
.object-position-right |
Align to the right. |
.object-position-bottom |
Align to the bottom. |
.object-position-left |
Align to the left. |
<img class="object-cover object-position-top
" src="..." alt="...">
To have an image cover its parent element, add the .ratio-*x*
class to the parent element.
<div class="ratio-4x3"> <img src="..." alt="..."> </div>
Class | Value |
---|---|
.ratio-1x1 |
100% |
.ratio-1x2 |
200% |
.ratio-2x1 |
50% |
.ratio-2x3 |
150% |
.ratio-3x2 |
66.6666667% |
.ratio-3x4 |
133.333333% |
.ratio-4x3 |
75% |
.ratio-16x9 |
56.25% |
.ratio-21x9 |
42.8571429% |
Expand images to cover their entire container as you can place your own content on top.
<div class="position-relative h-xs">
<img class="media-cover
" src="..." alt="...">
</div>
Note: You should have position: relative
applied on the parent element and set a height on it.
Add this class to apply a z-index on a element. for negative z-index suffix the class with n
Class | Property |
---|---|
.z-0 |
z-index: 0; |
.z-1 |
z-index: 1; |
.z-1n |
z-index: -1; |
.z-2 |
z-index: 2; |
.z-2n |
z-index: -2; |
.z-3 |
z-index: 3; |
.z-3n |
z-index: -3; |
.z-99 |
z-index: 99; |
.z-999 |
z-index: 999; |
.z-1000 |
z-index: 1000; |
.z-1020 |
z-index: 1020; |
.z-1030 |
z-index: 1030; |
.z-1040 |
z-index: 1040; |
.z-1045 |
z-index: 1045; |
.z-1050 |
z-index: 1050; |
.z-1055 |
z-index: 1055; |
.z-1060 |
z-index: 1060; |
.z-1070 |
z-index: 1070; |
.z-1080 |
z-index: 1080; |
.z-1090 |
z-index: 1090; |
.z-9999 |
z-index: 9999; |
<!-- default z-index --> <div class="z-1
"></div> <!-- for negative z-index --> <div class="z-1n
"></div>
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. but, we extended it to use all the color shades class to style your buttons as you want.
<href="#" class="btn btn-primary">Primary</a> <href="#" class="btn btn-primary-200
text-primary-700
">Primary 200</a> <href="#" class="btn btn-primary-700
text-primary-200
">Primary 700</a> <href="#" class="btn btn-secondary">Secondary</a> <href="#" class="btn btn-success">Success</a> <href="#" class="btn btn-info">Info</a> <href="#" class="btn btn-warning">Warning</a> <href="#" class="btn btn-danger">Danger</a> <href="#" class="btn btn-dark">Dark</a> <href="#" class="btn btn-gray">Gray</a> <href="#" class="btn btn-light">Light</a>
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
<href="#" class="btn btn-primarybtn-2xl
">2X Large</a> <href="#" class="btn btn-primarybtn-xl
">X Large</a> <href="#" class="btn btn-primarybtn-lg
">Large</a> <href="#" class="btn btn-primary">Medium</a><!-- default size --> <href="#" class="btn btn-primarybtn-sm
">Small</a> <href="#" class="btn btn-primarybtn-xs
">X Small</a> <href="#" class="btn btn-primarybtn-2xs
">2X Small</a>
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast, anyway, you have four type to work with!
<href="#" class="btn btn-primary">Default</a> <href="#" class="btn btn-outline
-primary">Outline</a> <href="#" class="btn btn-alt
-primary">Alternate</a> <href="#" class="btn btn-ghost
-primary">Ghost</a>
You can add icons to your buttons and customize your buttons using some useful utilities like sizing, radius to achieve the needed style and shape.
<href="#" class="btn btn-primary">
<span>Check it out</span><i class="unicon-arrow-right"></i>
</a>
<href="#" class="btn btn-primary">
<i class="unicon-cloud-download"></i><span>Download</span>
</a>
<href="#" class="btn btn-primary w-48px h-48px rounded-circle
">
<i class="unicon-close"></i>
</a>
Now buttons are responsive and you can set a button size to a selected breakpoint.
<href="#" class="btn btn-primary btn-sm sm:btn-md lg:btn-lg">...</a>
Give textual form controls an upgrade with custom styles, sizing, focus states, and more.
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
<form class="row gx-2 gy-3 needs-validation" novalidate> <div class="col-md-6"> <label for="inputEmail4" class="form-label">Email</label> <input type="email" class="form-control" id="inputEmail4" required> <div class="valid-feedback">Looks good!</div> <div class="invalid-feedback">Please put your address email!</div> </div> <div class="col-md-6"> <label for="inputPassword4" class="form-label">Password</label> <input type="password" class="form-control" id="inputPassword4" required> <div class="valid-feedback">Looks good!</div> <div class="invalid-feedback">Password is required!</div> </div> <div class="col-12"> <label for="inputAddress" class="form-label">Address</label> <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> </div> <div class="col-12"> <label for="inputAddress2" class="form-label">Address 2</label> <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> </div> <div class="col-md-6"> <label for="inputCity" class="form-label">City</label> <input type="text" class="form-control" id="inputCity"> </div> <div class="col-md-4"> <label for="inputState" class="form-label">State</label> <select id="inputState" class="form-select"> <option selected>Choose...</option> <option>...</option> </select> </div> <div class="col-md-2"> <label for="inputZip" class="form-label">Zip</label> <input type="number" class="form-control" id="inputZip"> </div> <div class="col-12"> <div class="form-check"> <input class="form-check-input" type="checkbox" id="gridCheck"> <label class="form-check-label" for="gridCheck"> I read and accept the <a href="#" class="link-gradient">terms and conditions</a>. </label> </div> </div> <div class="col-12"> <button type="submit" class="btn btn-primary w-full mt-1">Sign in</button> </div> </form>
Set heights using classes like .form-control-lg
and .form-control-sm
.
<!-- lg: height 56px --> <input type="email" class="form-controlform-control-lg
"> <!-- default: height 48px --> <input type="email" class="form-control"> <!-- sm: height 40px --> <input type="email" class="form-controlform-control-sm
">
You can use an icon from the Icon library inside a form control. Wrap the form control + icon on an element has .form-icon-group
class and add .form-icon
class to your icon element.
By default, the icon will be placed on the left side of the form, to change the alignment,
add the .form-icon-flip
class just next to .form-icon-group
class.
To enable an action, use an <a>
or <button>
element to make the icon clickable for an action.
<!-- Default alignement + Non-clickable icon --> <div class="form-icon-group
w-1/2 mx-auto"> <input type="email" class="form-control" placeholder="Search.."> <span class="form-icon
text-gray"> <i class="unicon-search icon-2"></i> </span> </div> <!-- Flip alignement + <a> element --> <div class="form-icon-group
form-icon-flip
w-1/2 mx-auto"> <input type="email" class="form-control" placeholder="Search.."> <a href="#" class="form-icon
text-gray"> <i class="unicon-arrow-right icon-2"></i> </a> </div> <!-- Flip alignement + <button> element --> <div class="form-icon-group
form-icon-flip
w-1/2 mx-auto"> <input type="email" class="form-control" placeholder="Search.."> <button type="button" class="form-icon
text-gray"> <i class="unicon-send-alt icon-2"></i> </button> </div>
Here are some examples of how you can create a custom froms from inputs, buttons and some utilities.
<div class="vstack hstack-sm gap-narrow"> <input type="email" class="form-control h-48px w-full bg-gray-25 border-gray-25 dark:bg-gray-700 dark:text-white dark:border-gray-700" placeholder="Your email address.."> <button type="submit" class="btn btn-primary btn-md w-100 sm:w-1/3 rounded-1">Sign in</button> </div> <div class="vstack hstack-sm gap-narrow"> <input type="email" class="form-control h-48px w-full dark:text-white" placeholder="Your email address.."> <button type="submit" class="btn btn-primary btn-md w-100 sm:w-1/3 rounded-1">Sign in</button> </div> <div class="vstack hstack-sm gap-1 rounded-2 p-narrow bg-gray-25 dark:bg-gray-700 dark:border-gray-700"> <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address.."> <button type="submit" class="btn btn-primary w-100 sm:w-1/3 rounded-1">Sign in</button> </div> <div class="vstack hstack-sm gap-1 border rounded-2 p-narrow bg-white dark:bg-gray-700 dark:border-gray-700"> <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address.."> <button type="submit" class="btn btn-ghost-primary w-100 sm:w-1/3 rounded-1">Sign in</button> </div> <div class="hstack gap-1 border-bottom p-narrow dark:border-gray-700"> <input type="email" class="form-control-plaintext ms-1 w-full dark:text-white" placeholder="Your email address.."> <button type="submit" class="btn btn-alt-primary w-48px h-48px rounded-circle"><i class="unicon-send-alt icon-2"></i></button> </div>
Use background images with lazy loading, responsive images and different image sources.
To apply this component, add the data-uc-img
and the data-src
attribute containing the image path for the background image to a div or any other element. By default, the background image will be lazy loaded as it enters the viewport when scrolling.
<div class="h-300px w-300px" data-src="{Image_URL}
"data-uc-img
></div>
Note: you should give it a height and width or make it cover to the parent element.
We have made some built-in classes for more controll on your background images.
Class | Default | Description |
---|---|---|
.bg-auto .bg-cover .bg-contain
|
cover | The background size of the image. |
.bg-center .bg-top .bg-right .bg-bottom .bg-left
|
center | The background position of the image. |
.bg-fixed .bg-local .bg-scroll
|
unset | The background attachment of the image. |
.bg-no-repeat .bg-repeat-x .bg-repeat-y .bg-round .bg-space
|
no-repeat | The background repeat of the image. |
An example with extended background image classes.
<div class="bg-contain bg-center bg-fixed
" data-src="{Image_URL}" data-uc-img=""></div>
To use the srcset
feature for background images, just add the data-srcset
attribute. Optionally, add the sizes
attribute but without prefix.
<div data-src="{Image_URL}" data-srcset="{Image_multi_sizes_URLs}" sizes="" data-uc-img=""></div>
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.
Option | Value | Default | Description |
---|---|---|---|
dataSrc |
String | '' |
The image's src attribute. |
sources |
String | '' |
The image's sources. This option is used for background images only. The sources attributes be passed in key: value; format for a single source. For multiple sources in JSON format. |
loading |
lazy |
eager |
To avoid lazy loading background images for the first visible viewport but still use other features of this component, add the loading="eager" parameter. |
margin |
String | 50% |
The margin is added to the viewport's bounding box, before computing an intersection with the image. The value must be in px or % units. |
target |
String | false |
A list of targets whose bounding boxes will be used to compute an intersection with the image. Defaults to the image itself. |
dataSrc
is the Primary option, and its key may be omitted if it's the only option in the attribute value.
Learn more about JavaScript components.
UniCore.img(element, options);
The Image component keeps records of already loaded images in the Session Storage. That's how it tries to determine if an image is already cached. A cached image is loaded immediately, without the lazy loading mechanism to prevent any rendering flashes. Prior to testing the Image component, make sure to clear these records from your browser's Session Storage.
A creative, aesthetic Marquee text effects for your creative website.
With this component you can create a marquee text effect for your headlines, texts and even paragraphs, It is just a way to display texts in a creative and modern way, in sync with what is trend now, let's see how it works.
To apply this effect you need only to add the data-uc-marquee
attribute to that element. but, you need to have an inner <div>
element then the element you want effects to work on it.
<div data-uc-marquee
> <!-- The parent element where the attribute should be! -->
<div> <!-- This is the inner div which is required! -->
<element> ... </element> <!-- The element that the effect will applied on! -->
</div>
</div>
This is an example of how it works and how the html structure should be.
<div data-uc-marquee
>
<div>
<div> Your marquee text </div>
</div>
</div>
If you have a less content or a small sized content you may have to add a clone
option to that element data attribute. true
equal clone one more time but you can set a number as many as clone times you may need.
<!-- Clone your content one time --> <div data-uc-marquee="clone: true;
"> <div> <div> Your marquee text </div> </div> </div> <!-- Clone your content 3 times --> <div data-uc-marquee="clone: 3;
"> <div> <div> Your marquee text </div> </div> </div>
You can give the user the ability to pause the animation when mouse enter the marquee text by adding hover: true;
option to that element data attribute.
<div data-uc-marquee="hover: true;
">
<div>
<div> Your marquee text </div>
</div>
</div>
You can reverse the marquee text direction by adding reverse: true;
option to that element data attribute.
<div data-uc-marquee="reverse: true;
">
<div>
<div> Your marquee text </div>
</div>
</div>
You can change the speed to the marquee text by adding speed: {1 to n};
option to that element data attribute.
<div data-uc-marquee="speed: 50;
">
<div>
<div> Your marquee text </div>
</div>
</div>
You can set a gap to the marquee text to create a space between the cloned content by adding gap: {1 to n};
option to that element data attribute.
<div data-uc-marquee="clone: 2; gap: 20;
">
<div>
<div> Your marquee text </div>
</div>
</div>
This is an example of a multiple marquee text effect.
<div class="vstack gap-2 justify-center"> <div class="h3 text-lowercase bg-secondary-200 py-2" data-uc-marquee="clone: 3; gap: 40;" style="transform: translateY(50%) rotate(5deg);"> <div> <div class="hstack" style="gap: var(--gap);"> <span>✦</span> <span>Creative</span> <span>✦</span> <span>Solid</span> <span>✦</span> <span>Modern</span> <span>✦</span> <span>Trendy</span> <span>✦</span> <span>Minimal</span> </div> </div> </div> <div class="h3 text-lowercase bg-lime-200 py-2" data-uc-marquee="clone: 3; gap: 40; reverse: true;" style="transform: translateY(-50%) rotate(-5deg);"> <div> <div class="hstack" style="gap: var(--gap);"> <span>✦</span> <span>Creative</span> <span>✦</span> <span>Solid</span> <span>✦</span> <span>Modern</span> <span>✦</span> <span>Trendy</span> <span>✦</span> <span>Minimal</span> </div> </div> </div> </div>
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.
Option | Value | Default | Description |
---|---|---|---|
clone |
boolean number |
false |
To clone your content as many times as you set. |
hover |
boolean | false |
Set it to true to pause the animation on hover. |
reverse |
boolean | false |
Set it to true to reverse the animation. |
speed |
number | 30 |
Animation speed on s (seconds). |
gap |
number | 16 |
The gap between your cloned content on px (pixels). |
A creative, aesthetic Magic Cursor effects for your creative website.
Recently, customizations have begun to appear at the mouse pointer level to add an aesthetic and creative effect to the site.
Of course, we have taken into consediration the addition of this feature as an in-house component to facilitate its use only through data-uc-cursor
.
Below you will find how it works and all the options and settings you can implement.
By default, the cursor initiated on our framework and good to go just enable it by removing the disable-cursor
class from body
tag.
Any of these options can be applied to the component attribute. Separate multiple options with a space and also these options are CSS classes or Selectors.
To apply this component, add the data-uc-cursor
attribute to an element you want the cursor to interact with!
<element data-uc-cursor
> ... </element>
By default when you added data-uc-cursor
attribute the cursor start to interact with that element, but, we made some built-in options to customize it more and below you will find out how!
This component attribute can accept multiple css classes by bootstrap or our exclusive built-in classes as well to customize it as you want.
The main cursor will inherit any classes you add on data-uc-cursor
attribute.
You can customize the cursor size by adding xs
, sm
, md
, lg
classes as an option.
You can customize the cursor color by adding text-{color}
and it will inherit that color as it's background.
<element data-uc-cursor="text-primary
"> ... </element>
You can add your custom text to the cursor by adding data-uc-cursor-text
attribute on the same element or any child element and write your custom text just inside the text attribute.
<!-- On the same element that has "data-uc-cursor" --> <element data-uc-cursor=""data-uc-cursor-text="Your text"
> ... </element> <!-- On the child level works too --> <element data-uc-cursor=""> <elementdata-uc-cursor-text="Your text"
></element> </element>
You can add your custom icon to the cursor by adding data-uc-cursor-icon
attribute on the same element or any child element and write your custom icon class just inside the attribute.
<!-- On the same element that has "data-uc-cursor" --> <element data-uc-cursor=""data-uc-cursor-icon="unicon-move icon-4"
> ... </element> <!-- On the child level works too --> <element data-uc-cursor=""> <elementdata-uc-cursor-icon="unicon-search icon-3"
></element> </element>
You can use our integrated icons library Unicons or any icon library that only works via CSS classes, as well as, you can resize icons using our icon size instructions.
Stick is a great effect for your links, buttons and any UI element, this will add a creative touch to your UI/UX design and here is how it works by adding data-uc-cursor-stick
attribute on the same element that have main attribute and accepts CSS selectors like .elem
class, #elem
ID and > *
child selectors.
You just need to hover on the image and the button below to see it sticked!
Get started<!-- ID selector --> <element data-uc-cursor=""data-uc-cursor-stick="#element-stick"
> <childElement id="element-stick"> ... </childElement> </element> <!-- Class selector --> <element data-uc-cursor=""data-uc-cursor-stick=".element-stick"
> <childElement class="element-stick"> ... </childElement> </element> <!-- Child node/tag selector --> <element data-uc-cursor=""data-uc-cursor-stick="childElement"
> <childElement> ... </childElement> </element>
The Stick effect accpets only one selector to make the cursor stick on it!
Magnetic, the same as Stick effect both are too way great effects to add a creative touch to your UI/UX design and here is how it works by adding data-uc-magnetic
attribute on the element that you want this effect works on.
<!-- On element to be magneted --> <element data-uc-cursor="opaque"> <childElement data-uc-magnetic> ... </childElement> </element> <!-- Only one selector by class to be magneted --> <element data-uc-cursor="opaque" data-uc-magnetic=".magnetic-element"> <childElement class="magnetic-element"> ... </childElement> <childElement> ... </childElement> </element> <!-- Select all the child elements to be magneted --> <element data-uc-cursor="opaque" data-uc-magnetic="*"> <childElement> ... </childElement> <childElement> ... </childElement> <childElement> ... </childElement> </element>
The Magnetic effect accpets one or multi-child selectors to make the cursor magnet on it!
As these effects are great now we will combine them to achive a creative fusion and here is how it works.
<ul data-uc-cursor="md" data-uc-cursor-stick="*"> <li data-uc-cursor="text-dark" data-uc-cursor-icon="unicon-logo-github icon-3"> <a href="#"><i class="icon-3 unicon-logo-github"></i></a> </li> <li data-uc-cursor="text-blue" data-uc-cursor-icon="unicon-logo-twitter icon-3"> <a href="#"><i class="icon-3 unicon-logo-twitter"></i></a> </li> <li data-uc-cursor="text-secondary" data-uc-cursor-icon="unicon-logo-instagram icon-3"> <a href="#"><i class="icon-3 unicon-logo-instagram"></i></a> </li> </ul>
<a href="#link" data-uc-cursor="md text-secondary-200 inverse-text fw-bold" data-uc-cursor-text="TOP" data-uc-cursor-stick="i" data-uc-magnetic="i"> <span>Scroll to</span> <i class="unicon-arrow-up"></i> </a>
<div class="row g-5 child-cols-3" data-uc-magnetic="**" data-uc-cursor-stick=".stick-element"> <div> <div class="ratio ratio-1x1 rounded-2 overflow-hidden" data-uc-cursor="sm text-white inverse-text shadow-sm" data-uc-cursor-icon="unicon-add icon-3"> <img src=" ... " alt="Image alt" data-uc-img> <div class="stick-element position-absolute top-50 start-50 translate-middle d-inline-flex justify-center items-center"> <a class="position-cover" href="#link"></a> </div> </div> </div> ... </div>
<div class="swiper" data-swiper="items: 1; prev: .swiper-nav-prev; next: .swiper-nav-next;"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- Add Pagination --> <div class="swiper-pagination" data-uc-cursor="xs text-white inverse-text" data-uc-cursor-stick=">*"></div> <!-- Add Arrows --> <div class="swiper-nav swiper-nav-prev position-absolute top-0 start-0 bottom-0 z-1 w-1/2" data-uc-cursor="lg transparent difference" data-uc-cursor-icon="unicon-arrow-left icon-5"></div> <div class="swiper-nav swiper-nav-next position-absolute top-0 end-0 bottom-0 z-1 w-1/2" data-uc-cursor="lg transparent difference" data-uc-cursor-icon="unicon-arrow-right icon-5"></div> </div>
Any of these options or classes can be applied to the component attribute. Separate multiple options or classes with a space.
Class | Value | Description |
---|---|---|
opaque , exclusion , difference |
Mode |
Exclusion or opaque or difference are modes to invert the cursor color. For ex [data-uc-cursor="difference"] .
|
xs , sm , md , lg , xl |
Size |
Set a size to your cursor via this classes. For ex [data-uc-cursor="lg"] .
|
text-{*} |
Color |
You can set a background color to your cursor via all Bootstrap text coloring classes. For ex [data-uc-cursor="text-primary"] .
|
opacity-{*} |
Opacity |
You can control the transparency of your cursor via all our extended Bootstrap Opacity classes. For ex [data-uc-cursor="opacity-25"] .
|
transparent |
Transparent background |
You can make the cursor background transparent by using this class. For ex [data-uc-cursor="transparent"] .
|
inverse-text |
Color Invert |
By default, the text color is white and by using this class will invert it to black. This feature works only when you set a [data-uc-cursor-text] or [data-uc-cursor-icon] . For ex [data-uc-cursor="inverse-text"] .
|
fw-bold , fw-light |
Font Weight |
You can control the font-weight of your cursor text via Bootstrap font-weight classes. For ex [data-uc-cursor="fw-bold"] .
|
Option | Value | Description |
---|---|---|
Your_Text |
Text/HTML |
This data attribute accepts only Text or HTML content. For ex [data-uc-cursor-text="Hello World!"] .
|
Option | Value | Description |
---|---|---|
unicon-{*} |
Icon class |
You can set an icon from our Icon Library or set your custom icon class. For ex [data-uc-cursor-icon="unicon-search"] .
|
icon-{*} |
Icon size |
You can customize the icon size using our icon sizing instructions that start from 1 to 6 . For ex [data-uc-cursor-icon="unicon-search icon-4"] .
|
Option | Value | Description |
---|---|---|
.class , #id , >* or tag |
CSS Selector |
This data attribute accepts only CSS selectors and can work only for one selected element. For ex [data-uc-cursor-stick=".stick-element"] and add stick-element class to only one element that you want the cursor to stick on it.
|
Option | Value | Description |
---|---|---|
.class , #id , >* or tag |
CSS Selector |
This data attribute accepts only CSS selectors and can work for one or multiple selected elements. For ex [data-uc-magnetic] or [data-uc-magnetic=".element"] and add element class to any element(s) that you want the cursor to interact with magnet.
|
Learn more about JavaScript components.
const yourCursor
= new UCCursor(options);
Option | Value | Default | Description |
---|---|---|---|
container |
string | body | The cursor will fly only on the boundaries of selected container. Can accept multi selectors. |
speed |
number | 0.7 | Cursor speed when following the mouse pointer. Value on seconds. |
visibleTimeout |
number | 300 | The cursor will appear after the timout you set. Value on milliseconds. |
ease |
string | "expo.out" | Cursor easing. |
stickForce |
number | 0 | Cursor stick effect force. Value on seconds. |
stickMagneticForce |
number | 0.3 | Cursor stick and magnetic force. Value on seconds. |
$("[data-uc-magnetic]").each(function () {
const $elements = this.dataset.ucMagnetic ? $(this).find(this.dataset.ucMagnetic) : $(this);
$elements.each(function () {
new UCMagnetic(this, yourCursor
);
});
});
Option | Value | Default | Description |
---|---|---|---|
x |
number | 0.4 | Magnetic ratio for x-axis. |
y |
number | 0.4 | Magnetic ratio for y-axis. |
s |
number | 0.3 | Magnetic speed when mouse enter the element. |
rs |
number | 0.5 | Magnetic return speed when mouse leave the element. |
Create Modal dialogs with different styles and transitions.
The Modal component consists of an overlay, a dialog and an optional close button. You can use any element to toggle a modal dialog. To enable the necessary JavaScript, add the data-uc-toggle
attribute. An <a>
element needs to be linked to the modal's id. If you are using another element, like a button, just add the data-uc-toggle="target: #ID"
attribute to target the id of the modal container.
Add the data-uc-modal
attribute to a <div>
element to create the modal container and an overlay that blanks out the page. It is important to add an id
to indicate the element for toggling. Use the following classes to define the modal's sections.
<!-- This is a button toggling the modal --> <button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button> <!-- This is the modal --> <div id="modal-id" data-uc-modal> <div class="uc-modal-dialog p-3"> <button class="uc-modal-close-default" type="button">Close</button> <h2 class="h4">Modal heading</h2> <p> ... </p> </div> </div>
To divide the modal into different content sections use panel
, padding p-{*}
and border-{*}
.
<!-- This is a button toggling the modal --> <button data-uc-toggle="target: #modal-id" type="button">Toggle modal</button> <!-- This is the modal --> <div id="modal-id" data-uc-modal> <div class="uc-modal-dialog p-3"> <button class="uc-modal-close-default" type="button">Close</button> <!-- The modal header --> <div class="panel p-3 border-bottom"> <h2 class="h4">Modal heading</h2> </div> <!-- The modal body --> <div class="panel p-3"> <p> ... </p> </div> <!-- The modal footer --> <div class="panel p-3 border-top"> ... </div> </div> </div>
To create a modal, that fills the entire page, add the uc-modal-full
class. It is also recommended adding the .uc-modal-close-full
class to the close button, so that it adapts its styling.
<div class="uc-modal-full" data-uc-modal> <div class="uc-modal-dialog"> <button class="uc-modal-close-full" type="button">Close</button> ... </div> </div>
To create a close button, enable its functionality and add proper styling and positioning using one of the classes below.
Class | Description |
---|---|
uc-modal-close-default |
Add this class to your <button> or <a> to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right of the modal dialog but still inside. |
uc-modal-close-outside |
Add this class to your <button> or <a> to add a close modal behavior, but also this class will add a proper styling and positioning to the element on the top right but outside of the modal dialog. |
uc-modal-close-full |
Add this class to your <button> or <a> to add a close modal behavior, this class works well with full modal. |
uc-modal-close |
Add this class to your <button> or <a> to add a close modal behavior only. |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est, beatae tempore rerum corporis iure aliquam. Asperiores totam quae nesciunt!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio est, beatae tempore rerum corporis iure aliquam. Asperiores totam quae nesciunt!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Coming soon.
Coming soon.
A collection of smooth animations to use within your page.
All animations themselves are implemented with CSS, so they do not require JavaScript to play.
Add one of the .uc-animation-*
classes to any element. The animation is shown when the class is added, so usually immediately on page load.
Class | Description |
---|---|
.uc-animation-fade |
The element fades in. |
.uc-animation-scale-up
.uc-animation-scale-down
|
The element fades in and scales up or down. |
.uc-animation-slide-top
.uc-animation-slide-right
.uc-animation-slide-bottom
.uc-animation-slide-left
|
The element fades and slides in from the top, bottom, left or right by its own height or width. |
.uc-animation-slide-top-small
.uc-animation-slide-right-small
.uc-animation-slide-bottom-small
.uc-animation-slide-left-small
|
The element fades and slides in from the top, bottom, left or right with a smaller distance which is specified by a fixed pixel value. |
.uc-animation-slide-top-medium
.uc-animation-slide-right-medium
.uc-animation-slide-bottom-medium
.uc-animation-slide-left-medium
|
The element fades and slides in from the top, bottom, left or right with a medium distance which is specified by a fixed pixel value. |
.uc-animation-kenburns |
The element will scales very slowly up without fading in. |
.uc-animation-shake |
The element shakes. |
.uc-animation-stroke |
The SVG element strokes are drawn. |
.uc-animation-spin |
The element spin. |
.uc-animation-ping |
The element ping. |
.uc-animation-pulse |
The element pulse. |
.uc-animation-bounce |
The element bounce. |
<div class="uc-animation-fade
"></div>
To toggle an animation on hover or focus, add the uc-animation-toggle
class to a parent element. Also add tabindex="0"
to make the animation focusable through keyboard navigation and on touch devices.
<div class="uc-animation-toggle
" tabindex="0">
<div class="uc-animation-fade"></div>
</div>
By default, all animations are incoming. To reverse any animation, add the uc-animation-reverse
class.
<div class="uc-animation-fade uc-animation-reverse
"></div>
To play animations at a faster speed, add the uc-animation-fast
class to the element.
<div class="uc-animation-fade uc-animation-speed
"></div>
By default, scaling animations originate from the center. To modify this behavior, add one of the .origin-*
classes from the Utilities.
To add a simple Ken Burns effect, add the uc-animation-kenburns
class to any image. You can also apply the uc-animation-reverse
or one of the .origin-*
classes from the Utilities to modify the effect. Hover on the images below to see it in action!
<img class="uc-animation-kenburns
" src="" width="" height="" alt="" /> <img class="uc-animation-kenburns origin-top-right
" src="" width="" height="" alt="" />
By default, the animation starts on page load. In this example we used the uc-animation-toggle
, to toggle the effect when mouse move over the image.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
By the way, this component is from Bootstrap and we have no change or extend any options so you can check out the full instructions for this component on their docs!
Here’s a simple example of a carousel with slides, controls and indicators.
<div id="carousel-demo" class="carousel slide rounded overflow-hidden" data-bs-ride="true"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carousel-demo" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <div class="ratio ratio-4x3"> <img src="..." alt="..."> </div> </div> <div class="carousel-item"> <div class="ratio ratio-4x3"> <img src="..." alt="..."> </div> </div> <div class="carousel-item"> <div class="ratio ratio-4x3"> <img src="..." alt="..."> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carousel-demo" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carousel-demo" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div>
Make elements remain at the top of the viewport, like a sticky navigation, sidebars and content.
To create an element that remains at the top of the viewport when scrolling down the site,
add the data-uc-sticky
attribute to that element.
<div data-uc-sticky
>Stick to the top</div>
By default, the element sticks to the top of the viewport. You can set the position: bottom
option to stick it to the bottom of the viewport.
<div data-uc-sticky="position: bottom
">Stick to the bottom</div>
Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
The default value of 0
means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.
<!-- Sticks after 100px scrolling --> <div data-uc-sticky="start: 100;
"></div> <!-- Sticks after 10vh scrolling --> <div data-uc-sticky="start: 10vh;
"></div> <!-- Sticks after scrolling the elements height --> <div data-uc-sticky="start: 100%;
"></div> <!-- Sticks after the top of the selected element --> <div data-uc-sticky="start: #selector;
"></div>
End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -.
A value of 0
means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to 0
. A CSS Selector will set the end to the selected element's bottom and the element's bottom border.
false
will make the element stick until the end of the page.
true
selects the parent element.
<!-- Sticks until 100px scrolling --> <div data-uc-sticky="end: 100;
"></div> <!-- Sticks until 10vh scrolling --> <div data-uc-sticky="end: 10vh;
"></div> <!-- Sticks until scrolling the elements height --> <div data-uc-sticky="end: 100%;
"></div> <!-- Sticks until the bottom of the selected element --> <div data-uc-sticky="end: #selector;
"></div> <!-- Sticks until the bottom of its parent container --> <div data-uc-sticky="end: true;
"></div>
To set an offset to the viewport's edge when the element is sticky, add the offset
option. The value can be in vh, % and px. It supports basic mathematics operands + and -.
<div data-uc-sticky="offset: 150
">Stick 150px below the top</div>
You can make the sticky element show only when scrolling up to save space. Together with an animation, this makes for a very smooth experience.
<div data-uc-sticky="show-on-up: true
">Slide in on scroll up</div>
Add an animation from the Animation component in order to have the sticky element reappear smoothly if a start offset is set.
<div data-uc-sticky="animation: uc-animation-slide-top;
">Animation Slide Top</div>
The overflow-flip
option disables the sticky behavior for oversized content. Instead, it only flips the sticky position if the element is larger than the viewport. Changing the scroll direction will not affect the sticky position. Together with the start
and end
options, two nice sticky effects can be achieved. Cover an element by following content or reveal it by previous content.
<!-- Section will be covered by the next section --> <div data-uc-sticky="overflow-flip: true; end: 100%;
"></div> <div>A section the will cover previous section and reveal next section.</div> <!-- Section will be revealed by the previous section --> <div data-uc-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0;
"></div>
Sticky content that is larger than the viewport will scroll down and stick to the bottom of the viewport. Changing the scroll direction will immediately scroll the sticky content up and change the sticky behavior to stick to the top of the viewport. Scrolling down will change the behavior again.
<div class="row"> <div class="col-8"> <div>Oversized content...</div> </div> <div class="col-4"> <div data-uc-sticky="end: true;">Stick until content end.</div> </div> </div>
It's possible to disable the sticky behavior for different device widths by applying the media option to the attribute and adding the appropriate viewport width. Add a number in pixel, for example media: 640
, or a breakpoint, for example media: @m
. The element will be sticky from the specified viewport width and upwards, but not below.
<div data-uc-sticky="media: 640
">Only be sticky on viewports larger than 640px.</div>
Resize the screen to see it in action.
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.
Option | Value | Default | Description |
---|---|---|---|
position |
top bottom |
top |
The position the element should be stuck to. |
Start |
Length, CSS Selector | 0 |
Start offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. The default value of 0 means that the element's top border and viewport's top border intersect. A CSS Selector will set start to the selected element's bottom border and the element's top border.
|
End |
Length, CSS Selector, Boolean | false |
End offset. The value can be in vh, % and px. It supports basic mathematics operands + and -. A value of 0 means that the element's top border and viewport's top border intersect, which would cause the element not to be sticky at all if start is also set to 0 . A CSS Selector will set the end to the selected element's bottom and the element's bottom border. false will make the element stick until the end of the page. true selects the parent element.
|
offset |
Length | 0 |
The offset the Sticky should be fixed to. The value can be in vh, % and px. It supports basic mathematics operands + and -. |
overflow-flip |
Boolean | false |
Flip the Sticky's position option if the element overflows the viewport and disable overflow scrolling. |
animation |
String | false |
The animation to use when the element becomes sticky. |
cls-active |
String | uc-active |
The active class. |
cls-inactive |
String | '' |
The inactive class. |
show-on-up |
Boolean | false |
Only show sticky element when scrolling up. |
media |
Number, String | null |
Condition for the active status - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)). |
target-offset |
false , Length |
false |
Initially make sure that the Sticky element is not over a referenced element via the page's location hash. The offset defines by how far the element will be above the referenced element. false will disable this behavior.
|
Learn more about JavaScript components.
UniCore.sticky(element, options);
The following events will be triggered on elements with this component attached:
Name | Description |
---|---|
active |
Fires after the element becomes sticky. |
inactive |
Fires after the element is no longer sticky. |
Inject inline SVG images into the page markup and style them with CSS.
SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.
To apply this component, add the data-uc-svg
attribute to an <img>
element.
Using the data-uc-svg
attribute also allows you to inject a symbol from the SVG file. Just append the symbol's ID to the image path as you would in any fragmented URL.
Injected SVG
Injected SVG + Preserve
<img class="text-dark dark:text-white" src="{image.svg}" alt="..." data-uc-svg
/>
Using the data-uc-svg
attribute also allows you to inject a symbol from the SVG file. Just append the symbol's ID to the image path as you would in any fragmented URL.
SVGs will adapt the current color for their stroke and fill color.
To prevent this behavior, add the .uc-preserve
class to the SVG itself or the elements inside the SVG.
The loading="lazy"
attribute for <img>
elements is taken into account, and SVG images will be injected as inline SVG as they enter the viewport.
There are two ways to animate SVG strokes.
First by using the Animations component and data-uc-svg="stroke-animation: true"
, and second by using the Parallax component.
Any of these options can be applied to the component attribute. Separate multiple options with a semicolon.
Option | Value | Default | Description |
---|---|---|---|
src |
String | '' |
The SVG source URL. If a location hash is present, only the <symbol> of the SVG with the given ID is shown. |
stroke-animation |
Boolean | false |
Animate all elements with the <stroke> attribute in the SVG. |
Learn more about JavaScript components.
UniCore.svg(element, options);
UniCore.svg(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })
A JavaScript Promise that will resolve with the added SVG Node.
Coming soon.
A collection of smooth animations to use within your page via Anime.js library.
We used Anime.js library for animations, is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.
We made it easy to deal with Anime.js and even easy to implement just by using data attributes instead of initiating animations via javascript code.
To configure Anime.js, use the data-anime
attribute and thier options or our built-in options below.
<div data-anime="onclick: true; translateX: 8; scale: 2; rotate: 1turn;"> Animate me </div>
These are our built-in options to target, trigger or initiate the animations.
Option | Value | Default | Description |
---|---|---|---|
targets |
string | "" |
Target child elements by class or ID or any css selector for ex: targets: > * . |
onclick |
boolean string |
false |
Start animation when element clicked. You can set it to true or use alternate or restart . |
onhover |
boolean | false |
Start animation when element hovered. |
onview |
boolean number |
false 0 |
Start animation when it's on viewport. You can set an offset in px for ex: 100 or -100 . |
autoplay |
boolean | true |
Autoplay animation when element it's on viewport. |
You can find out all the options and functions on their documentation.
Animate CSS properties depending on the scroll position of the document.
We combined between Anime.js and ScrollMagic to acheive the Onscroll Effect. Now you can easly fire animatin on scroll with a powerful controll for your animations using anime.js options.
To apply this component, add the onscroll:'{trigger-element}'
option to the data-anime
attribute to apply the onscroll effect.
I'm a onscroll element, say hi :)
<div class="parent-scene
"> <p data-anime="onscroll: .parent-scene;
translateX: 240; opacity: [0, 1]" ></p> </div>
We have made some most used built-in options from ScrollMagic default ones.
Option | Value | Default | Description |
---|---|---|---|
onscroll |
boolean string |
null '.css-selector'
|
Enable/Disable "on-scroll" effect or enable it with a trigger element which is a selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set). |
onscroll-trigger |
number | 1 |
When animation fires, default: bottom. 0 = top, 0.5 = middle, 1 = bottom |
onscroll-duration |
number string function |
100% |
The duration of the scene. |
onscroll-offset |
number | 0 |
Offset trigger position by px. |
onscroll-reverse |
boolean | true |
Should the scene reverse, when scrolling up? |
You can find out all the options and functions on their documentation.
We made it easy to deal with Swiper 8 slider and even easy to implement with responsive on different screens using breakpoints.
To setup Swiper 8, use the data-swiper
attribute and use our built-in options that are explained in the table below:
<div class="swiper" data-swiper="items: 3; dots: .swiper-pagination;"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div>
We have custom configured responsive control using breakpoints data-swiper-{breakpoint}
, the available breakpoints: s
, m
, l
and xl
.
<div class="swiper" data-swiper="items: 1; center: true;" data-swiper-m="items: 3; center: false;"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div>
These are our built-in and most used options to configure and customize your swiper slider 8.
Option | Value | Default | Description |
---|---|---|---|
items |
number | 'auto' | 1 |
number of slides per view. |
sets |
number | 1 |
Set numbers of slides to define and enable group sliding. |
active |
number | 0 |
Index number of initial slide. |
connect |
string | null |
Connet two sliders via css class selector. |
gap |
number | 48 |
Distance between slides in px. |
center |
boolean | false |
If true, then active slide will be centered, not always on the left side. |
center-bounds |
boolean | false |
If true, then active slide will be centered without adding gaps at the beginning and end of slider. |
dots |
string | .swiper-dotnav |
String with CSS selector or HTML element of the container with pagination. |
dots-type |
string | bullets |
String with type of pagination. Can be 'bullets', 'fraction', 'progressbar' or 'custom'. |
dots-click |
boolean | true |
If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type. |
next |
string | .swiper-next |
String with CSS selector or HTML element of the element that will work like 'next' button after click on it. |
prev |
string | .swiper-prev |
String with CSS selector or HTML element of the element that will work like 'prev' button after click on it. |
disable-class |
string | .swiper-disabled |
CSS class name added to navigation button when it becomes disabled. |
auto-height |
boolean | false |
Set to true and slider wrapper will adapt its height to the height of the currently active slide. |
autoplay |
number | 3000 |
Activate autoplay and set a delay between transitions (in ms). If this parameter is not specified, auto play will be disabled. |
autoplay-init |
boolean | true |
Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction. |
offset |
number | 0 |
Add (in px) additional slide offset in the end of the container (after all slides). |
fade |
boolean | false |
Enables slides cross fade. |
You can find out all the options and functions on their documenation.
Changes the html structure of the target elements, wrapping each line, word, and/or character in a element.
We include SplitType.js is a small javascript library that splits HTML text into elements so that lines, words, and characters can be animated independently. And can be used with any animation library.
To configure SplitType.js, use the data-split-text
attribute and it's options.
<h3 class="h1" data-split-text="types: 'chars'"
>I'm a splited text</h3>
To see the results of the splited text see it via inspect elements.
Now it's time to take advantage of SplitType and use Anime.js plugin to create good and smooth (60FPS) animations.
<h3 class="h1" data-split-text="types: 'chars'" data-anime="translateY: [-80, 0]; translateX: 80; opacity: [0, 1]; easing: easeOutExpo; duration: 350; delay: anime.stagger(80); loop: true; targets: > *;">Hello World!</h3>
These are the most used options to configure and customize your splited text.
Option | Value | Default | Description |
---|---|---|---|
types |
string | "lines, words, chars" |
Comma separated list of types. |
absolute |
boolean | false |
If true, absolute position will be used for split text nodes. |
tagName |
string | "div" |
The HTML tag that will be used for split text nodes. |
You can find out all the options and functions on their documentation.
Add typing effect to your sentences.
An integrated lightweight Javascript library called Typed.js, It give you the ability to types out sentences and then delete them.
To configure TypedJs, use the data-typed
attribute and it's options.
<h3 class="h1">
We are a digital
<span class="text-gray" data-typed="typeSpeed: 80; backSpeed: 50; backDelay: 1500; shuffle: true; loop: true;
">
<span>studio!</span>
<span>agency!</span>
<span>creative!</span>
</span>
</h3>
These are the most used options to configure and customize how sentences should be typed.
Option | Value | Default | Description |
---|---|---|---|
typeSpeed |
number | 80 |
Type speed in milliseconds. |
backSpeed |
number | 50 |
Backspacing speed in milliseconds. |
backDelay |
number | 1500 |
Time before backspacing in milliseconds. |
shuffle |
boolean | false |
Shuffle the strings. |
loop |
boolean number | false |
Loop strings or set the amount of loops. |
You can find out all the options and functions on their documentation.
There are thousands of templates out there to choose from,
but none quite like ours.
UniCore uses the following open source resources:
Name | Link | Version |
---|---|---|
Node.js | https://www.npmjs.com/ | 14.16.0 |
Gulp | https://gulpjs.com/ | 4.0.2 |
Bootstrap 5 | https://getbootstrap.com/ | 5.2.3 |
UIkit 3 (JS Components ONLY) | https://getuikit.com/ | 3.15.20 |
Swiper 8 | https://swiperjs.com/ | 8.4.5 |
Anime.js | https://animejs.com/ | 3.2.1 |
ScrollMagic | https://scrollmagic.io/ | 2.0.7 |
SplitType.js | https://github.com/lukePeavey/SplitType | 0.3.3 |
Typed.js | https://github.com/mattboldt/typed.js | 2.0.12 |
UniCore Docs v1.2.8 Beta © 2023.