SenCSs 0.5: Forms Ahoy!

SenCSs, 24 December 2008, 3 minute read

Slowly, I’ve been working on SenCSs 0.4.7 and subsequently 0.5. Two weeks ago Smashing magazine linked to my original article and I decided to take some time out to finish it all up and get the release out.

For reminders

SenCSs isn’t a framework like other CSS frameworks. I don’t want a CSS framework littered with silly classes that click layouts into a pre-set grid for me. However, I do wants something that takes care of the rest. Fonts, font-sizes, paddings, margins, colors, tables, lists, headers, blockquotes and what more. All the stuff thats almost the same in every project, but that you keep writing again and again …and again. SenCSs handles that for you. And nothing more.

Since I use SenCSs, I shaved about 50% from my own time spent on front-end development during projects. Since I released it, it’s been downloaded over 3000 times already!

The 0.5 Changelog:

fixed problematic styling of tt/kbd/code and sub/sup in firefox and ie6 + 7 on windows
removed search form styling, horizontal description lists first-line style
improved firstParagraph:first-letter
many form styling improvements
removed changelogs from the SenCSs file
start made for @CSSDOC style comments

Cleanup and fixes!

Skimming through the first three: Thanks to Bert Visser, I got fixes for my monospace fonts and sub/sup elements, which have been problematic since 0.4. There are tiny problems with cross-browser and cross-operating system font rendering differences (Firefox on Linux, Safari everywhere), which I will probably write about later. The :first-letter received additional margin settings to better fit with the paragraph.

I have removed the styling for search forms, the first:line and the horizontal definition lists. The first two were too much code compared to their usefulness. The horizontal definition list was remove because it was very problematic: Per specification, you can have an unlimited list of consecutive <dt> followed by an unlimited list of consecutive <dd>. All in all, it’s easier to just build this with your own content in mind, when you need it.

Forms: There be dragons!

Forms are hard, which is probably why pretty much all other CSS frameworks shy away from it. They are right, because it’s a hell. I went through quite a couple of different styling “systems” before settling on this one, tweaking it and tweaking it. And there is still a lot of tweaking to do.

That means that what SenCSs currently offers isn’t definitive. It’s the first step in the right direction. It’s a starting point for your own form styling. It’s very near to adhering tot the vertical rhythm in firefox, opera and internet explorer 6+7. Omitted from this list is Safaili, which for reasons unknown adds space between the top of the form element and the top of the fieldset element.

If you take a look at the SenCSs example file, You might think that they don’t very much seem to adhere to a vertical rhythm. This is, in all but Firefox 3, there a slight pixel differences. Another large contributing factor is that elements have a (supposed) height of 27px, which is 1.5 times the baseline (18px). This means that each second element will align correctly with the lines, and otherwise it will align in the middle of the lines. This is the best I can come up with, both giving form elements the space they need and adhering to a vertical rhythm.

Feedback?

As I said, forms are not definitive. I am sure that many more of you have ideas about cross-browser form styling, and I’m sure that of those there are quite some that are better than mine. So please download it, try it out in your next project or just look at the file and take what you like, and let me know how it goes!

Oh, and before I forget. To everyone: Merry Christmas!