What is Tripoli? The best CSS Standard for html Rendering

Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects.

Tripoli completely resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

DemonstrationsExplanation Tripoli and how it works

For the beta release I have put together three test pages. On the first two you can toggle the Tripoli base and also try out some available plugins and see how they work with the content. The third is a demonstration of the new layout plugin that can create over thirty browser-proof CSS layouts out of the same simple HTML content for rapid development.

  • HTML Sample – a complete reference of HTML elements
  • Selectors – The classic page at W3C with tripoli injected into it.
  • Layout – a demonstration of the layout plugin.

Bulletproof

Tripoli supports virtually all browsers available. The test suite includes:

  • Windows: IE5, IE5.5, IE6, IE7, IE8, Opera 8, Opera 9, Safari, Firefox 2, Firefox 3
  • OS X: IE5, Firefox 2, Firefox 3, Safari 2, Safari 3, Camino

So, who cares about IE5, when even the microsoft website looks like a disaster using it? That is not up to Tripoli to judge. Tripoli and the layout plugin supports them all, so you can decide for yourself what level of browser support you want.

How to Installation

The Tripoli suite consists of several CSS files. Here is a quick guide in how to build your tripoli-powered web site:

1. The simple way

Tripoli comes with two simple ready-to-use CSS files for the ones who don’t need any customizations. tripoli.simple.css and tripoli.simple.ie.css are two compressed CSS files that contain the base, visual and type components. All you need to do after you have downloaded them is two put two simple lines in your HTML: <!– [if IE]> <link rel=”stylesheet” type=”text/css” href=”tripoli.simple.ie.css”><![endif]–>

2. For development When developing with Tripoli, it is wise to download the entire suite and import the needed non-packed CSS files into a master style sheet. This way, you can always look into the components and localize conflicts quickly, if necessary. You will also have control over what plugins you actually need. Here is an example: <!– [if IE]> <link rel=”stylesheet” type=”text/css” href=”tripoli.simple.css”><![endif]–> In styles.css:

@import url(tripoli.base.css);
@import url(plugins/tripoli.visual.css);
@import url(plugins/tripoli.type.css);
/* your custom styles goes here */

Please see the tripoli.css as an example of a master style sheet that imports tripoli components.

Before deployment

Before deployment, we recommend that you copy-paste or run a script over all your CSS rules and compress them using an online CSS compressor. Doing so decreases the server load of having several requests and at the same time reduce file sizes. A typical Tripoli suite compressed is only around 4-5k

Usage

Using Tripoli is very simple.

  1. Add the stylesheets into your <head> as described under “Installation”.
  2. Start designing your CSS layout. Tripoli resets 1em to become 10px which simplifies the use of em in layouts.
  3. When it’s time to add content, simple add a class="content" to the parent container.
  4. Override Tripoli with your own, custom styles. Tripoli specificity is always kept low, but since it uses a .content class you might have to be a bit more specific in your CSS rules than you normally would. As an example, ul.list will override Tripoli, but .list will not.

tripoli.layout.cssA custom CSS Shell, Tripoli

New in the beta is the layout plugin. The layout plugin is slightly different from the other plugins, since it also includes a HTML guide in the documentation for the layouts to work. When using the layout plugin, your site can have over 30 different layouts by just adding class names to the body tag. Since the markup remains the same (primary content first of course), the layout plugin is perfect for Content Management Systems or if you just want a quick, browser-proof css layout for rapid front-end development. In classic Tripoli-style, the layout plugin supports virtually all browsers available including IE5. The layout plugin does not include fluid layouts at the moment, but you could easilly create one that extends the layout plugin. All layout meassurements are instead based on em‘s. Check out the Layout demonstration to try the different layouts and view the plugin source for documentation.

Who uses Tripoli?

Tripoli is powering many larger content-driven web sites. Jason made a recent comment in the kitchen:

Hey David, I figured I’d let you know that Tripoli is powering the mint.com corporate site, and a stripped down version is inside the app itself as well. Great work. Jason M. Putorti Lead Designer, mint.com

FOLLOW US ON: