TINT CSS Framework | TINT Is Not Tailwind

Getting started

To use TINT CSS Framework download the css file from github and refer to it in the head element of your html file.


            <head>

                <link rel="stylesheet" href="./css/style.css">

            </head>

How to use it

Just add utility classes to your html element.

Like in this example

( Here we add "position: absolute; width: 90%; padding: 15px; background-color: indigo; color: red; background-color: black; padding: 10px; color: white;" )

Code:


            <div class="relative w-90 m-auto p-15 bg-indigo">
                <h2 class="c-red">Title</h2>
                <p class="bg-night p-10 c-white">Text text text...</p>
            </div>

Result:

Title

Text text text...

Positioning

Position

TINT Class	CSS Property and value
relative	position: relative
absolute	position: absolute
fixed	position: fixed
sticky	position: sticky

Example use of position classes

( Here we add "position: absolute;")

Code:


                <div class="absolute ...">
                    <p>Absolute element</p>
                </div>

Result:

Absolute element

Top - Right - Bottom - Left

TINT Class	CSS Property and value	Range
top-0	top: 0%	from 0% to 50% ( top-0, top-2, top-3, ... , top-50 )
right-0	right: 0%	from 0% to 50% ( right-0, right-2, right-3, ... , right-50 )
bottom-0	bottom: 0%	from 0% to 50% ( bottom-0, bottom-2, bottom-3, ... , bottom-50 )
left-0	left: 0%	from 0% to 50% ( left-0, left-2, left-3, ... , left-50 )
absolute-center	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

Example use of Top - Right - Bottom - Left classes

( Here we add "position: absolute; top: 20%; left: 30%;")

Code:


                <div class="absolute top-20 left-30 ...">
                    <p>Absolute element</p>
                </div>

Result:

Absolute element

z-index

TINT Class	CSS Property and value	Range
z-0	z-index: 0	From -1 to 99 ( z--1, z-0, z-1, ... , z-99 )

Example use of z-index classes

( Here we add "z-index: 3, z-index: 2, z-index: 1")

Code:


                <div class="z-3 ...">
                    <p>3</p>
                </div>
                <div class="z-2 ...">
                    <p>2</p>
                </div>
                <div class="z-1 ...">
                    <p>1</p>
                </div>

Result:

3

2

1

Display

TINT Class	CSS Property and value
none	display: none
inline	display: inline
block	display: block
inline-block	display: inline-block
flex	display: flex
grid	display: grid

Example use of display classes

( Here we add "display: inline-block")

Code:


                <div class="inline-block ...">
                    <p>1</p>
                </div>
                <div class="inline-block ...">
                    <p>2</p>
                </div>

Result:

1

2

Width & Height

TINT Class	CSS Property and value	Range
w-1	width: 1%	from 1% to 100% ( w-1, w-2, w-3, ... , w-100 )
h-1	height: 1%	from 1% to 100%( h-1, h-2, h-3, ... , h-100 )
vw-1	width: 1vw	from 1vw to 100vw( vw-1, vw-2, vw-3, ... , vw-100 )
vh-1	min-height: 1vh	from 1vh to 100vh( vh-1, vh-2, vh-3, ... , vh-100 )
full	width: 100%; height: 100vh;	from 1vh to 100vh( vh-1, vh-2, vh-3, ... , vh-100 )

Example use of width & height classes

( Here we add "width: 90%; min-height: 10vh;")

Code:


                <div class="w-90 vh-10 ...">
                    <h2>Title</h2>
                    <p>Text...</p>
                </div>

Result:

Title

Text...

Margin & Padding

Margin

TINT Class	CSS Property and value	Range
m-1	margin: 1px	from 1px to 100px ( m-1, m-2, m-3, ... , m-100 )
m-1-top	margin: 1px 0 0 0	from 1px to 100px ( m-1-top, m-2-top, m-3-top, ... , m-100-top )
m-1-right	margin: 0 1px 0 0	from 1px to 100px ( m-1-right, m-2-right, m-3-right, ... , m-100-right )
m-1-bottom	margin: 0 0 1px 0	from 1px to 100px ( m-1-bottom, m-2-bottom, m-3-bottom, ... , m-100-bottom )
m-1-left	margin: 0 0 0 1px	from 1px to 100px ( m-1-left, m-2-left, m-3-left, ... , m-100-left )
m-1-x	margin: 0 1px	from 1px to 100px ( m-1-x, m-2-x, m-3-x, ... , m-100-x )
m-1-y	margin: 1px 0	from 1px to 100px ( m-1-y, m-2-y, m-3-y, ... , m-100-y )
m-auto	margin: 0 auto

Padding

