Introduction
The brief of Graff
Graff is a lightweight and modular CSS kit to accelerate styling. No javascript required to use Graff. It small with beautiful components and utilities, just 179kb or 23kb gzip compressed.
Component is ready to use of style for UI while utility is to modify existing components or creating custom components without touching the CSS.
Fully responsive
Graff is fully responsive. It’s be handled in utilities with add suffix @s in small screen, @m in medium screen, or @l in large screen.
<section class="grid grid-4-columns grid-2-columns@m grid-1-columns@s">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</section>
Defaultly, grid have 4 columns, but in medium screen have 2 columns and in small screen has 1 column.
Dark mode support
Defaultly, Graff in light mode. You can turn on the dark mode with add dark class on <html> tag.
<!DOCTYPE html>
<html class="dark">
<head></head>
<body></body>
</html>