Getting Started

With AmpereUI you can kickstart your next project in just seconds

Just you need to add this link tag to you html and you will be good to go.

AmpereUI uses unicon icon for most of the places and for some place it use fontawesome icon. You can however use any of these at any places as per your convinience.

AmpereUI sets the base font size to 10px and hence 1rem = 10px. This is helpful in making the typography and spacing responsive. So we would suggest you to keep your style sheet also in terms of 10px as the base size.

Colors

AmpereUI comes with 10 different colors

We provide you with 10 different colors namely black, pink, red, orange, yellow, green, teal, blue, indigo, purple. Each color comes with 6 shade namely red-1, red-2 and so on.

For background-color you can add the classes like bg-red-1, bg-red-2 and so on for all the different colors.

For font-color you can add the classes like red-1, red-2 and so on for all the different colors.

Example of different color text using helper class

Example of same color text with different shade using helper class

Example of different background color using helper class

Example of red color with all 6 shades

Example of red purple with all 6 shades

Typography

Let's talk a little bit about typography

Typography play a very important role in making your site look aesthetic and giving the taste of your product. AmpereUI gives a all the necessary helper classes needed for typography including alignemnt, font-sizes, font-weight, text-decoration and so on.

Headings

Font Weights

Text Alignments

Font Style

Text Sizes

Spacing

Now it's time to take a look on spacing classes provided by the library.

About Margin

We provide all the necessary classes for padding and margin.

The convention for margin on all side is m-auto, m-0, m-8, m-10, m-16, m-20 and m-24.

The convention for margin-left on all side is ml-auto, ml-0, ml-8, ml-10, ml-16, ml-20 and ml-24.

For margin-right, the convetion is mr-auto and similar.

For margin-bottom, the convetion is mb-auto and similar.

For margin-top, the convetion is mt-auto and similar.

For margin-vertical, the convetion is mv-auto and similar.

For margin-horizontal, the convetion is mh-auto and similar.

Avatars

Here are the examples of avatars with text.

You can simply add avatar class to a div and write the text you want on the avatar ,.e.g AZ. We also provide three variants for the avatars namely avatar-sm, avatar-md and avatar-lg for different sizes as per your need.

For the image avatar you can simply add the avatar class on the image tag as hown in the below code snippet. The size variation works with the image avatar too.

Alerts

Here are the examples of alerts.

For the alert you can simply add the alert class in the div with icon of your choice as shown in the below code snippet. In the icon you need to add the class alert-icon to make it work.

There are four types of alerts , a basic alert with class of alert, alert-primary, alert-warning, alert-info,

If you want small alert you can alert-sm class to the alert div and you will be good to go.

If you want to make alert with dismiss just add alert-action class to the icon and add the javascript code from below.

Badges

Here are the examples of badges on icon.

We also offer badges on icon components where you can either put count on the badges of you can put some icon also in the badges. Take a look below.

You can also change the color of the badge by simply adding color and bg color classes of your choice to the badge.

Profile with badges

Here are the examples of profile with badges

Buttons

Here are the examples of Buttons

We offer a large variety of button for every use cases. AmpereUI comes with solid button, outline button, text-button, button with icon, icon only button and disabled style. It also has three variation of sizes from small, medium and large.

It also has floating action buttons which are fully cinfigurable and you can change the color and icon as per your use case.

Here are the examples of different types Buttons

Here are the examples of buttons with icon

Here are the examples of button sizes

Here are the examples of icon only button

Here are the examples of floating action buttons

Cards

Here are the examples of vertical card.

Here are the examples of vertical product card.

Here are the examples of vertical card with dismiss.

Here are the examples of basic vertical card.

Here are the examples of basic horizontal card.

Here are the examples of horizontal product card.

Here are the examples of horizontal product card with text overlay.

Here are the examples of horizontal text only card

Here are the examples of small horizontal card

Here are the examples of small horizontal card

Here are the examples of small horizontal product card with dismiss

Here are the examples of small vertical product card for product listing

Here are the examples of small vertical product for wishlist

Here are the examples of small horizontal product card with quantity buttons

Images

Here are the examples responsive image

For the responsive image just add img-res class to any image tag. FOr round image add img-round in the image tag.

Inputs

Here are the examples text fields

Here are the radio buttons,checbox, and range component

Text Utilities

Here are the examples text utilities

Lists

Here are the example of lists

We offer three types of list , a basic stacked no bullet list, a no bulleted list with icon which is unicon by default. It also comes with a inline spaced list.

Navigation

Here is the example of basic navigation

Modal

Here is the example of modal

Rating

Here is the example of rating component

By default the star style is grey. If you want to add the active style add the star-active class to thei tag containing the star icon.

Toast

Here is the example of toast

Toast comes with without action button as well as with action button. It has four variation basic toast, success toast, warning toast, and info toast and all are fullt configurable where you can use any icon of your own choice and add or remove action button. For the dismissal of toast add the js code from the below.

For positioning of the toast you can add the following classes namely top-left, top-right, bottom-right, bottom-right.

Grid

Here is the example of grid system

We offer a very basic 4 column grid system where your simply give the grid-component class to the parent and you get a 4 column grid.

Now in order to make your children take space according to you, your can add the children with classes like span-2 to take space of two children, span-3, for three children and span-4 for all the four children.

Below is the example of all the use case possible with our 4 column grid.

For a responsive 4 column grid add the class grid-component-responsive to the parent and when the screen size become smaller it will become a 2-column grid.

For a stacked 4 column grid add the class grid-component-stacked to the parent and when the screen size become smaller it will become a stacked

Footer

Here is the example of basic footer