As I evaluated the grid code, it occurred to me that the "blade" part of the name I chose "CSS Blade" meant cutting the garbage out of CSS code ... all to achieve a minimum CSS file size. I decided to re-evaluate all the CSS code I had written to this point. All with one main question: Can I write this as classless?
And to be hyper critical of the code, I also included a re-evaluation of the normalize code. I favor "modern-normalize". I usually access that as a CDN – and it is 3.27Kb raw (1.09Kb minified version). l also looked at a few modern "normalize" projects, in particular "sanitize.css". With both, I would have to write some code to over-ride some of their opionated portions. I decided to create a new version of "modern-normalize". The changes increased the file size to 3.66Kb raw (about 1.4Kb minified). I want to emphasize that the best normalizer I have found so far is "modern-normalize.css" by Sindre Sorhus. It just works properly on modern browsers.
Now on to the re-write.
I have renamed the project from CSS Blade to Worx CSS. Just like CSS Blade, there will be two tracts to follow, one is the classless side and the second as class-light. The focus, right now, is on the classless side.
Once you start to critically look at the HTML and compare it with existing CSS code you realize that there are a lot of classes that can be eliminated with the same effect achieved as classless. I started on the classless tract when I discovered an HTML5 test page authored by cbracco. It became the roadmap to a CSS file that achieved a look that I was quite proud of. I even included my forms CSS as a classless version.
In evaluating the HTML structure needed by CSS Blade, it occurred that many of the classes already defined in CSS Blade were not really needed. If I could identify a uniqueness about the container or wrapper, I could have a classless version. That meant looking at all the possible HTML attributes for each tag. From a strategy point of view, it would be nice to find an HTML attribute common to all tags. Two attributes fit my needs, and could still be considered classless. The first: role, as in <div role="grid">; and the second: data- as in <div data-grid>. Once either of these is set, the rest all fell into place. "role" is interesting and is an attribute that has four possible uses: the main use is an an accessibility feature that indicates the "role" of the tag, particularly usefull for sight challenged users. The second use is as a development tool, for example highlighting all tags with a specific role set. The third is as an HTML construct, exactly what I want to use it for. And, it can be used for multiple items in the "role" attribute, one as a development tool, and one as an accessibility feature. They just need to be separated by a space.
"data-" is also interesting since it was designed to be used as an HTML construct. I ended up using both, well, at least giving the user the option to use either of the two. For example, to create a grid you can have:
- <div role="grid">
- <div data-grid>
either works.
At this point, I have used this strategy to create classless versions of:
- CSS Grid Layout – for responsive columns (data-grid-cols-auto or role="grid-cols-auto")
- HTML Card (data-card or role="card")
- HTML Hero section (data-hero or role="hero")
- HTML Call To Action, aka CTA, (data-cta or role="cta")
That's not all. I also have a complete forms section – even with icons on the left and icons on the right (or both, actually). This was surprisingly simple to achieve ... the uniqueness is on the <form> tag itself.
Along with the core of HTML tags, I now have classless versions of:
- Typography with (opinionated) proper spacing, sizing, and font selection. There's also the possibility of having classless title/sub-title pairs for each of the h1, h2, h3, h4, h5, h6 tags.
- Forms with all of the form elements handled: input, select, textarea and attractive input types such as checkbox, radio, file. Plus all of the HTML5 data types are accounted for including selectors (like color).
- Form icons, with icons possible in all three locations: left, right and both (left and righ)
– one note on the icons ... they use Font Awesome (I personally use only v4.7 and download via CDN). That means you define the icons as font awesome specifies and that includes classes (nothing I, or anyone else, can do about that). Other than the font awesome icons, all the rest of the CSS and placement is entirely classless. - Hero section with a center title, sub title and description section ... and with a call to action button
- CTA (call-to-action) section that is full width with a dark background with title, sub title and deciption section and call to action buttons.
- Card with optional sections: header, picture/caption, description, and footer with call to action buttons.
- CSS Grid for sticky footer. This separates an HTML page into <header>, <main>, and <footer> sections.
- CSS Grid for auto-width columns. You can use any number of columns, there is no restriction on this – however it is expected to be used up to six columns wide.
While at it, I created three of the most popular page layouts. Layouts for a three-column blog, a two-column blog, and a left (vertical) navigation bar with right contents section.
Many of the HTML components I have not seen in any classless framework.
So far I have only measured file sizes in raw versions. The Worx CSS classless files total 27.6Kb raw. Classless and class-light is 48.8Kb raw.
There is another aspect of this. With a classless framework, you end up with cleaner – and size reduced – HTML code.
The 12-column "standard" for CSS grids only made sense from the perspective of doing the calculations for portions of the 12 columns. Quite frankly, it would have made more sense with a greater number of columns ... all the way to 60 columns. Can you image, though, the size of that CSS file? The goal for Worx CSS is small ... tiny, really ... file size. Right now I have a full framework that is under 50Kb raw. The CSS Grid component in its entirety is less than 1Kb. The Grid columns module is 14 lines. The Grid sticky footer module is 18 lines. Both responsive, both work perfectly and responsive.