Aegis framework CSS Library
Kayros is a simple CSS library featuring common utilities such as CSS normalization, a grid system and common components such as modal windows, hero headers and even global page navigation.
Kayros is built using PostCSS and follows BEM conventions.
``css
:root {
--kayros_grid-gutter: 1.5rem;
--kayros_breakpoint-phone: 480px;
--kayros_breakpoint-phablet: 601px;
--kayros_breakpoint-tablet: 992px;
--kayros_breakpoint-desktop: 1200px;
--kayros_breakpoint-desktop-large: 1900px;
--kayros_breakpoint-retina: 2500px;
--kayros_breakpoint-4k: 3840px;
--kayros_breakpoint-5k: 5000px;
--kayros_breakpoint-8k: 8000px;
}
`
`css
/ Extra Small Devices, Phones (480px) /
@media screen and (min-width : 30em) {}
/ Medium Screens, Phablets (601px) /
@media screen and (min-width: 37.56255em) {}
/ Medium Devices, Tablets (992px)/
@media screen and (min-width: 62em) {}
/ HD Screen, Large Devices, Wide Screens, Desktop (1200px) /
@media screen and (min-width: 75em) {}
/ Full HD Screen, Large Devices, Wide Screens, Large Desktops (1920px) /
@media screen and (min-width: 120em) {}
/ Retina Screen , Large Devices, Wide Screens(2560px) /
@media screen and (min-width: 160em) {}
/ 4k Screens, Large Devices, Wide Screens (3840px) /
@media screen and (min-width: 240em) {}
/ 5k Screens, Large Devices, Wide Screens (5000px) /
@media screen and (min-width: 312.5em) {}
/ 8k Screens, Large Devices, Wide Screens (8000px) /
@media screen and (min-width: 500em) {}
``