CSS Frameworks and Tripoli

You know, I've been remiss. Ive written several CSS articles, and at the same time, I've been using Tripoli CSS on every web site I've created for the last couple of years, and I've have never mentioned Tripoli CSS.  Let me talk about my experience with CSS frameworks and Tripoli.

There are many CSS Frameworks out there, that are free, for any developer to use.  What does a CSS Framework do?  Well, despite the fact that web browsers are all getting closer and closer to rendering web pages the same, they don't.  Browsers use different layout engines, that render web pages slightly differently.

The biggest pain for a web developer is to make a web site look the same on all browsers.  The second biggest pain is to make a consistent layout of columns in the web page.  Depending on what type of layout you want to use, you have to use different CSS techniques to accomplish each type of layout.  I'm talking about fixed sites versus elastic sites that expand and contract as screen resolutions change.

To make web developers job easier CSS Frameworks were developed to solve both of these problems.  The first problem is usually handled with what is called a CSS Reset, followed by a special file just to handle the IE browser, since it still is the worse browser available for adhering to W3C web standards.

The CSS Reset was first developed and championed by Eric Meyer, the Father of CSS, as he has consistently been involved in CSS development throughout its history, has written several books on CSS, and has a successful blog on the topic. His reset is available from his web site. It's a CSS file that can be edited like any other CSS file that resets all browsers to the same starting point when you start development.  His CSS Reset has been the initial source for all of the other CSS Resets used by other CSS Frameworks.

The next layer up is to have a CSS Reset and also format the text, forms, links, and tables to have a consistently, aesthetically pleasing look and feel on the web page. Fonts are preselected and move up nicely as you increase font size.  If you increase the font size by percent instead of pixels, the font size is consistently rendered.  Tripoli CSS fits into this category.

The rest of the CSS Frameworks go to the next level, and try to make web page layout easier and consistent across browsers.  This type of framework started with Yui Grids from Yahoo, followed by Blueprint, which also added Print layout.  These two are probably the most used of the layout frameworks.   Just as an aside, I use Hartija CSS to do my print layout.  There's a slew of others that offer a  slightly different twist on what they do, and each has its  slightly different layout tags and methods that you have to learn to use them.  Not to be remiss, other Frameworks you can checkout are: Yaml, Elastic, 960 Grid System, Emastic, Snowdust, Scaffold, Compass, and Elements.  If I missed any, my apologies.  That's a confusing array of choices for any developer, so the tendency is to pick one and stay with it.

There are two problems, for me, with using these layout frameworks. First, they all add bloat to your web page, as the framework has to account for every possible layout in its CSS files, and you're adding that to every web page.  Second, each framework has its own methods of implementing the framework within the web page, which involves learning their language and methods.

As I got better at CSS I found I was, at first, opening the framework's CSS file, and eliminating layout formats I wasn't using on the web page, and didn't need in the CSS file.  Next, I found from doing this, that I could do my own layouts, and get rid of the frameworks bloated code, not have to continually edit updates to the framework, and not worry about learning the framework language and methods.  In short, I outgrew the frameworks.

I came to the conclusion, that I need a CSS Reset for browser compatibility, and I like to have a aesthetically pleasing, and  consistent, look to the font on my web pages.  Tripoli was my best option, and I have been using Tripoli CSS ever since that decision.  Tripoli offers a CSS Reset, which I admit to have edited to change hoover colors and take out Opera 5 compatibility, and a consistent font look, and that's it.

Tripoli also offers a fixed width only layout plugin, which I admit to occasionally using, since the layout is simple, solid across all browsers, easily edited, and gives me a solid layout through out my site.


CSS Frameworks and Tripoli — 3 Comments

  1. Hi,
    I’m interested in the Tripoli CCS stuff.
    But the link seems to be broken.
    Where can i find it?

    Best Regards

    • Hi John,
      Thanks for the heads up. The links are hooked up properly in the article. The problem is the Tripoli server is down. I don’t know if this is temporary, or not. Here is the direct link to the site: http://devkick.com/lab/tripoli/. If for some reason the server does not come back up, here is an alternative framework that incorporates Tripoli called BlueTrip: http://www.bluetrip.org/ If I remember correctly both sites have the same author. If you still come up with no joy, get back to me and I’ll see if we can’t hook you up another way.