Introducing Tripoli

82 comments so far | Add yours

82 Responses so far. Add yours.

At 10:08 pm on August 16th, 2007 , Wolf wrote:

Great. What about the select element messing up when you use universal selector to reset margin and padding?

At 10:11 pm on August 16th, 2007 , David Hellsing (author) wrote:

@wolf: I’m aware of that. But Tripoli tries to compensate for it in the generic file later on, even for IE.

At 10:27 pm on August 16th, 2007 , Wolf wrote:

I’ve been trying to figure out whether Eric meyers global reset is a good idea or not, but I lack in deep technical HTML/CSS and browser knowledge. I’ve been using it for every project last three months.

This looks like a good base to start from, I’ll give it a shot.

At 9:59 am on August 17th, 2007 , George wrote:

Interesting that frameworks are now cropping up for HTML/CSS too. Whilst I can see them being useful for people starting out I’m not sure I can apply them. I have a base stylesheet but as designs and markup change from project to project applying a one size fits all approach to all doesn’t work for me. Nice work though.

At 1:19 pm on August 17th, 2007 , David Hellsing (author) wrote:

@George: thanks. I do see your point, but after 10 years of CSS coding I have realized that I keep repeating myself in every project. I find it easier to have a solid base and then extend it for every project. Tripoli is the result of years of testing resets, generics and browser compability and I use it in every project now. It doesn’t tell you what size, colors or fonts to use, it’s more like a solid rendering layer from which you can build custom designs from.

At 7:01 pm on August 17th, 2007 , Austin Schneider wrote:

What about the button element? Looks bad in Safari. I guess it should look the same as the button/submit input types?

At 7:27 pm on August 17th, 2007 , David Hellsing (author) wrote:

@Austin: you’re right. The button element was there but must have slipped on the way. The latest generic.css file includes correct rules for the button element:

http://monc.se/tripoli/css/generic.css

Thanks for pointing that out! Unfortunately, Safari 2 will never render the <button> element as <input type="button">, but safari 3 should render them about the same.

At 9:27 pm on August 17th, 2007 , Aeomer wrote:

You have managed to clear the proper cursor type for password fields.

Add the following to the bottom of the /* FORMS */ section of generic.css

input[type=’password’] { cursor: text; }

At 9:39 pm on August 17th, 2007 , David Hellsing (author) wrote:

@Aeomer: thanks, I know I missed the password input at some points. I’ll look in to it.

At 3:28 pm on August 18th, 2007 , Aeomer wrote:

Hi again. I changed two lines to sort out all the password issues I was having.

1. In the /* MAIN TYPOGRAPHY */ section I changed the line that begins ‘code’ to:

code, kbd, samp, pre, tt, var, input[type=’text’], input[type=’password’] { font-size: 92%; font-family: courier, “Courier New”, “Lucida Console”, monaco, mono-space; }

This makes the password fields the same height as all other fields.

2. Rather than just add the input[type=’password’] {cursor:text:} on its own line in the /* FORMS */ section I put it with the the final line so that it now reads:

input[type=’text’], input[type=’password’] { cursor: text; }
TTFN

At 2:30 am on August 21st, 2007 , Rene wrote:

This is really great.

I would add one more thing: a little bit of letter-spacing for any element that is italic.

Otherwise congrats. Very awesome.

At 7:01 pm on August 21st, 2007 , Tom wrote:

Nice work - I am eager to try this out. It seems that it will really help jump start new projects and greatly simplify customization. Thanks

At 7:21 pm on August 21st, 2007 , n00b wrote:

Please develop a “one-file” version of tripoli, for media=”all”. Thank you.

At 7:55 pm on August 21st, 2007 , n00b wrote:

I removed “, applet” from reset.css, it blocks topstyle (the css editor).

At 8:58 pm on August 21st, 2007 , June wrote:

Excellent!

At 9:38 pm on August 21st, 2007 , Wolf wrote:

Tried this while developing a real website today… needs more work to use it in a production environment (especially with the attribute selectors). I’m going to see what I can come up with - the base looks solid.

At 10:05 pm on August 21st, 2007 , krs wrote:

