CSS templates

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

CSS templates

Post by McGruff »

Got some links for CSS templates? Post here.

Due to the quirky implementation of css in various browsers, it can be very difficult to create a solid css-based layout which works for all. This sticky topic aims to provide a list of tried and tested css layouts to save you hours of frustration.

To kick it off:

css-discuss Wiki - a great source of css info including links to css layouts.
glish
blue robot
Roja
Tutorials Group
Posts: 2692
Joined: Sun Jan 04, 2004 10:30 pm

Post by Roja »

The ultimate list of css resources (hundreds) : http://dezwozhere.com/links.html
hrvoje461
Forum Newbie
Posts: 3
Joined: Fri Jul 21, 2006 9:44 am
Location: Croatia

Post by hrvoje461 »

You can check http://www.getcsstemplates.com and download all css templates for free.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

CSS Play has some nice CSS features including menus. It's worth a look especially as the menus don't use any javascript.
User avatar
AKA Panama Jack
Forum Regular
Posts: 878
Joined: Mon Nov 14, 2005 4:21 pm

Post by AKA Panama Jack »

Heck, what I want is a CSS WYSIWYG type editor similar to Dreamweaver. Where div tags are used instead of tables and rows. When you click on the button that looks like tables it asks for how many rows and and how many columns and creates them using div tags and builds the needed classes automatically.

In otherwords a full featured editor like Dreamweaver that doesn't use rows and tables. So far I haven't found anything remotely close. They all rely on you building the CSS style manually. Dang it, it's about time someone came out with a REAL CSS editor and not the lame stuff that claims to be a CSS editor but is really just a style sheet editor.

<grumbles>
davidtube
Forum Commoner
Posts: 79
Joined: Sun Mar 25, 2007 8:42 pm

Re: CSS templates

Post by davidtube »

Have you tried Microsoft Expression Web? It's much more css orientated that dreamweaver. If you're happy with internal css you could probably design a whole static css site with the wysiwyg. I'm not an expert with it but I sometimes use it for debugging my css layout issues.

Back to the main topic:
I've been looking for good css templates for a while. I've bought a couple and been disappointed with them. They look very fancy which is important, but they aren't as customizable as you would expect a proper CSS site (that you paid for) to be. For example they use for text, so you need to photoshop the image to show your company name or whatever. They also use background images for boxes and boarders, forcing you to restrict the size of your content. I'm pretty new to CSS myself so let me know if I'm missing the point.

Anyway I've just checked http://www.getcsstemplates.com and this is much more the sort of thing I'm looking for with good css layout/appearance. Only problem is there's not many templates. Does anyone know where I can get more of the sort of thing I'm looking for?
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: CSS templates

Post by volomike »

To get good browser compatibility, I start with Blueprint CSS (the link moves, so Google for it) and learn the grid system, then tweak from there with relative positioning. But then the tweaks look differently sometimes in different browsers, so I follow the Blueprint CSS with this:

Code: Select all

<link rel="stylesheet" href="DEFAULT.css" type="text/css" media="screen, projection" />
<!--[if lt IE 7]>
<style type="text/css">@import "IE6.css";</style>
<![endif]-->
<!--[if IE 7]><style type="text/css">@import "IE7.css";</style><![endif]-->
<script type="text/javascript">
function IsOpera(){
try {
    if (window.opera) {
        document.write("<link href='OPERA.css' rel='stylesheet' type='text/css' media='screen, projection' />");
    }
}catch(operacheck){}        
}
window.onload= IsOpera();
</script>
So, beyond Blueprint CSS, this extra bit of code then gives me a DEFAULT.CSS that applies to all browsers (including FF and Safari), an IE6.css, an IE7.css (for IE7 and up), and an OPERA.css for all versions of Opera.

By using this technique, it really has cut down on my cross-platform testing considerably, although all pages still require a short look-over in other browsers.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS templates

Post by matthijs »

If you are using Blueprint you shouldn't need so many browser hacks. Even in general if you use CSS it shouldn't be necessary. The whole idea of using a "framework" or set of base stylesheets is that those hacks aren't needed anymore because you start with a solid foundation and the main cross-browser issues have been dealt with. I've never had one single problem in Opera for the last 4 years, so am surprised you need to have a separate stylesheet for that browser.

What I usually do is start with a reset (the one from Eric Meijer is pretty good), a base for the typography (maybe the rules from Blueprint if I want fonts in px), and then build my own grid rules. I tried the grid stylesheets of frameworks like Blueprint but it's a bit too much. It's like going back to mixing presentation and markup all over again, adding "span-6 column last" to every "block" in the HTML. Might as well just put a table in there (not that I have ever used that).

Using a grid stylesheet like Blueprints, if I want to change the way my site looks (presentation!) I have to go in the HTML itself and change all those "spans-X column-Y". While if I had written my own "semantic" html it's a matter of changing in my single stylesheet:
#maincontent { float:left;width:450px; } to #maincontent { float:right;width:400px; } and I never have to touch the HTML.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: CSS templates

Post by volomike »

Ultimately it would be ideal to have an analyzer run on the XHTML and the various CSS files (Blueprint + your own) and determine one single CSS for all browsers (the default), and then one for IE7+, IE6, and Opera, leaving you with a consolidated, compact set of CSS in 4 CSS files, with the IE7, IE6, and Opera ones being very tiny and just tweaks specific to their platform.