TINT Class	CSS Property and value	Range
p-1	padding: 1px	from 1px to 100px ( p-1, p-2, p-3, ... , p-100 )
p-1-top	padding: 1px 0 0 0	from 1px to 100px ( p-1-top, p-2-top, p-3-top, ... , p-100-top )
p-1-right	padding: 0 1px 0 0	from 1px to 100px ( p-1-right, p-2-right, p-3-right, ... , p-100-right )
p-1-bottom	padding: 0 0 1px 0	from 1px to 100px ( p-1-bottom, p-2-bottom, p-3-bottom, ... , p-100-bottom )
p-1-left	padding: 0 0 0 1px	from 1px to 100px ( p-1-left, p-2-left, p-3-left, ... , p-100-left )
p-1-x	padding: 0 1px	from 1px to 100px ( p-1-x, p-2-x, p-3-x, ... , p-100-x )
p-1-y	padding: 1px 0	from 1px to 100px ( p-1-y, p-2-y, p-3-y, ... , p-100-y )

Example use of width & height classes

( Here we add "margin: 0 auto; padding: 15px;")

Code:


                <div class="m-auto p-15 ...">
                    <h2>Title</h2>
                    <p>Text...</p>
                </div>

Result:

Title

Text...

Typography

TINT Class	CSS Property and value	Range
fsize-1	font-size: 1%;	from 1% to 1000% ( fsize-1, fsize-2, fsize-3, ... , fsize-1000 )
sm-fsize-1	@media screen and (max-width: 576px) { .sm-fsize-1 { font-size: 1%; }	from 1% to 1000% ( sm-fsize-1, sm-fsize-2, ... , sm-fsize-1000 )

Color

TINT Class	CSS Property and value	Range
c-cc	color: currentColor;
c-black	color: #000000;	c-black : #000000 c-white : #ffffff c-indigo : #4b0082 c-purple : #8e35ef c-pearl : #fdeef4 c-crimson : #e238ec c-magenta : #ff00ff c-red : #ff0000 c-wood : #966f33 c-orange : #f88017 c-blue : #0000ff c-green : #00ff00 c-yellow : #ffff00 c-steel : #4863a0 c-night : #0c090a c-primary : #626ed4 c-secondary : #343549 c-success : #2aa39a c-danger : #ec4561 c-warning : #f8b425 c-info : #38a5f8 c-light : #f8f8fa c-dark : #575c62 c-muted : #edecf1

Text aling

TINT Class	CSS Property and value
text-center	text-align: center;
sm-text-center	@media screen and (max-width: 576px) { text-align: center; }
text-left	text-align: left;
sm-text-left	@media screen and (max-width: 576px) { text-align: left; }
text-right	text-align: right;
sm-text-right	@media screen and (max-width: 576px) { text-align: right; }

List

TINT Class	CSS Property and value	Range
list-none	list-style: none;	none : none square : square circle : circle disc : disc decimal : decimal georgian : georgian

Anchor

TINT Class	CSS Property and value
no-deco	.no-deco a { text-decoration: none; color: currentColor; }
TINT Class	CSS Property and value
a-no-deco	text-decoration: none; color: currentColor;

Example use of Typography classes

( Here we add "list-style: none; font-size: 120%; font-size: 80%; color: #ff00ff; color: #ff0000; text-center")

Code:


                <ul class="list-none">
                    <li class="fsize-120 sm-fsize-80 c-magenta">List item1</li>
                    <li class="c-red">List item2</li>
                </ul>

Result:

List item1
List item2

Visual

Background

TINT Class	CSS Property and value	Range
bg-black	background-color: #000000;	bg-black : #000000 bg-white : #ffffff bg-indigo : #4b0082 bg-purple : #8e35ef bg-pearl : #fdeef4 bg-crimson : #e238ec bg-magenta : #ff00ff bg-red : #ff0000 bg-wood : #966f33 bg-orange : #f88017 bg-blue : #0000ff bg-green : #00ff00 bg-yellow : #ffff00 bg-steel : #4863a0 bg-night : #0c090a bg-primary : #626ed4 bg-secondary : #343549 bg-success : #2aa39a bg-danger : #ec4561 bg-warning : #f8b425 bg-info : #38a5f8 bg-light : #f8f8fa bg-dark : #575c62 bg-muted : #edecf1

Border

TINT Class	CSS Property and value	Range
b-1	border: 1px solid currentColor;	from 1px to 20px ( b-1, b-2, b-3, ... , b-20 )
b-1-top	border-style: solid; border-width: 1px 0 0 0; border-color: currentColor;	from 1px to 20px ( b-1-top, b-2-top, ... , b-20-top )
b-1-right	border-style: solid; border-width: 0 1px 0 0; border-color: currentColor;	from 1px to 20px ( b-1-right, b-2-right, ... , b-20-right )
b-1-bottom	border-style: solid; border-width: 0 0 1px 0; border-color: currentColor;	from 1px to 20px ( b-1-bottom, b-2-bottom, ... , b-20-bottom )
b-1-left	border-style: solid; border-width: 0 0 0 1px; border-color: currentColor;	from 1px to 20px ( b-1-left, b-2-left, ... , b-20-left )
b-1-x	border-style: solid; border-width: 0 1px 0 1px; border-color: currentColor;	from 1px to 20px ( b-1-x, b-2-x, b-3-x, ... , b-20-x )
b-1-y	border-style: solid; border-width: 1px 0 1px 0; border-color: currentColor;	from 1px to 20px ( b-1-y, b-2-y,b-3-y, ... , b-20-y )
b-black	bordfer-color: #000000;	bg-black : #000000 bg-white : #ffffff bg-indigo : #4b0082 bg-purple : #8e35ef bg-pearl : #fdeef4 bg-crimson : #e238ec bg-magenta : #ff00ff bg-red : #ff0000 bg-wood : #966f33 bg-orange : #f88017 bg-blue : #0000ff bg-green : #00ff00 bg-yellow : #ffff00 bg-steel : #4863a0 bg-night : #0c090a bg-primary : #626ed4 bg-secondary : #343549 bg-success : #2aa39a bg-danger : #ec4561 bg-warning : #f8b425 bg-info : #38a5f8 bg-light : #f8f8fa bg-dark : #575c62 bg-muted : #edecf1

Radius

TINT Class	CSS Property and value	Range
r-5	border: 5px solid currentColor;	from 5px to 50px ( r-5, r-10, r-15, ... , r-50 )
r-5-top	border-radius: 5px 5px 0 0;	from 5px to 50px ( r-5, r-10, r-15, ... , r-50 )
r-1-bottom	border-radius: 0 0 5px 5px;	from 5px to 50px ( r-5, r-10, r-15, ... , r-50 )
r-1-x	border-radius: 5px 0 5px 0;	from 5px to 50px ( r-5-x, r-10-x, r-15-x, ... , r-50-x )
r-1-y	border-radius: 0 5px 0 5px;	from 5px to 50px ( r-5-y, r-10-y, r-15-y, ... , r-50-y )
r50	border-radius: 50%;
r100	border-radius: 100%;

Shadow

TINT Class	CSS Property and value
shadow	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
shadow-2	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15);
shadow-3	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15);
shadow-4	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.15);
shadow-5	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.12), 0 8px 8px rgba(0, 0, 0, 0.12), 0 16px 16px rgba(0, 0, 0, 0.12);
shadow-6	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 8px 8px rgba(0, 0, 0, 0.11), 0 16px 16px rgba(0, 0, 0, 0.11), 0 32px 32px rgba(0, 0, 0, 0.11);
shadow-sharp	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 2px 2px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.15), 0 8px 8px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.05);
shadow-diffuse	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.12), 0 4px 4px rgba(0, 0, 0, 0.16), 0 8px 8px rgba(0, 0, 0, 0.2);
shadow-dreamy	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
shadow-shorter	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.11), 0 2px 2px rgba(0, 0, 0, 0.11), 0 4px 4px rgba(0, 0, 0, 0.11), 0 6px 8px rgba(0, 0, 0, 0.11), 0 8px 16px rgba(0, 0, 0, 0.11);
shadow-longer	box-shadow: 0 2px 1px rgba(0, 0, 0, 0.09), 0 4px 2px rgba(0, 0, 0, 0.09), 0 8px 4px rgba(0, 0, 0, 0.09), 0 16px 8px rgba(0, 0, 0, 0.09), 0 32px 16px rgba(0, 0, 0, 0.09);