You mentioned Bringhurst’s book in your notes. Have you seen Richard Rutter’s work on web typography? He’s trying to implement Bringhurst’s guidelines through HTML and CSS.
http://webtypography.net/toc/

At 10:18 pm on August 21st, 2007 , David Hellsing (author) wrote:

@Aeomer: Thanks for your input. I have made the same notes for the next release.

@Rene: Thanks for your input. However, I believe that letter-spacing is a font-specific property so I’m spectical towards implementing it.

@n00b: A complete compressed file for all medias is under development. Thanks.

@Wolf: Let me know your thoughts as the project evolves. Your input is important to make this even better.

@krs: Yes, I’ve seen it and some details are inspired from that site. Thanks for the link.

At 10:57 pm on August 21st, 2007 , Wolf wrote:

I’m going to blog in English soon… I’m going to examine Tripoli to be able to use a modified version in a production environment. Send me an email if you want!

At 9:16 am on August 22nd, 2007 , fred Moerman wrote:

nice.
a bit of an overkill maybe, but that’s no problem.
the complete reset is realy usefull.

nice.

At 2:59 pm on August 23rd, 2007 , Steve wrote:

Thanks for sharing your work. I like the concept a lot.

In playing around, I found a bug that happens when paragraphs are in list items. To see the bug, just make an unordered list with 2 items. In one item put <p> tags inside the <li> tags. That <li> will be rendered below the bullet instead of next to it.

Steve

At 3:17 pm on August 23rd, 2007 , David Hellsing (author) wrote:

@Steve: what user agent are you using when the bug occurs? Safari has a known list bug, it might be that. I’ll look into it. thanks.

At 4:46 pm on August 23rd, 2007 , Steve wrote:

@David: Firefox 2.0.0.6

At 5:22 pm on August 23rd, 2007 , David Hellsing (author) wrote:

@Steve: Thanks! It’s a tricky one, but the latest generic.css file should have corrected this in a not so kosher way. But i’ll keep it for now.

At 11:04 pm on August 23rd, 2007 , Steve wrote:

@David: I’m using 1.0alpha that I downloaded a few days ago. Is there a newer version?

At 9:28 am on August 24th, 2007 , David Hellsing (author) wrote:

@Steve: yes, you can always download the latest files separately. A changelog should be included further down each file that has been modified.

At 11:53 am on August 24th, 2007 , Tom Willmot wrote:

Hi David,

Just wanted to comment to say that I am using Tripoli in the re-design of my business site and so far so good.

Maybe I am being stupid (very probable) but why is it that you use .content ul li:before { content: "\20220a00a0"; } instead of .content ul li { list-style-type: disc; }

Will keep you updated on any issues etc. that I come across whilst using it.

Thanks for all the hard work you have put into this.

Tom

At 6:21 pm on August 24th, 2007 , Steve wrote:

I’m curious… why did you apply a style to the small tag but not the big tag?

At 12:36 am on August 26th, 2007 , Gustav wrote:

Very, very nice indeed!
I’m a relatively noob to css design and I’m always looking into ways to speed up my work with base css files and frameworks from more experienced designers. I guess the newcomers can’t thank you enough for releasing this tool.

