Kilian Valkhof

Front-end & user experience developer, Jedi.

Introducing SenCSS

CSS & HTML, SenCSs, 16 June 2008

SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.

Check out The SenCSs homepage for the latest version and a good overview of the capabilities of SenCSs! Since this blog post, SenCSs has progressed to version 0.4.6, with 0.5 just around the corner :)

SenCSS 0.4

SenCSS in it’s current form is just at 0.4, But I feel it’s already very much usable. Check out the Google code project for the latest versions.The project now lives on github: Sencss on Github.

What does it do?

Truth be told, SenCSS is still very much in development, it’s missing features and has some bugs. However, here is what it does:

Perhaps more importantly, this is what it doesn’t (and won’t) do:

How’d it come to be

SenCSS was developed mostly for myself. I noticed that the stuff common to most of my designs and projects wasn’t the layout, and thus all layout CSS frameworks had very little use for me (I’d be writing exceptions all day, no thanks!). However, There was a lot to gain from a smarter CSS Reset, vertical rhythm and a set of often used styles. Basically I wanted something that i could drop it, start working on my layout and fine tune when the layout was finished.

CSS Reset

Obviously, there has been some discussion about a CSS Reset. I always use one, because it makes my work much easier. However I am aware of the waste of resources of “resetting your reset” later on with your own styles. So SenCSS has a reset (based on Eric Meyer‘s CSS reset, with Paul Chaplin‘s addition), But I took great care in making sure that I wasn’t resetting my reset. So, for example, you won’t find the h1h6, p etc. declarations in the CSS reset at top. We define those styles, later.

Vertical rhythm

Something I very much enjoy and try to use in all my projects is setting a vertical rhythm, so this just had to be in there. Of course it’s all em‘d so if 12px with a 18px line height doesn’t suit you, you can pick a different scale.

Sadly, There are some bugs here. In Opera and Safari, the pre, code, kbd and tt elements, using courier, and the sub and sup elements seriously mess up the vertical rhythm and I haven’t found a fix for it, yet.

Forms

I’m not sure what the developers where drinking when they implemented forms in browsers, but I’m sure it wasn’t orange juice. I’ve refrained from doing any styling here, because it’s near impossible to do so correctly, scalable and cross-browser. So what you get is this: Regular, vertical forms, and styles for horizontal forms and search forms, utilising the same, minimal HTML (Check the example). I’ll make this better in next versions, because forms is an area where you can get a tremendous amount of benefit from standardised styles.

Typography

I consider this pretty important, and so next to declaring fonts for windows, mac and linux, setting a vertical rhythm and using a scale in my headers (as close as possible to the browser’s regular rendering), I also added in typographic niceties as pretty ampersands and pretty quotes.

Base styles

I have two types of styles: Styles with semantic class names, and styles with obnoxious class names to force you to change them to something applicable in your situation. Right now I’m a bit short on these base styles, I assume it’s something that will grow with time. I have asides, message styles (error, notice, success) and styling for the first paragraph of an article.

Onwards

There are a number of things that I want to add to SenCSS in the near future:

But I’m open to suggestions, so if you have good ideas, fire away in the comments!

Check out

And let me know what you think!

