Today, I am unveiling a project I've had sitting in the shop for a while... Spark!
https://github.com/CalinZBaenen/Spark
What is Spark?
Spark is an easy-to-use CSS library that takes advantage ov HTML's data-
-attributes, and some default attributes, to easily apply complex or boilerplate styling to an element, making it easier to focus on just the layout.
Here is an example ov how I made the table shown in this post's cover-image.
<table>
<caption>Colors</caption>
<tr>
<td data-cutout></td>
<th scope="col">Red</th>
<th scope="col">Green</th>
<th scope="col">Blue</th>
</tr>
<tr>
<th scope="row">Lightened</th>
<td style="background-color:#FF8080;"></td>
<td style="background-color:#80FF80;"></td>
<td style="background-color:#8080FF;"></td>
</tr>
<tr>
<th scope="row">Normal</th>
<td style="background-color:#FF0000;"></td>
<td style="background-color:#00FF00;"></td>
<td style="background-color:#0000FF;"></td>
</tr>
<tr>
<th scope="row">Darkened</th>
<td style="background-color:#800000;"></td>
<td style="background-color:#008000;"></td>
<td style="background-color:#000080;"></td>
</tr>
</table>
As you can see, the first cell is... well... cut out, and you notice that I am using data-cutout
.
data-cutout
's job is to make a table-cell act as if it were not present by making none ov its content display and hiding itself, which allows you to do some pretty cool things, like making pixel-art ov Mario:
(Yes, this is actually an HTML table - you can see it in table.html
file in the examples
directory.)
I'm hoping my library will find some merit, somewhere and will catch on...
... or at least inspire newcomers to HTML (orwith CSS) to dive deeper.
Anyways, that's all for today.
Cheers!
Top comments (0)