Kilian Valkhof

Front-end & user experience developer, Jedi.

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:

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!

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Wow, this is some pretty nice work you’ve done.

    My biggest problem with Meyer reset is that it kills all the formatting, and this restores all of it.

    As I read through the CSS, all of it, the values, the settings, etc., just feel right.

    I’m going to try this on my next project.

  2. CharlesChipy

    In my opinion the form part looks weird. Don’t know exactly what it is. I see a bunch of lightgrey boxes and some text floating around it. What about the buttons and dropdown-menu.. is that amount of whitespace around the text normal/intentional?

Be the first to know about new releases!

Newsletter subscribers will be the first to know about new apps I release or new articles I write, here or elsewhere.

Low-volume. I will only email you when I have something exciting to share.