What is Caster framework
Caster is the first Armenian framework that shortens your CSS and JS code. It works according to the following logic:
a special class has been created names that perform various functions, you insert the Caster link into your HTML file and give your blocks the names of these classes.
How to link Caster to an HTML file
There are 2 important files that need to be attached to HTML, one is CSS, the other is JS, without adding them nothing will work
CSS
This is a copy to paste the HTML file < head> in the tag
< link rel ="stylesheet " href ="https://gormkrtchyann.github.io/caster/cdn/caster.css ">
Copy
JS
This is a copy to paste the HTML file < body> tags
< script src ="https://gormkrtchyann.github.io/caster/cdn/caster.js "> < /script >
Copy
Code Names
Container
cont Width 95%, distance from top and bottom sides 30px, aligned center
cont-s Width 80%, distance from top and bottom sides 30px, aligned center
cont-m Width 90%, distance from top and bottom sides 30px, aligned center
cont-x Width 0%, distance from top and bottom sides 30px, aligned center
cont-xs Width 0%, distance from top and bottom sides 10px, aligned center
cont-xm Width 0%, distance from top and bottom sides 20px, aligned center
cont-y Width 95%, distance from top and bottom sides 0px, aligned center
cont-ys Width 80%, distance from top and bottom sides 0px, aligned center
cont-ym Width 90%, distance from top and bottom sides 0px, aligned center
FlexBox
flex display: flex
jc-fs justify-content: flex-start, aftomat display: flex
jc-fe justify-content: flex-end, aftomat display: flex
jc-c justify-content: center, aftomat display: flex
jc-sb justify-content: space-between, aftomat display: flex
jc-sa justify-content: space-around, aftomat display: flex
jc-se justify-content: space-evenly, aftomat display: flex
fd-r flex-direction: row, aftomat display: flex
fd-rr flex-direction: row-reverse, aftomat display: flex
fd-c flex-direction: column, aftomat display: flex
fd-cr flex-direction: column-reverse, aftomat display: flex
fw-nw flex-wrap: nowrap, aftomat display: flex
fw-w flex-wrap: wrap, aftomat display: flex
fw-wr flex-wrap: wrap-reverse, aftomat display: flex
ai-s align-items: stretch, aftomat display: flex
ai-c align-items: center, aftomat display: flex
ai-fs align-items: flex-start, aftomat display: flex
ai-fe align-items: flex-end, aftomat display: flex
ai-b align-items: baseline, aftomat display: flex
ac-s align-content: stretch, aftomat display: flex
ac-fs align-content: flex-start, aftomat display: flex
ac-fe align-content: flex-end, aftomat display: flex
ac-c align-content: center, aftomat display: flex
ac-sb align-content: space-between, aftomat display: flex
ac-sa align-content: space-around, aftomat display: flex
ac-se align-content: space-evenly, aftomat display: flex
Alignment
vhc aligns the middle vertical and horizontal but when the content should be in the center of the screen
dfc-x aligns the middle vertical and horizontal and the blocks in it are arranged horizontally
dfc-y aligns the middle vertical and horizontal and the blocks in it are arranged vertical
Links
al removes decoretion and turns the color black
Texts
Here you can write all h for all text tags and blocks as a class
h1 the biggest header, 32px, also has a rinsponsivity (sensitivity to screens)
h2 the largest header version 2, 25px, also has a rinsponsivity (sensitivity to screens)
h3 the medium size header, 19px, also has a rinsponsivity (sensitivity to screens)
h4 the medium size header, 16px, also has a rinsponsivity (sensitivity to screens)
h5 the small size header, 14px, also has a rinsponsivity (sensitivity to screens)
h6 the small size header, 11px, also has a rinsponsivity (sensitivity to screens)
There are also large letter sizes for all text tags and blocks
fs-s the smallest size of this series, but larger than headers, 35px, also has a rinsponsivity (sensitivity to screens)
fs-m the average size of this series, but larger than headers, 45px, also has a rinsponsivity (sensitivity to screens)
fs-l the largest size of this series and the largest of headers is 55px, also has a rinsponsivity (sensitivity to screens)
HTML tags have also been created that add design to the text
< td-c> < /td-c> gives the text written inside this tag the following appearance Text
You can change the colors of this tag design by adding these classes to the tag blue, green, yellow, orange, purple, white, black
< td-r> < /td-r> gives the text written inside this tag the following appearance Text
You can also change the colors of this tag design by adding these classes to the tag blue, green, yellow, orange, purple, white, black
Buttons
All buttons get cursor: pointer function, padding, :hover, shadow
btn-n Padding is 7px on the top and bottom 30px on the left and right btn-n
btn-m Padding is 10px on the top and bottom 40px on the left and right btn-m
btn-l Padding is 15px on the top and bottom 50px on the left and right btn-l
btn Padding is 8px on the top and bottom 30px on the left and right, orange btn
btn-cr Padding is 8px on the top and bottom 30px on the left and right, red btn-cr
btn-cb Padding is 8px on the top and bottom 30px on the left and right, blue btn-cb
btn-cg Padding is 8px on the top and bottom 30px on the left and right, green btn-cg
btn-c0 Padding is 8px on the top and bottom 30px on the left and right, black btn-c0
btn-cf Padding is 8px on the top and bottom 30px on the left and right, white btn-cf
btn-sky Padding is 8px on the top and bottom 30px on the left and right, blue and purple gradient btn-sky
btn-fier Padding is 8px on the top and bottom 30px on the left and right, red and orange gradient btn-fier
btn-forest Padding is 8px on the top and bottom 30px on the left and right, 2 shades of green gradient btn-forest
btn-sea Padding is 8px on the top and bottom 30px on the left and right, 2 shades of blue gradient concentrated in the center btn-sea
Mobile Menu
Here all mobile scroll menus disappear
mobile-open This is the button that should open the menu, give this class a name in the < div> tag. / Main view
mobile-open bars-short Another option
mobile-open bars-filter Another option
mobile-open bars-stag Another option
A button that has the original black color that you can change by writing it in a css file .mobile-open div{background: #fff;}
mobile-close This is the menu close button
In the original black color that you can change by writing it in a css file .mobile-close div{background: #fff;}
mobile-menu This is the skeleton of the mobile menu
How to build a mobile menu
mobile-open you can put the block where you want.
Mobile Menu Option 2
Here, instead of numbers, it is advisable to insert icons