Every now and then a web developer using a Mac discovers that their beautiful design is littered with scroll bars on other platforms. Either because someone points it out to them or because they attach a mouse to their mac which makes scroll bars appear.
Introducing SenCSS
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:
- Sets a vertical rhythm for all elements
- Sets a common typographic standard across browsers
- Staying close to the browsers base styling, but adding some sense to it
- Has fonts specified for windows, mac and linux
- Is optimised, meaning no “double resets”, to make the CSS as efficient as possible
- Has basic styling for forms and common classes
- Has styling for typographic niceties
Perhaps more importantly, this is what it doesn’t (and won’t) do:
- force a layout-system on you
- sneak in unsemantic classes
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 h1–h6, 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:
- Table styling
- Tighter cross-browsers compatibility
- More sensible base styles
- Better form support
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 :)
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!