Animation

TINT Class	CSS Property and value
animation-spin	animation: spin 0.7s linear infinite;
animation-shake	animation: shake 0.7s linear infinite;

Example use of Visual classes

( Here we add "background-color: #4b0082; border: 5px solid #ff00ff; border-radius: 15px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); animation: shake 0.7s linear infinite;")

Code:


                <div class="bg-indigo b-5 b-magenta r-15 shadow animation-shake ...">
                    <h2>Title</h2>
                    <p>Text text text....</p>
                </div>

Result:

Title

Text text text....

Flex

Flex direction

TINT Class	CSS Property and value	Range
f-col	flex-direction: column;
md-f-col	@media screen and (min-width: 768px) { .md-f-col { flex-direction: column; } }
f-row	flex-direction: row;
md-f-row	@media screen and (min-width: 768px) { .md-f-row { flex-direction: row; } }

Justify

TINT Class	CSS Property and value	Range
j-start	justify-content: flex-start;
j-center	justify-content: center;
j-end	justify-content: flex-end;
j-between	justify-content: space-between;
j-around	justify-content: space-around;
j-evenly	justify-content: space-evenly;
md-j-start	@media screen and (min-width: 768px) { .md-j-start { justify-content: flex-start; } }
md-j-center	@media screen and (min-width: 768px) { .md-j-center { justify-content: center; } }
md-j-end	@media screen and (min-width: 768px) { .md-j-end { justify-content: flex-end; } }
md-j-between	@media screen and (min-width: 768px) { .md-j-between { justify-content: space-between; } }
md-j-around	justify-content: space-around;
md-j-evenly	@media screen and (min-width: 768px) { .md-j-evenly { justify-content: space-evenly; } }

