This is the conceptualized syntax for Spark-CSS, which is already well in development:
<header data-fullwidth data-flow="flex row evenly-spaced-children">
<a href="/documentation/">Documentation</a>
<a href="/demos/">Demos</a>
<!-- ... -->
</header>
<main data-flow="flex col">
<section>
<h2>First Section</h2>
<p>Lorem ipsum.</p>
<p>This webpage is for testing purposes only!</p>
</section>
<section>
<h2>Text Styling</h2>
<p data-textstyle="justified">
Today, I just found out that Spark has a lot of potential — thanks to all the unique 'marker attributes', adjusting the styling of an
element has never been easier.<br/>
This text <u>should</u> be justified...
</p>
<p>This text has an <span data-textstyle="s u o">underline, strikethrough, and overline.</span>.</p>
</section>
</main>
The library, and, by extension, its syntax, is meant to make replacing trivial, boilerplate CSS (and certain HTML styling elements) with easy to read data-*
attributes.
The attributes themselves are named in a way that attempts to be intuitive and concise; the values ov the attributes are meant to provide a decent amount ov flexibility, and, in some cases, work together to create something.
For example, take the data-flow="flex row"
, which represents a flex-container that has a flex-direction
ov row
.
Why isn't it flex-row
? /rt
Well, row
(and col
) can both be used with a grid
flow instead; using a grid with row
or col
sets the grid-auto-flow
property to row
or column
respectively.
Another thing about this library is that it aims to work on as many browsers as possible... even the outdated ones that no one uses anymore, such as Internet Explorer!
For browsers that don't support certain things, sensible fallbacks are provided.
Here's a snippet ov the CSS:
*[data-flow~="flex"] {
display:inline-block;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
With all this information, I ask this: what do you (all) think ov my CSS library and its syntax? Does the idea seem promising?
Cheers!
Top comments (0)