1cg/Untitled CSS Library RFP.md

## Untitled CSS Library RFP.md

      
    Raw
  

              Untitled CSS Library RFP.md
            
          
    Untitled CSS Library RFP

Untitled CSS Library is a CSS library that, so far as I can tell, does not exist.
It offers the following features:

It renders well out of the box with Vanilla HTML, like a classless CSS library such as pico
It takes advantage of semantic, lesser used tags such as nav, main and section to allow for more elaborate layouts
in pure HTML
It offers "High Power" classes that capture high level components in, as much as is possible, a single CSS class
It offers a set of utility classes that captures the 80/20 of libraries like tailwinds

It does not attempt to

Be super small
Offer much beyond what is mentioned above

Details

Rendering Well OOTB

There are many CSS libraries that provide an excellent rendering experience with plain HTML.  pico.css is a cannonical example.
Untitled CSS Library will, similarly, offer this functionality.
Opinionated Styling of Less Commonly Used Element

In keeping with the concept of rendering (and encouraging) semantic, vanilla CSS, Untitled CSS will render less commonly used
tags in a more opinionated manner.
For example, the main tag will act like container does in many CSS frameworks: it will auto-center and set a max-width
within it.
section tags will pad p tags within them to properly indent content
nav tags with a ul inside of it will render as a horizontal nav element.
All this without additional classes needed: Untitled CSS takes interpretive advantage of semantic HTML.
A Few High Power Component Classes

In addition to the pure-HTML styling mentioned above, Untitled CSS will provide a small number of "high power" component
classes.
The term "High Power" means that the components will not require multiple uses of classes, but rather a single class
on a parent element.  An example clarifies.
Consider the aligned form example from the excellent pure.css library:
<form class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="aligned-name">Username</label>
            <input type="text" id="aligned-name" placeholder="Username" />
            <span class="pure-form-message-inline">This is a required field.</span>
        </div>
        ...
Note that there are a total of four classes required to achieve the aligned layout.
In Untitled CSS, this will be styled like so:
<form class="aligned">
    <fieldset>
        <div>
            <label for="aligned-name">Username</label>
            <input type="text" id="aligned-name" placeholder="Username" />
            <span>This is a required field.</span>
        </div>
        ...
A single "high powered" class, aligned will be applied to the form and will flow through the entire structure without
the need for additional classes.
Similarly, we would like a card class:
<article class="card">
  <img alt="" />
  <div>
    <!-- our content in here will auto-flow now -->
  </div>
</article>
which acts like the responsive card specified here, but without any additional classes on sub-elements.
(Perhaps article becomes a card in pure HTML?)
We would like to see the following high-power CSS classes:

aligned forms
inline forms
cards
row

no need to specify columns: auto break based on # of children and width of viewport


container (?)
modal (?)
fix-to-top (?)
fix-to-left (?)

Utility Classes

Finally, for the small tweaks that make a website "feel right", we would like to offer a reasonably small number of
utility classes that allow for pragmatic adjustments of elements.
Tailwinds is an inspiration here, but take the 20 of the 80/20, simplifying things.
If you need something beyond that, we encourage people to use CSS.
RFP

We are looking for a senior CSS developer who is interested in leading this project.  Other developers are interested in
working on the project, but we do not have the CSS expertise necessary to ensure a high quality library.
The project will be open source and freely available under a BSD license.
The lead position will be modestly paid.  We have two corporate sponsors lined up, and will solicit additional corporate
and community funds for the project.
We would like to do the project in less.css
Inspiration

The following libraries provide

pico.css
purecss.css
cube.css