Align

TINT Class	CSS Property and value	Range
a-start	align-items: flex-start;
a-center	align-items: center;
a-end	align-items: flex-end;
a-bl	align-items: baseline;
md-a-start	@media screen and (min-width: 768px) { .md-a-start { align-items: flex-start; } }
md-a-center	@media screen and (min-width: 768px) { .md-a-center { align-items: center; } }
md-a-end	@media screen and (min-width: 768px) { .md-a-end { align-items: flex-end; } }
md-a-bl	@media screen and (min-width: 768px) { .md-a-bl { align-items: baseline; } }

Center

TINT Class	CSS Property and value	Range
center	justify-content: center; align-items: center;

Gap

TINT Class	CSS Property and value	Range
gap-5	gap: 5px;	from 5px to 50px ( gap-5, gap-10, gap-15, ... , gap-50 )
sm-gap-5	@media screen and (max-width: 576px) { .sm-gap-5 { gap: 5px; } }	from 5px to 50px ( sm-gap-5, sm-gap-10, ... , sm-gap-50 )
md-gap-5	@media screen and (min-width: 768px) { .md-gap-5 { gap: 5px; } }	from 5px to 50px ( md-gap-5, md-gap-10, ... , md-gap-50 )

Example use of Flex classes

( Here we add "display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;")

Code:


                <div class="flex f-col center gap-5 ...">
                    <h2>Title</h2>
                    <p>Text text text....</p>
                </div>

Result:

Title

Text text text....

Grid system

Flex direction

TINT Class	CSS Property and value	Range
container	display: block; width: 100%; max-width: 1170px; margin: 0px auto;
container-fluid	display: flex; flex-direction: column; width: 100%;
row	display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;
col-1	@media screen and (max-width: 576px) { .col-1 { width: 8.3333333333%; padding: 0px 1rem; } }	from 1 to 12 ( col-1, col-2, col-3, ... , col-12 )
col-sm-1	@media screen and (min-width: 576px) { .col-sm-1 { width: 8.3333333333%; padding: 0px 1rem; } }	from 1 to 12 ( col-sm-1, col-sm-2, col-sm-3, ... , col-sm-12 )
col-md-1	@media screen and (min-width: 768px) { .col-md-1 { width: 8.3333333333%; padding: 0px 1rem; } }	from 1 to 12 ( col-md-1, col-md-2, col-md-3, ... , col-md-12 )
col-lg-1	@media screen and (min-width: 992px) { .col-lg-1 { width: 8.3333333333%; padding: 0px 1rem; } }	from 1 to 12 ( col-lg-1, col-lg-2, col-lg-3, ... , col-lg-12 )
col-xl-1	@media screen and (min-width: 1200px) { .col-xl-1 { width: 8.3333333333%; padding: 0px 1rem; } }	from 1 to 12 ( col-xl-1, col-xl-2, col-xl-3, ... , col-xl-12 )

Example use of grid system classes

( Responsive grid example)

Code:


                <div class="container-fluid ...">
                    <div class="row">
                        <div class="col-12 col-md-2 ...">
                            <h2>col-sm-2</h2>
                            <p>Text text text....</p>
                        </div>
                        <div class="col-12 col-md-2 ...">
                            <h2>col-sm-2</h2>
                            <p>Text text text....</p>
                        </div>
                        <div class="col-12 col-md-4 ...">
                            <h2>col-sm-4</h2>
                            <p>Text text text....</p>
                        </div>
                        <div class="col-12 col-md-4 ...">
                            <h2>col-sm-4</h2>
                            <p>Text text text....</p>
                        </div>
                    </div>
                </div>

Result:

Title1

Text text text....

Title2

Text text text....

Title3

Text text text....

Title4

Text text text....

TINT Documentation

Getting started

How to use it

Title

Positioning

Position

Top - Right - Bottom - Left

z-index

Display

Width & Height

Title

Margin & Padding

Margin

Padding

Title

Typography

Font size

Color

Text aling

List

Anchor

Visual

Background

Border

Radius

Shadow

Animation

Title

Flex

Flex direction

Justify

Align

Center

Gap

Title

Grid system

Flex direction

Title1

Title2

Title3

Title4

More coming soon...