Asking Aardvarks to help with CSS
I’ve been coding with CSS for a very long time now. During that time, I’ve slowly developed a basic library of reusable CSS. Recently I took that library, edited it, and made it into a very basic CSS framework.
The decision to make this framework was inspired by SenCSS; however, I had many issues with the design choices made in SenCSS — choices that made the framework, at least in my opinion, two-faced.
On one hand, it is minimal and provides basic, reliable styling for certain elements. On the other hand, its styling of forms is unusual and unreliable, it introduces bugs through curious handling of certain properties and elements, and, in general, is too opinionated. These decisions prevented me from using it on any of my personal or professional projects.
While I welcome what SenCSS is doing and I appreciate parts of it, I believe that there is still a genuine need for a framework that, rather than making decisions for you, simply provides solid legs to stand on.
Why? Because each project is unique, and it does not make sense to offload our work onto the customer by adding unnecessary weight to our pages, through styles that we are unlikely to use in the future or that need heavy modifying.
Aardvarks have strong legs
And so does aardvark.legs. It’s designed around 18px vertical rhythm and the belief that all browsers should by default render all elements the same way, including forms.
That’s correct: aardvark.legs, has cross-browser compatible forms with both horizontal and vertical layouts. The HTML mark-up for these is very simple — however, it might require small changes in your coding style. I recommend reviewing the example file and the CSS to gain a better understanding of how it works.
The Tech
aardvark.legs weighs just under 4kb and supports all the major browsers: IE6, IE7, Firefox 2+, Opera 9+, and Safari 3. As a bonus, it even comes with support for some new HTML5 elements and sets them to display: block; for you.
And as to whether it is reliable or not… ? It is! It powers fecklessmind and I’m using it on all of my latest clients’ projects.
Get it
The example file is available at http://aardvark.fecklessmind.com/. You can also download the CSS right away. This framework is free for personal or commercial use and is licensed under the MIT License.
If you see any bugs, please e-mail me, and I’ll make sure to fix them. Also, if you have access to IE8, Safari 2, or other browsers not listed above, please let me know how the framework fares on those.
Now, go and play around with it. And please, let me know what you think — it will help me improve aardvark.legs in the future.
Comments
I’m definitely going to review this and let you know what I think. Looks good though.
#1 • Chris Wallace wrote this on January 22, 2009 at 7:35 am
Nice Work! Thank you! I’ll definitively test it.
#2 • Meggesje wrote this on January 22, 2009 at 7:39 am
Nice work!
#3 • Brenelz wrote this on January 22, 2009 at 5:59 pm
Thanks! Let me know how it works out for you, especially if you find bugs or have suggestions for improvement.
#4 • Anatoli Papirovski wrote this on January 22, 2009 at 10:20 pm
no, or at least very few, presentational class names! and the few that are in there are at least semantically meaningful. this is the first css “framework” that hasn’t made me see red. great work!
#5 • Derek Pennycuff wrote this on January 23, 2009 at 9:46 am
Thanks for sharing this! It looks exactly like the compromise I’ve been looking for.
The only change I’d need to make (for my own purposes) is increasing the base size slightly to 14px or 16px body text for a vertical rhythm of 21px or 24px.
Looking at your code, it seems like it should just be a simple, one-line change. Thanks again for making this.
#6 • Steve Losh wrote this on January 23, 2009 at 10:18 pm
Yup, Steve, you’re (almost) correct — simply change lines 28 and 29 (first is for IE6, the others for better browsers). If you need to change the fonts, it’s also very simple — change lines 28, 60, and 88.
#7 • Anatoli Papirovski wrote this on January 23, 2009 at 10:26 pm
Hi Anatoli,
I am the author of SenCSs. I’m glad to see that SenCSs made you inspired enough to build your own framework based on it.
You claim SenCSs to be in part curious and unreliable, but you do not name any specific problems. Can you tell me which parts you think are problematic? (via e-mail or otherwise). I would love to make SenCSs better!
#8 • Kilian Valkhof wrote this on January 25, 2009 at 8:19 am
Kilian,
Done. I tried to remember all the things that bugged me, but I might’ve forgotten some. Hope it helps you improve SenCSS.
#9 • Anatoli Papirovski wrote this on January 25, 2009 at 8:33 am
Finally the first CSS Framework I will even think of using…
I have used * {margin:0; padding:0;} for years and have religiously refused to use erics or anyone elses but you may have converted a cranky old timer….
well done :D
#10 • Jermayn wrote this on February 11, 2009 at 9:11 pm
This looks great. Will give it a try on my next project :)
#11 • Shane Sponagle wrote this on February 20, 2009 at 9:58 am
Sorry, the comments are closed at this time.