Kilian Valkhof

Building tools that make developers awesome.

Introducing SenCSS

CSS & HTML, SenCSs, 16 June 2008, 4 minute read

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, utilizing 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 standardized 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 :)

Polypane browser for responsive web development and design Hi, I'm Kilian. I make Polypane, the browser for responsive web development and design. If you're reading this site, that's probably interesting to you. Try it out!