Getting started

With NPM

To use the library just install the package with the "npm install uzbek.css" command. You should be able to use the package with the "import 'uzbek.css/css/uzbek.css'" line in your js code, or import it into your css file with "@import '~uzbek.css/css/uzbek.css'". If you want to modify the source code or purge unused css, you will need to install other packages, such as sass or gulp.

With CDN

Unfortunately, this library is not available to get using a cdn. If you want to help us - follow and star our Github repository.

Download

You can download our source code from the Github repository. Your'e looking for the main uzbek.css file and .scss files.

Customizing

To customize the library, you need to open the _variables.scss file and change the value of the variables, or add some more, to make your website unique. You will need to use sass.

Colors

Uzbek.css provides custom colors such as primary or error. You can use those predefined ones or add your own colors by adding them to the $colors map in variables.scss file. For every color, you can use automatically generated classes light and dark with values from 1 to 8. You can use the color names in classes such as .bg-x or .txt-x and in hover classes - .bg-hover-x and .txt-hover-x.

show code

Font sizes

To define font sizes use the .font-x class where x could be: xs, sm, md, lg, xl and xxl. To change font weight use the .font-weight-x class, where x is the font weight value (from 100 to 800).

show code

Margins/Paddings

To define margins in your html you can use classes:
.m-x ( margin )
.mt-x ( margin-top )
.mr-x ( margin-right )
.mb-x ( margin-bottom )
.ml-x ( margin-left )
.my-x ( vertical margin )
.mx-x ( horizontal margin )

Same with paddings!
.p-x ( padding )
.pt-x ( padding-top )
.pr-x ( padding-right )
.pb-x ( padding-bottom )
.pl-x ( padding-left )
.py-x ( vertical padding )
.px-x ( horizontal padding )

"x" is a value from 0 to 5 defining the margin/padding size.

Opacity

To change the opacity of an element you can use the .o-x class where x is an iteration of 10 from 0 to 100.

show code

Borders

To add a border to your element you can use such classes as
.b-x (border)
.b-r-x (border-right)
.b-b-x (border-bottom)
.b-t-x (border-top)
.b-l-x (border-left)

where x is the color name. To change border width use .b-w-x class, where x is the amount of pixels, and to change border style use .b-s-x where x could be solid, dashed or dotted.

Border radius

To define border-radius of an element you can use the .rounded class, that will apply 50% border-radius or .rounded-x class, where x could be: xs, sm, md, lg or xl.

show code

Display

To define the display property of an element use the .display-x class where x could be:
n - none
b - block
f - flex
i - inline
i-b - inline-block

Other

Some addititonal classes that you can use:
.bs - applies basic box-shadow
.fixed - applies position: fixed; property
.smooth - applies transition property
.link - applies cursor: pointer; property
.container - centers a div and its content
.float-r - applies float: left; property
.float-l - applies float: right; property
.clear-both - applies clear: both; property

Buttons

You can use a predefined button component by adding the .btn class to an element. To use color variants use the .btn-x class or the .btn-outlined-x class, where x is the name of the color. You can also disable a button by adding the .disabled class.

show code

Windows

To use the window component you need to add the .window class to a div. The window should have two elements inside:
.title - content of the windows title bar
.body - content of the windows body.
.status-bar (optional) - content of the windows status bar

Use .minimize, .maximize, .close, .restore and .help classes to add premade buttons to the title bar.

show code

Grid/Cards

To create a flex container use the .row class. Inside you can use the .col-x-y class, where x is the number of cells the element will take (maximum 12), and y is the breakpoints size (xs, sm, md, lg, xl). To add a gap use the .gap-x class on a container, where x is a number from 0 to 3.

To create a card component add a .card class to an element. Inside you can use the .title class to define the cards title.

show code

Navbars/Sidebars

You can add a navbar/sidebar to your website by using premade components. Just add the .navbar or .sidebar class to your element, and it should style itself!

show code

Tables

Table elements are styled on default, so you don't need to add any classes to them. To get hover effects on tables you can use those two classes:
.highlight-row-x - highlights an entire row on hover
.highlight-cell-x - highlights one cell on hover
where x is the name of the color.

show code

Inputs

Inputs are styled on default, so you don't have to add any additional classes.

show code

Badges

To use the badge component just add the .badge class to your element.

show code

Alerts

To create alerts apply the .alert class to an element. You can use colored versions by using the .alert-x class, where x is the name of the color.

show code

Messages

To create a message, just add a .message or a .message-left class to na element.

show code

Toasts

To create toast notifications add the .toast class to an element. Inside you should put two elements:
.title - the title bar of the toast
.body - the body of the toast

show code

Contact

Project's repository

Contact e-mail