DEV Community

Cover image for Announcing Spark: an easy-to-use CSS library for complex styles.
Calin Baenen
Calin Baenen

Posted on • Edited on

Announcing Spark: an easy-to-use CSS library for complex styles.

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>
Enter fullscreen mode Exit fullscreen mode

*{An image of a table with colors in it.}*

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:

*{An image of an HTML table made to resemble 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.

Thanks for reading!
Cheers!

Top comments (0)