If you want to contribute, that’s great! :D Let me know in the comments and sign up at the Google code project :)

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. Ooh, very interesting.

    I’ve been keeping an eye on the CSS reset argument for quite some time, and this is the most interesting and well crafted solution that I’ve found to date.

    I can’t wait to see it tightened up and refined even more!

  2. Thanks a lot, the forms section is very useful for us :)

  3. Its a nice set, but somewhere in your list of stylings for the various HTML elements the line height is getting off, so by further down the page, things are really funky. I do like the inclusion of the error, notice, and success notice boxes, as these kinds of things are becoming more and more common on sites.

  4. Hey Jon, Thanks for you comment! I’m aware of this, it’s to do with different fonts and sub/super styling, I mentioned it in the article under vertical rhythm :) .

  5. Is killing my eyes with a tiny font a design goal of SenCSS?

  6. @Kilian
    Well done! I’m so glad to see more CSS resets and frameworks emerging, and all the thought and discussion surrounding them.
    Cheers!

  7. I’ve never been a big fan of resets and frameworks. I think they’re bloated by nature and not exactly worth the effort. But that’s just me. Nice work on simplifying the process :)

  8. […] Introducing SenCSS | KilianValkhof.com – A new CSS framework focusing on the repeatable parts. This entry was written by Nina, posted on June 16, 2008 at 11:04 am, filed under Miscellany and tagged css, webdev. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « To The Best Dad In The World […]

  9. At first I could not differentiate between normal CSS and SenCSS. But going into details I could see some difference. May be I’m not into this too much.

    I will be following up this article for much more details. Thanks.

  10. Tejas

    Wonderful! Keep sharing such information. Thanks

  11. […] Introducing SenCSS | KilianValkhof.com (tags: css framework) […]

  12. […] SenCSS – CSS Framework […]

  13. Rick

    There is a possible fix for the monospaced fonts on alistapart.com
    http://www.alistapart.com/articles/howtosizetextincss/

  14. Rick, thank you for the article! I’m afraid the problem is far more subtle though (The article’s problem is in safari 2, mine is in safari 3 and opera 9.25) Nevertheless I will find a fix for it, hopefully in the next version, even.

  15. This is very interesting, Kilian. I will try it in my next project.
    Especially the vertical rhythm part sounds real good. I’ve never been very good at that, so hopefully your framework will help me with it. :)

    Keep up the good work!

  16. […] that i could drop it, start working on my layout and fine tune when the layout was finished. Introducing SenCSS | KilianValkhof.com Sphere: Related […]

  17. […] è un piccolo framework per fogli di stile, scritto da Kilian Valkhof principalmente per uso personale: rappresenta un’evoluzione dei vari sistemi di CSS Reset […]

  18. Great work on SenCSS so far, I’m looking forward to see how you manage tables etc. in future editions.

    One quick not to care about. I see you use the shorthand font-size/line-height. However, that one is not supported by Safari 2. So your vertical rhythm breaks in that browser. The solution is to declare the line-height property alone. See also the bugreport on Quirksmode.org.

  19. […] SenCSS – SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard […]

  20. […] SenCSS – SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard […]

  21. […] Introducing SenCSS | KilianValkhof.com SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset. (tags: kilianvalkhof.com 2008 mes5 dia29 at_home CSS reset framework) […]

  22. […] 23- Introducing SenCSS […]

  23. […] SenCSS : un nouveau CSS reset qui semble supérieur aux autres. […]

  24. […] SenCSS SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard […]

  25. […] Introducing SenCSSA clean, minimal CSS template for new projects. […]

  26. […] Introducing SenCSS A clean, minimal CSS template for new projects. […]

  27. […] Introducing SenCSS A clean, minimal CSS template for new projects. […]

  28. […] Sen CSS- SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset. […]

  29. […] Sen CSS- SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset. […]

  30. krish
  31. […] Sen CSS. […]

  32. […] Sen CSS. […]

  33. […] Introducing SenCSS A clean, minimal CSS template for new projects. […]

  34. Jason

    This is a GREAT alternative to css resets and frameworks. Fits my needs perfectly, I’ll be keeping an eye on it.

  35. I work for website developing company and i’ve heard for this for the first time. I guess i’ll have to learn some more.

  36. […] Sen CSS- SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset. […]

  37. […] Introducing SenCSS […]

  38. […] 23- Introducing SenCSS […]

  39. […] Drop-Down Menu Framework 97. BlueTripCSS Framework98. Hartija – CSS Print Framework 99. Introducing SenCSS 100. Formy CSS Framework 101. Typogridphy — Download 101 CSS Tools , take your design to […]

  40. […] SenCSS – O objetivo é fornecer estilos coerentes com os padrões para todas as partes repetitivas […]

  41. […] Sen CSS- SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset. […]