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…
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 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.
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.
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
p etc. declarations in the CSS reset at top. We define those styles, later.
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
tt elements, using courier, and the
sup elements seriously mess up the vertical rhythm and I haven’t found a fix for it, yet.
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.
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.
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.
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!
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 :)
FromScratch 1.3.0 was just released, and it features a couple of nice features: Checkboxes, Updated Fira Code and I fixed a longstanding issue for people using alternate keyboard layouts. You can download FromScratch 1.3.0 from the site Fromscratch.rocks or the Github releases page. Changelog: Checkbox support, press ctrl + / to add or toggle checkbox #36 Updated Fira…
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,…