Patches
A way to make styles easy
By a 12 year old student programmer👦
If you ever visited a website with a pattern, you'll know this. Patterns like this-
Now this requires nothing more than adding a class...with patches
You can make everything-
- Squares
- Rhombuses
- Triangles
- Pentagon
- Hexagon
- Heptagon
- Octagon
- Nonagon
- Decagon
- Circles
- Stars
...and much more
With nice looking animations 😃😃
And also 'cause I know writing CSS is 😴
This is the true essence of PATCHES.
Docs
Create a waffle 🥪😋
First note it is not only to create goodies. It was created to make WONDERFUL grid designs with cool animations
Step 1: Create a HTML file
HERE
Step 2: Download and link the CSS file you can findStep 3: In your HTML, type the following code(make sure you use emmet)
<div class="grid"></div>
Inside it, write the emmet code
(.squares)*64
Now you'll have a square grid like this-
Step 4: Now let's make it like a circle
In the div of class of grid, add the class circ
to make it a circle
Step 5: Make the waffle color delicious🤤
In the CSS in :root
change the colors like this-
:root {
--background-color: #c9a52c;
--rows: 8;
--columns: 8;
--width: 15rem;
--height: 15rem;
--gap: 4%;
--color: none;
--gradient-color: linear-gradient(to right bottom, #d2691e, #a52a2a);
}
Think it's ready!!!
We can also make it rotate, shape it like a triangle, everything you can IMAGINE.