I think Blueprint has some kind of analyzer script like that and I think it's a Ruby script -- haven't used it though. There's some kind of Ruby script that comes inside of Blueprint.

I use Blueprint, but then I nudge things off the grid slightly from that, or I do a float left or float right.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS templates

Post by matthijs »

But the thing is, you don't need 4 files to start with. That's just not necessary. You do only need one small file to start with. A small set of reset rules, a few for typography and if you really want a few rules for layout (grid) to start. Absolutely no need for any browser hacks at that point.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: CSS templates

Post by volomike »

Well, I haven't had that kind of luck. For the complex Web 2.0 graphic stuff I do for clients in a page, I've had to use 4 files, minimum: GENERAL.css (for all browsers), IE6.css, IE.css (IE7 and up), and OPERA.css. This is even when using Blueprint's built-in reset inside of GENERAL.css. I really, really, really don't want to do this, but I found that the positioning was not 100% exactly the same in each browser on some items unless I tweaked them up, down, left, or right with relative positioning.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Re: CSS templates

Post by matthijs »

Well, I don't think it's about luck. Maybe it's not the browsers, but the way you do things which could be further improved (to word it carefully, no offense ;) ). Maybe it's just that you have been unlucky. But in general pixel-perfect complex layouts with boxes in boxes of all sizes and shapes are possible cross-browser, without hacks.
sweb
Forum Newbie
Posts: 18
Joined: Tue Oct 30, 2007 6:32 am
Location: Iran (Semnan)

Re: CSS templates

Post by sweb »

http://www.freecsstemplates.org
  • Released for FREE under the Creative Commons Attribution 2.5 license
  • Very lightweight in terms of images
  • Tables-free (ie. they use no tables for layout purposes)
  • W3C standards compliant and valid (XHTML Strict)
:drunk:
Pitter
Forum Newbie
Posts: 1
Joined: Thu Sep 11, 2008 5:33 am

CSS FAQ

Post by Pitter »

My favorite programming cashing style sheet programming. I follow this website
http://www.css-faq.com/
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: CSS templates

Post by volomike »

Here's a CSS hack include that I'm using to separate out my CSS by Firefox (and default), Safari/Chrome(Webkit), Opera, IE (All), and IE6.
  • You'll need to set a variable before use. The U variable below is a constant for the URL, such as http://mysite.com, and must end in a slash (as far as my file is concerned.)
  • Again, another variable -- the P variable is a constant for the physical where the website is, such as /var/www/mysite.com/ (again, ends in a slash as far as my file is concerned).
  • I use the U and P constants because I have an .htaccess RewriteRule letting me make custom URLs, so it messes up the relative pathing and I have to do absolute pathing to everything.
  • I tried using a link rel trick to load the style sheet for Opera and Safari/Chrome/Webkit, but Firefox kept interpreting it. So, I had no choice but to implement it the way you see below. I also tried the @import directive instead of a require() statement, and Safari and Opera didn't understand how to load the @import directive like FF and IE does. I would actually prefer the @import trick or something similar because it would reduce the file download that FF and IE would have when they hit the Opera and Safari handler sections.
  • You can use require_once(), include_once(), require(), or include() for including files. The *_once() have an extra CPU step and evidently don't run well in an APC cache? That's what I heard. The difference between a require() and an include() is that the require() will generate a fatal error, while the include() will generate a warning. I like fatal errors when a file I want to load is not there. So, I use require().
  • You may see some comments below in the source. If you think those cause a performance problem -- remove them. To me, a PHP script actually gets compiled into bytecode, and the comments don't end up there once compiled. This occurs on first run of the script, and so the file runs faster after that. So, I'm not certain about the comments -- only a suspicion.
  • I have like no clue how to separate out CSS just for Google Chrome. I'd like to find out how. All the CSS hacks I have heard about don't seem to delineate between Safari and Google Chrome. Perhaps they previously did, but they don't seem to work for me anymore on the Safari and Google Chrome I have now.
Feel free to suggest improvements to the file below.

Code: Select all

<?php ?>
<? /*
***************************************************
  DEFAULT STYLING (AND FIREFOX)
***************************************************  
*/ ?>
<link rel="stylesheet" media="all" href="<?= U ?>css/default.css"/>
<style type='text/css'>
 
<? /*
***************************************************
  SAFARI & GOOGLE CHROME STYLING (WEBKIT STYLING)
***************************************************  
*/ ?>
@media screen and (-webkit-min-device-pixel-ratio:0){
<? require(P . 'css/safari.css'); ?>
}
 
 
<? /*
***************************************************
  OPERA STYLING
*************************************************** 
*/ ?>
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){
<? require(P . 'css/opera.css'); ?>
}
</style>
 
 
<? /*
***************************************************
  IE (ALL) STYLING
***************************************************  
*/ ?>
<!--[if IE]>
<link rel="stylesheet" media="all" href="<?= U ?>css/ie.css"/>
<![endif]-->
 
 
<? /*
***************************************************
  IE6 STYLING
***************************************************  
*/ ?>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" href="<?= U ?>css/ie6.css"/>
<![endif]-->
Post Reply