Colors
i
Play with colors and color variants in the config file.
{state}:{color}-{fill|text|border}:{variant}
Fill Colors
Pick a variant and you're good to go. The base variant is 500. This system follow google's material colors guide.
.red-fill:50.hover:red-fill
.red-fill:100
.red-fill:200
.red-fill:300
.red-fill:400
.red-fill
.red-fill:600
.red-fill:700
.red-fill:800
.red-fill:900
.green-fill:50.active:green-fill
.green-fill:100
.green-fill:200
.green-fill:300
.green-fill:400
.green-fill
.green-fill:600
.green-fill:700
.green-fill:800
.green-fill:900
.blue-fill:100
.blue-fill:200
.blue-fill:300
.blue-fill:400
.blue-fill
.blue-fill:600
.blue-fill:700
.blue-fill:800
.blue-fill:900
.gray-fill:50
.gray-fill:100
.gray-fill:200
.gray-fill:300
.gray-fill:400
.gray-fill
.gray-fill:600
.gray-fill:700
.gray-fill:800
.gray-fill:900
Text Colors
Same technique as fill but these change text color instead of background.
.red-text:50
.red-text:100
.red-text:200
.red-text:300
.red-text:400
.red-text
.red-text:600
.red-text:700
.red-text:800
.red-text:900
.green-text:50
.green-text:100
.green-text:200
.green-text:300
.green-text:400
.green-text
.green-text:600
.green-text:700
.green-text:800
.green-text:900
.blue-text:50
.blue-text:100
.blue-text:200
.blue-text:300
.blue-text:400
.blue-text
.blue-text:600
.blue-text:700
.blue-text:800
.blue-text:900
.gray-text:50
.gray-text:100
.gray-text:200
.gray-text:300
.gray-text:400
.gray-text
.gray-text:600
.gray-text:700
.gray-text:800
.gray-text:900
Border Colors
Same technique as fill and text but these change border color. Ex: .b{l|r|t|b|none}-{size}:{variant} .{color}-border
Gradient Colors
Gradient classes are generated by the index number in the config file and it starts from .grad-0. Ex: .grad-{index}
Fonts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, beatae?