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;
}
- now u can make your own primary, secondary, and tertiary color by your self
-
Extended margin until 50 class, all margin same as bootstrap 5 margin but its extended by 45 class until m-50 and have responsive break point too
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 : 18rem8 m-20 margin : 48rem 9 ms-20 margin-left : 48rem -
Extended padding until 50 class, all padding same as bootstrap 5 padding but its extended by 45 class until p-50 and have responsive break point too
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 : 18rem8 p-50 padding : 48rem 8 ps-50 padding-left : 48rem -
Adopted from web trend design now, the text is more large and we think bootstrap font size it doesnt enough so we extend fs until 20 classes, and also custom font family u can use, --ff-custom-1 until 3
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 -
Modified all bootstrap height like h class and also vh.
Height classes.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
Vertical height classes.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 -
Modified all bootstrap width like w class and also vw.
Width classes.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
Viewport width classes.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 -
Need more gap value? now u sing correct cdn, we modified bootstrap normal gap, column gap, and also row gap
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;
u just need to add :root to your own css
this cumtom properties:
| No. | Root | Replaces | About | Value |
|---|---|---|---|---|
| 1 |
|
All primary color | Replace bootstrap original primary color with your own color | Hex / another color format |
| 1.1 |
|
All primary rgb color | u need to add primary rgb of your primary color too ( just the number ) | RGB |
| 1.2 |
|
Primary emphasis color | an optional emphasis color of your primary color | Hex / another color format |
| 1.3 |
|
primary table color | chance your primary table color | Hex / another color format |
| 1.4 |
|
primary table color | on hover primary table color | Hex / another color format |
| 1.5 |
|
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 |
|
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 color | the default is blue like orginal | RGB |
-
some people have problem when using row and column and wanna make a center of it, so we make odd column which the col is 13 so u can make an element center here is example :
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% -
Need class to turn your element? we provide turn classes by rotate it multiple by 5 degress from turn-5 until turn-180, there is negative value too : turn--5
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) 6 turn--10 transform : rotate(-10deg) 7 turn--90 transform : rotate(-90deg) 8 turn--180 transform : rotate(-180deg) -
bootstrap only have 5 breakpoint which is sm, md, lg, xl, and xxl so we extend the breakpoint until 2xl for 2k - 4k resolution
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 |