For a long time I’ve wanted to like functional CSS systems like Tachyons and Tailwind. The concepts behind them are really appealing to me. Using short names for CSS property:values saves a lot of typing (hello Emmet, nice to see you again!), but more importantly by limiting the amount of design choices you can make,…
SenCSs 0.5: Forms Ahoy!
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.
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.
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!
This article was originally published on The Human In The Machine. I am not a big ‘productivity’ person. I mostly get by jotting down notes and keeping lists (for whatever I’m doing at the moment, or more general things-to-do-in-the-near-future lists.) It’s manageable enough to not have to adopt a Formal Productivity System. I’m pretty happy about…
One term that keeps coming up in the design community as a stand-in for layout is “box model”, for example in “Why don’t design tools have the box model?” The CSS Box model is a well-defined term though, and it does not do layout. If we keep referring to our imaginary perfect layout system in design…