SenCSs

When last written about, SenCSs was at version 0.7. We’re currently at version 0.8.1, with a bunch of vertical rhythm fixes, mostly for form elements, and added support for HTML5 elements. You can now add it to the list of “HTML5 CSS frameworks”. ;) Though, “framework” it is not, so I decided to just rename it to what it is: a Baseline.

Get more info at SenCSs.kilianvalkhof.com

F.lux for Ubuntu

After releasing F.lux for Ubuntu this summer, It went from 1.1.1 to 1.1.8 mostly improving stability and making different parts of the application (such as the preview button) work more like users expect. I’ve also been working on KDE/XFCE support, which was kind of finnicky due to the way I select the indicator applet icon. Version 1.1.9, which will be released soon, will hopefully bring this support. After that, it’s onward to 1.2, which will include the ‘turn off for an hour’ functionality.

Get more info at stereopsis.com/flux/linux.html

Trimage

After announcing Trimage in March of this year, I’ve gone from 1.0.0-beta to 1.0.5, with a slew of added functionality in between. I’ve gotten a lot of help from people such as Tarnay Kálmán and Thomas Lété in adding cool new functions. Here’s what has changed since 1.0.0:

• Correct unicode support for all filenames
• Adding a notification area icon
• Using a threadpool for processing (much faster)
• Showing more statistics when compressing
• Window geometry and last opened directory are now remembered
• Ability to drag in entire folders
• Prevent Trimage from overwriting already smaller images
• Add PNGcrush to get even better compression
• Miscelanious speed improvements

A while ago I tried getting Trimage into Debian via debian-mentors. This was unfortunately a very opaque process and in the end no-one wanted to sponsor Trimage despite numerous changes to the build system. I’d still like to get Trimage into the main repositories, so if anyone wants to help me out, that would be greatly appreciated.

For 1.1, Paul is going to update the command line options and generally use his python-fu to improve stuff.

Get more info at trimage.org

Grafico

Announced at the beginning of this year, Grafico has seen a bunch of cool improvements. Within a week, Jan Paul Posma implemented stream graph functionality (after I mentioned the math was much too hard for me, ahem…). Since then, David Parry added stacked bar charts, Rémy Coutable greatly improved my hover code while Jaap van der Meer improved the control of text in the hovers, Menno van der Sman implemented an awesome axis-value algorithm and a lot of options have become much more customizable. Most charts now support negative values as well as positive values, and I’ve done a whole slew of bug fixes and speed improvements.

Get more info at Grafico.kilianvalkhof.com

All in all, a whole bunch of work by a whole bunch of awesome people!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Open source updates

So, go get it at sencss.kilianvalkhof.com!

Extra, Extra!

The biggest change is that I’ve split all the class specific styles into their own file, sen.extra.css because I noticed that for most sites, cherry-picking from sen.extra.css works much better. This brings the size of sen.css down to a small 5kb. None of the styles have disappeared, so horizontal forms, message styles and typographic classes are all still there and you can include them all, or just the ones you need.

Move to Github

Pretty much all my open source work in the past year has been published on Github except for SenCSs, which up till now was located at Google Code. Github kicks Google Code’s ass in almost every way and active development is much easier this way. With SenCSs on Github, I hope to recieve patches and improvements from other people as well.

Other changes

The CSS for forms has received an update, with cleaner selectors, fixes for the display of buttons and the vertical rhythm. This release also has fixes for monospace text in webkit and various bugs in IE8.

Full change log:

• move all helper classes to an external file
• Fix vertical rhythm for certain form elements
• Remove the text-align center from message styles
• add explicit font-weight declarations to the heading elements
• clean up documentation and repository
• move fully to GitHub
• hide focus effect on buttons in firefox
• clean up form css
• add a number of IE8 fixes

I hope you enjoy this release, and I look forward to the forks and patches that can be made thanks to hosting it on GitHub!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

SenCSs 0.7 is out

• Download SenCSs 0.6
• Example file
• SenCSs Homepage

New form system

There were numerous problems with the form system in 0.5. It didn’t look like the usual form widgets in most browsers, it didn’t allow for borders, it didn’t align with the baseline very well and it actually alternated the baseline alignment (which was a big mistake on my part.)

So, I completely rewrote it.

And that paid off: it now supports borders, aligns to the baseline perfectly and are pixel perfect in Firefox and Internet Explorer 6/7, and very nearly so in Opera and Safari.

SenCSs lite

One of the often heard remarks concerning SenCSs 0.5 was a request for a SenCSs Lite. So I gave that some thought, and while I understand the request, it would basically mean downloading the minified version of SenCSs 0.6 and removing everything from line 56 on. For now, I think you are capable enough to do that yourself.

Full changelog

• tweaked sub/sup styling to make them easier to work with
• removed explicit link colour, unneeded background colours, .section declaration
• placed back missing quote functionality in the css reset
• moved list style from the list item to the list container
• fixed safari bug with monospaced fonts
• reworked form styling
  • added borders
  • refitted to the vertical rhythm
  • added optgroup styling for firefox
  • pixel perfect in firefox and ie6/ie7

As you can see, next to a new form system, there are quite some bug fixes, including some long standing ones (especially the monospace fonts in safari), and some superfluous stuff has been removed.

SenCSs 0.7

For the next version, I hope to get better baseline support in Opera and Safari. While about 90% of the elements work nicely, things like forms don’t work 100% properly yet. Besides that, what would you like to see in SenCSs 0.7?

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Pixel perfect forms, SenCSs 0.6 released

• Download SenCSs 0.5
• The SenCSs homepage
• The SenCSs example file

For reminders

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.

Feedback?

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 is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

SenCSs 0.5: Forms Ahoy!

SenCSS 0.4.6

You can download SenCSs 0.4.6, both the normal and the minified version, from Google code. Have a look over at the SenCSs website for the full changelog and more information.

The final logo

A Request

Wanna help work on SenCSs? I’m fighting with form styling and making it cross browser pixel perfect (a utopia?). If you see any parts of SenCSs that can be improved, or if you have good ideas that should/can/must be added, don’t hesitate to contact me using The comments here, my contact form, or Twitter. Cheers!

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

SenCSs 0.4.6 Released

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, 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:

• 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

• The SenCSs website
• The SenCSs example file
• SenCSs at Google code

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 :)

This article is written by Kilian Valkhof, Front-end developer & User experience designer. Please visit KilianValkhof.com for more articles!

Introducing SenCSS