BTW, I was wondering how do you feel about yaml, since it’s relatively unknown outside the german-speaking community (http://www.yaml.de/en/overview.html).

Again, thank you so much for sharing this!

At 12:29 am on August 28th, 2007 , David Hellsing (author) wrote:

@Tom: great to hear. I’m using custom dots to make them look better in standard browsers.

@Steve: I’m actually adding big to the next tripoli release, even if it’s sort of deprecated (just as small as you mentioned). Thanks for pointing that out.

@Gustav: I had a quick look into yaml and it looks stable and well-documented. However, I do not agree with some of the resets and generic CSS rules I found in there. But worth a try, definitely! Thanks.

At 3:50 pm on August 30th, 2007 , Federico Fasce wrote:

Hi! I’m using Tripoli, and I must say, it’s really useful!
In my template, though, I need to make a list without bullets.
So, after selecting the ul I need (with a class), I set

list-style: none;

to turn off bullet display.

But it seems something is overriding my setting, I still see the bullets. Any advice on hoe to make un-bulleted lists?

At 4:02 pm on August 30th, 2007 , David Hellsing (author) wrote:

@Federico: Try the following:

.nobullets li { text-indent: 0; margin-left: 0; }
.nobullets li:before { content:''; }

At 2:01 pm on September 4th, 2007 , Lode wrote:

David, two small typos in the Tripoli page:

# Have full control over all CSS rules without disturbing browser defualts
should be “defaults”

Instead it forms a base for creating dynamic layouts without interfearing with typographic measurements.
should be “interfering”

At 7:35 pm on September 4th, 2007 , David Hellsing (author) wrote:

Thanks Lode. I’ll correct it as the new tripoli beta version is launching.

At 5:54 pm on September 10th, 2007 , Alan wrote:

Has anyone checked to see how this helps with IE compatibility? That’s always been my biggest problem with projects. I’ll get to the end and think everything’s great and then I have to track down IE bugs. I’ll be giving Tripoli a try regardless, I was just wondering if any of you have found it useful regarding this in practice.

At 1:10 am on September 13th, 2007 , Tom Willmot wrote:

Have used this as a starting point for my latest redesign. I ended up customizing it heavily, even so it does make a great baseline off of which to build.

I have ended up merging my reset.css and generic.css into one file called base.css, mainly because it reduces the number of http requests but also because it doing so makes more sense to the way in which I am making use of Tripoli.

Thanks for your work Dave, I fully intent to recommend this on my blog.

At 4:48 pm on September 20th, 2007 , Lee Aylward wrote:

Awesome work! I am having a small issue with the default padding on all input elements. It seems to affect hidden form fields, which tends to screw up the page flow. I guess there is no way around this unless I add a specific class to the hidden elements, except I do not have this level of control.

Know of any possible solutions to this?

At 4:22 am on September 21st, 2007 , David Hellsing (author) wrote:

@Lee, thanks, another good point. I’ll keep that in mind for the beta.

At 2:20 am on September 25th, 2007 , 2KLiX wrote:

Quite magnificent for what you term an alpha release, can’t wait for the beta!

At 11:03 am on September 26th, 2007 , Mark Lee wrote:

Global resets are a bad idea, and there’s no point in resetting the styling on tags/elements you aren’t even going to use. It’s best to use a “master stylesheet,” and this one looks to be the best:

http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/

At 2:02 pm on September 26th, 2007 , Vsevolod Balashov wrote:

for inclusion styles you use url() without quotes and quotes without url. (@import url(/css/reset.css); @import ‘/css/generic.css’;) I`m look this table http://imfo.ru/csstest/css_hacks/import.php and have question:
why difference?

At 4:19 pm on September 29th, 2007 , David Hellsing (author) wrote:

@mark: you raise a valid point. However, in many project you don’t have control of the content HTML yourself. For example if the client updates the site manually, or if you are using a third-party CMS that outputs its own HTML. This way, you can use the same file over and over again without worrying about the output.

@Vsevolod: if you specify the path without url/code>, you prevent explorer/mac from reading the file.

At 5:13 pm on October 2nd, 2007 , Clint Ecker wrote:

Stone Ward’s Chicago Interactive Dept. just launched a site for The Nature Conservancy called Start One Conversation. We make use of Tripoli for the layout of the design:

http://startoneconversation.org/

Check it out and let us know what you think!

At 11:49 pm on October 22nd, 2007 , Oleg wrote:

Awesome work! You`ve got specified
@import url(css/print.css) print;
But this seams not to have any fun in IE 7 (I guess lower versions do act the same)
And guess what? It doesn`t work because of the ” print;” selector. if you just erase it everything starts working fine.

At 9:27 am on October 23rd, 2007 , Oleg wrote:

Hmmm… If I just remove the medai selector I see styles for print on normal display in IE 5

At 8:33 pm on October 24th, 2007 , David Hellsing (author) wrote:

@everyone: The beta is now in development. Read more here.

At 10:44 pm on October 25th, 2007 , Mr Light (Nikola Vignjevic) wrote:

Hi, I think I found a little mistake in reset.css.

Please change line 20:
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }

to:
code, kbd, samp, pre, tt, var, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }

textarea { font: inherit; font-size: 1em; }

“white-space: normal;” kills in textareas all linefeeds.

Sorry my bad English.

Mr Light

At 10:47 pm on October 25th, 2007 , Mr Light (Nikola Vignjevic) wrote:

Ah sorry (problem found in ie6 …

Mr Light

At 2:31 pm on November 5th, 2007 , at wrote:

Hi David!
I used a center-align fixed width layout and found a bug: property position: relative in line 126 in generic.css makes all a in IEs float over other elements when I resize the window. I fixed this adding following rule to ie.css: .content a {position:static;}

At 12:20 am on November 6th, 2007 , David Hellsing (author) wrote:

@at: yes, the position:relative; for anchors is removed in the beta. The intention was once to increase the click-area.

At 10:31 am on November 11th, 2007 , Soda wrote:

Very cool stuff, thank you for sharing !

At 11:03 am on November 12th, 2007 , sunil wrote:

Looks nice. But global reset is not advisable. master style sheet is good

At 4:11 pm on December 8th, 2007 , Tam wrote:

This might be useful for broadcasting opera

At 3:54 am on December 22nd, 2007 , bart wrote:

Does the line…
textarea, input[type=’text’], select { border: 1px solid #ccc; background: #fff; }
…in the generic.css file also need the input[type=’password’] selector or was this omitted intentionally?

At 1:16 pm on January 21st, 2008 , Sangesh wrote:

Quite magnificent for what you term an alpha release, can’t wait for the full version!!!

At 1:17 pm on January 21st, 2008 , Sangesh wrote:

Quite magnificent for what you term an alpha release, can’t wait for the full version!!!

Cheers

At 10:36 pm on January 25th, 2008 , Nic Marson wrote:

Hi David, I’ve been using your style sheets ever since you released them and I think they’re great. I ran into my first big problem with them though which turned out to be an easy fix. Your examples demonstrate the same problem which is in the textarea, in IE7, pressing the Enter key does not add line breaks. This is due to the white-space: normal setting in reset.css. I solved this in my IE7 only style sheet by setting textarea white-space: pre.

At 3:01 pm on February 15th, 2008 , Giuseppe Capizzi wrote:

Hi, nice work!
The “mono-space” value used in the “code, …” row is not working in Firefox, so I added “monospace” to the list. Now it looks like this:

code, kbd, samp, pre, tt, var, input[type=’text’], textarea { font-size: 92%; font-family: monaco, “Lucida Console”, courier, mono-space; }

At 5:53 pm on April 25th, 2008 , Maniquí wrote:

For those having some little issues here and there :

I’ve found that the generic.css that is currently in the downloadable zip files differs from the one on your samples (the good one).

For example, the one on the zip files have some issues with blockquotes and proper quoting elements inside blockquote. Also, some other minor issues (like wrong margins) inside blockquotes too.

The one on the samples (on Tripoli site, not on the full zip) fix those issues and other ones already reported (like the problem on IE7 regarding line-breaks on textareas).

PS: I will cross-post this to the other post about Tripoli. Sorry.

At 5:45 pm on October 16th, 2008 , turksiding wrote:

can’t wait for the full version..

At 5:55 pm on January 30th, 2009 , Ajans wrote:

I have ended up merging my reset.css and generic.css into one file called base.css, mainly because it reduces the number of http requests but also because it doing so makes more sense to the way in which I am making use of Tripoli. I’m a relatively noob to css design and I’m always looking into ways to speed up my work with base css files and frameworks from more experienced designers. I guess the newcomers can’t thank you enough for releasing this tool.

At 2:30 pm on April 12th, 2009 , barbi e wrote:

nice stuff, thank you for sharing

At 3:00 am on May 4th, 2009 , toner wrote:

ı have followed your writing for a long time.really you have given very successful information.

19 Trackbacks & Pings:

Trackback at 11:16 pm on August 16th, 2007 by Wolf’s Little Store » Re: CSS Frameworks:

[…] stootte ik weer op een interessante link: Tripoli door David Helsing. Tripoli is geen CSS-framework maar wil als basis dienen om een site te kunnen […]

Trackback at 3:27 pm on August 17th, 2007 by » Introducing Tripoli » Minimology:

[…] Introducing Tripoli […]

Trackback at 2:11 pm on August 20th, 2007 by Css Globe:

Tripoli…

…

Trackback at 8:15 pm on August 20th, 2007 by Tripoli: A Generic CSS Standard | LeviFig.net:

[…] while reading Dave’s blog feed, I came across his post where he talks about the development of a tool for CSS developers that helps making sure the […]

Trackback at 8:24 pm on August 21st, 2007 by HTML Editor Reviews » Del.icio.us Links for Aug 21, 2007:

[…] Introducing Tripoli | David’s kitchen 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. […]

Trackback at 10:29 pm on August 24th, 2007 by Discussion Points Part 1 « Terralever Front End Architects:

[…] Tripoli […]

Trackback at 11:47 pm on December 19th, 2007 by acheter sildenafil levitra en ligne:

acheter sildenafil levitra en ligne…

27c6899db6:49 Pharmacie en ligne http://fr.generics-first-hand.com/…

Trackback at 11:45 am on December 23rd, 2007 by viagra price:

viagra price…

0511b9be64:49 viagra sildenafil online pharmacy http://www.generics-first-hand.com Generic drugs can be legally produced for drugs where: 1) the patent has expired, 2) the generic com…

Trackback at 9:38 pm on April 29th, 2008 by Reseting CSS default browser settings: | Urbano's Blog:

[…] Here is the CSS code you’ll use, developed by David Hellsing at Tripoli: […]

Trackback at 8:08 pm on May 8th, 2008 by Tripoli Beta : DevKick Blog:

[…] new to Tripoli, you might want to check out two earlier blog posts as the project was initiated: Introducing Tripoli and Tripoli Beta in […]

Trackback at 3:02 pm on May 11th, 2008 by tripoli:

[…] a stable, ….. Here is the CSS code you??ll use, developed by David Hellsing at Tripoli: ?? …http://monc.se/kitchen/124/introducing-tripoliTripoli - Wikipedia, the free encyclopediaFor the Lebanese city of the same name, see Tripoli, […]

Trackback at 9:43 am on May 13th, 2008 by Electriblog » Blog Archive » Estandarizando las hojas de estilo por defecto de los navegadores II: Tripoli:

[…] estancado. Pero unos meses después (el 16 de agosto), un diseñador sueco llamado David Hellsing lanzó el proyecto Tripoli, un conjunto de hojas CSS creadas para lograr exactamente lo que comentaba en mi apunte. […]

Trackback at 9:45 am on May 13th, 2008 by Electriblog » Blog Archive » Standardizing default browsers stylesheets II: Tripoli:

[…] so it stalled. But a few months later (on August 16th,) a Swedish designer called David Hellsing released the Tripoli project, a set of CSSs created to do exactly what I have stated on my post. Recently Tripoli reached beta […]

Trackback at 11:27 pm on June 12th, 2008 by Global CSS Reset Styles (Ultimate Collection) | IndoProTech.com:

[…] Tripoli Reset by David Hellsing is part of a complete CSS standard for (X)HTML rendering. By neutralizing […]

Trackback at 9:53 am on June 15th, 2008 by Yarden Wines:

Yarden Wines…

That’s why you need to jump on the Urban Wine Trail—with a passport to the East Bay. The East Bay Vintner’s Alliance has put together an event for a little over two weeks from now that should be a load of fun….

Trackback at 12:51 pm on July 30th, 2008 by Tripoli, a generic CSS standard for HTML rendering | What did you mean ?:

[…] a stable, cross-browser rendering foundation for your web projects". An example is here and a blog post is here. […]

Trackback at 1:41 am on December 30th, 2008 by Tripoli Beta | Castup:

[…] new to Tripoli, you might want to check out two earlier blog posts as the project was initiated: Introducing Tripoli and Tripoli Beta in […]

Trackback at 5:47 am on December 25th, 2009 by CMI Web Studio Blog » Reseting CSS Styles:

[…] Tripoli Reset by David Hellsing is part of a complete CSS standard for (X)HTML rendering. By neutralizing […]

Trackback at 2:57 am on March 2nd, 2010 by Tripoli Beta « DesignerLinks:

[…] new to Tripoli, you might want to check out two earlier blog posts as the project was initiated: Introducing Tripoli and Tripoli Beta in […]