PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Fri Jun 23, 2017 12:12 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 27 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: CSS templates
PostPosted: Wed Sep 07, 2005 7:12 pm 
Offline
DevNet Master

Joined: Thu Jan 30, 2003 9:26 pm
Posts: 2893
Location: Glasgow, Scotland
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


Top
 Profile  
 
 Post subject:
PostPosted: Wed Sep 07, 2005 8:24 pm 
Offline
Tutorials Group

Joined: Sun Jan 04, 2004 11:30 pm
Posts: 2692
The ultimate list of css resources (hundreds) : http://dezwozhere.com/links.html


Top
 Profile  
 
 Post subject:
PostPosted: Wed Aug 09, 2006 4:18 am 
Offline
Forum Newbie

Joined: Fri Jul 21, 2006 9:44 am
Posts: 3
Location: Croatia
You can check http://www.getcsstemplates.com and download all css templates for free.


Top
 Profile  
 
 Post subject:
PostPosted: Tue Nov 21, 2006 3:32 am 
Offline
DevNet Resident
User avatar

Joined: Tue Mar 16, 2004 11:03 am
Posts: 1425
Location: Aachen, Germany
CSS Play has some nice CSS features including menus. It's worth a look especially as the menus don't use any javascript.


Top
 Profile  
 
 Post subject:
PostPosted: Tue Nov 21, 2006 4:28 am 
Offline
Forum Regular
User avatar

Joined: Mon Nov 14, 2005 5:21 pm
Posts: 878
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>


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Fri Apr 04, 2008 6:00 am 
Offline
Forum Commoner

Joined: Sun Mar 25, 2007 8:42 pm
Posts: 79
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?


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sat May 24, 2008 12:14 am 
Offline
Forum Regular
User avatar

Joined: Wed Jan 16, 2008 10:04 am
Posts: 633
Location: Myrtle Beach, South Carolina, USA
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:

Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sat May 24, 2008 2:41 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sat May 24, 2008 4:53 pm 
Offline
Forum Regular
User avatar

Joined: Wed Jan 16, 2008 10:04 am
Posts: 633
Location: Myrtle Beach, South Carolina, USA
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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sun May 25, 2008 2:43 pm 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sun May 25, 2008 8:05 pm 
Offline
Forum Regular
User avatar

Joined: Wed Jan 16, 2008 10:04 am
Posts: 633
Location: Myrtle Beach, South Carolina, USA
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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Mon May 26, 2008 1:25 am 
Offline
DevNet Master

Joined: Thu Oct 06, 2005 3:57 pm
Posts: 3360
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.


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Wed Jul 09, 2008 5:27 pm 
Offline
Forum Newbie

Joined: Tue Oct 30, 2007 6:32 am
Posts: 18
Location: Iran (Semnan)
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:


Top
 Profile  
 
 Post subject: CSS FAQ
PostPosted: Thu Sep 11, 2008 5:38 am 
Offline
Forum Newbie

Joined: Thu Sep 11, 2008 5:33 am
Posts: 1
My favorite programming cashing style sheet programming. I follow this website
http://www.css-faq.com/


Top
 Profile  
 
 Post subject: Re: CSS templates
PostPosted: Sat Jan 10, 2009 1:01 am 
Offline
Forum Regular
User avatar

Joined: Wed Jan 16, 2008 10:04 am
Posts: 633
Location: Myrtle Beach, South Carolina, USA
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.

Syntax: [ Download ] [ Hide ]
<?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]-->


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 27 posts ]  Go to page 1, 2  Next

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group