Averroes Digital Islamic School FrontEnd Framework / CDN By zulldevv
this is enchanted bootstrap 5 front-end framework with some new feature, only with cdn u can adjust many thing in bootstrap like custom primary color or secondary, font, and extended value of many classes such as margin, padding, font size, gap, and u can explore many new feature there, happy coding!
Put this on your html to use this cdn
main CSS :
<link rel="stylesheet" href="https://zulldevv.github.io/ave/dist/css/ave.min.css">
main JS :
<script src="https://zulldevv.github.io/ave/dist/js/ave.min.js">
Basic of using this cdn is u just need to add a :root to your css example:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://zulldevv.github.io/ave/dist/css/ave.min.css">
<link rel="stylesheet" href="yourstyle.css">
<title>Your title</title>
</head>
<body>
<script src="https://zulldevv.github.io/ave/dist/js/ave.min.js"></script>
</body>
</html>
CSS :
:root {
--primary: #e082d1;
--primary-rgb: 224, 130, 209;/* u need to add primary rgb too (just the number) */
--primary-emphasis: #bc3fa7;
--primary-table-bg: #edb8e4;
--primary-table-active-bg: #e09cd5;
}
No. | Root | Replaces | About | Value |
---|---|---|---|---|
1 | ` --primary ` | All primary color | Replace bootstrap original primary color with your own color | Hex / another color format |
1.1 | ` --primary-rgb ` | All primary rgb color | u need to add primary rgb of your primary color too ( just the number ) | RGB |
1.2 | ` --primary-emphasis ` | Primary emphasis color | an optional emphasis color of your primary color | Hex / another color format |
1.3 | ` --primary-table-bg ` | primary table color | chance your primary table color | Hex / another color format |
1.4 | ` --primary-table-active-bg ` | primary table color | on hover primary table color | Hex / another color format |
1.5 | ` --primary-hover ` | primary button hover color | u need to chance this color if you're using primary button | Hex / another color format |
1.6 | ` --primary-border ` | primary button border color | u need to chance this color if you're using primary button | Hex / another color format |
1.7 | ` --primary-active ` | primary button active color | u need to chance this color if you're using primary button | Hex / another color format |
2 | ` --secondary ` | All secondary color | Secondary color used for background or text, same usage as primary color | Hex / another color format |
3 | ` --tertiary ` | third color if u want to use it | Color used for informational messages or UI elements | Hex / another color format |
4 | ` --focus-ring ` | focus ring color | the default is blue like orginal | RGB |
No | Class | Style |
---|---|---|
1 | m-11 | margin : 9rem |
2 | m-20 | margin : 18rem |
3 | mt-20 | margin-top : 18rem |
4 | me-20 | margin-right : 18rem |
5 | mb-20 | margin-bottom : 18rem |
6 | ms-20 | margin-left : 18rem |
7 | mx-20 | margin-left : 18rem margin-right : 18rem |
8 | m-20 | margin : 48rem |
9 | ms-20 | margin-left : 48rem |
No | Class | Style |
---|---|---|
1 | p-11 | padding : 9rem |
2 | p-20 | padding : 18rem |
3 | pt-20 | padding-top : 18rem |
4 | pe-20 | padding-right : 18rem |
5 | pb-20 | padding-bottom : 18rem |
6 | ps-20 | padding-left : 18rem |
7 | px-20 | padding-left : 18rem padding-right : 18rem |
8 | p-50 | padding : 48rem |
8 | ps-50 | padding-left : 48rem |
No | Class | Style | About |
---|---|---|---|
1 | fs-1 | font-size : 1rem | IMPORTANT THING!!, we chance bootstrap fs format so higher number more bigger font size too |
2 | fs-2 | font-size : 1.25rem | |
3 | fs-3 | font-size : calc(1.275 + 0.3vw !important) | |
4 | fs-25 | font-size : calc(1.375 + 11vw !important) | |
5 | ff-custom-1 | font-family : var(--ff-custom-1) | u can use --ff-custom-1 to make your own font family instead font family from bootstrap, it just ff-serif and the original font is sans-serif |
6 | ff-custom-2 | font-family : var(--ff-custom-2) | |
7 | ff-custom-3 | font-family : var(--ff-custom-3) | |
8 | fs-max | font-size : var(--fs-max, 18rem) !important | if u thing the fs is doesnt enough u can make your size by give root --fs-max |
No | Class | Style |
---|---|---|
1 | h-5 | height : 5% !important |
2 | h-10 | height : 10% !important |
3 | h-15 | height : 15% !important |
4 | h-25 | height : 25% !important |
5 | h-100 | height : 100% !important |
No | Class | Style |
---|---|---|
1 | vh-5 | height : 5vh !important |
2 | vh-10 | height : 10vh !important |
3 | vh-15 | height : 15vh !important |
4 | vh-25 | height : 25vh !important |
5 | vh-100 | height : 100vh !important |
No | Class | Style |
---|---|---|
1 | w-5 | width : 5% !important |
2 | w-10 | width : 10% !important |
3 | w-15 | width : 15% !important |
4 | w-25 | width : 25% !important |
5 | w-100 | width : 100% !important |
No | Class | Style |
---|---|---|
1 | vw-5 | width : 5vw !important |
2 | vw-10 | width : 10vw !important |
3 | vw-15 | width : 15vw !important |
4 | vw-25 | width : 25vw !important |
5 | vw-100 | width : 100vw !important |
No | Class | Style |
---|---|---|
1 | gap-1 | gap: 0.25rem !important |
2 | gap-2 | gap: 0.5rem !important |
3 | gap-11 | gap: 9rem !important |
4 | gap-20 | gap: 18rem !important |
ROW GAP | ||
5 | row-gap-1 | row-gap: 0.25rem !important |
6 | row-gap-2 | row-gap: 0.5rem !important |
7 | row-gap-11 | row-gap: 9rem !important |
8 | row-gap-20 | row-gap: 18rem !important |
COLUMN GAP | ||
9 | column-gap-1 | column-gap: 0.25rem !important -moz-column-gap: 0.25rem !important; |
10 | column-gap-2 | column-gap: 0.5rem !important -moz-column-gap: 0.5rem !important; |
11 | column-gap-11 | column-gap: 9rem !important -moz-column-gap: 9rem !important; |
12 | column-gap-20 | column-gap: 18rem !important -moz-column-gap: 18rem !important; |
Class | Style | About |
---|---|---|
col-y-13 | flex : 0 0 auto width : 100% |
Bootstrap grid system / column with odd column so we can make an elemnt center with this odd column, all function and class same as bootstrap normal grid system, even the responsive too. |
col-y-sm-13 | flex : 0 0 auto width : 100% |
|
col-y-md-13 | flex : 0 0 auto width : 100% |
|
col-y-lg-13 | flex : 0 0 auto width : 100% |
|
col-y-xl-13 | flex : 0 0 auto width : 100% |
|
col-y-xxl-13 | flex : 0 0 auto width : 100% |
No | Class | Style |
---|---|---|
1 | turn-5 | transform : rotate(5deg) |
2 | turn-10 | transform : rotate(10deg) |
3 | turn-90 | transform : rotate(90deg) |
4 | turn-180 | transform : rotate(180deg) | 5 | turn--5 | transform : rotate(-5deg) | </tr>
6 | turn--10 | transform : rotate(-10deg) |
7 | turn--90 | transform : rotate(-90deg) |
8 | turn--180 | transform : rotate(-180deg) |
No | Class | Style |
---|---|---|
1 | turn-5 | transform : rotate(5deg) |
u can use font awesome icons too, in this cdn we import font awesome css cdn u can use even the max pro. enjoy your free pro icons, to see whats icons are available u can visit offcial font awesome website here
ADDED | ||
---|---|---|
No | About | value |
1 | margin class extended by 15 classes available until m-20 u can also use breakpoint to make these margins responsive | m-20 |
2 | padding class extended by 15 classes available until p-20 u can also use breakpoint to make these paddings responsive | p-20 |
3 | font size extended available until fs-25 | fs-25 |
4 | adjustable primary, secondary and extra tertiary color palette u can adjust by adding root css variable | --primary |
5 | odd column for who need to make an element center with grid system | col-y-12 |
6 | turn classes | turn-90 |