SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: CSS Frameworks

  1. #1
    SitePoint Guru
    Join Date
    Sep 2004
    Posts
    613
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Frameworks

    We're about to recode our entire site to use the proper style of setup seperating the CSS, HTML, and PHP the way they should be; 3 seperate elements.

    My question is, we're currently experiencing quite a few cross browser issues on the site and are really looking to implement some kind of Framework or something which will help fix width issues. We look at the YUI framework and were using it, then we found a critical error in it and are no longer planning on using it. Details of the error I do not know as my CSS developer found it.

    My question is, what's a good framework to use to base your entire site around CSS/structural wise?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    None. CSS frameworks are useless unless they have HTML to go with them. The best thing to do is go with a CSS reset and then work your way from there.

    What I also do on the HTML side is use an actual IMG element for the header (with the image contained inside a DIV that can have a background applied to it if need be), an unordered list for the menu, a DIV containing another DIV which in turn holds the page content (the inner "wrapper" DIV is used as a CSS hook), any sidebars I may require, and finally the footer.

    Here's the CSS reset I use for my projects:

    Code CSS:
    /* CSS RESET RULES */
    html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
    col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
    ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
    sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    	margin: 0;
    	padding: 0;
    	vertical-align: baseline;
    }
     
    body {
    	background: #FFF;
    	color: #000;
    	font: 85%/150% tahoma, verdana, arial, helvetica, sans-serif;
    	letter-spacing: 1px;
    }
     
    code, pre {
    	white-space: pre;
    }
     
    del {
    	text-decoration: line-through;	/* it's deleted text - show it as such */
    }
     
    dfn {
    	font-style: italic;
    	font-weight: bold;
    }
     
    em {
    	font-style: italic;
    }
     
    fieldset {
    	border: 0;			/* we'll be applying a border to a DIV with the class of "fieldset" later on, so this isn't needed */
    	display: inline;			/* this squashes an IE float bug */
    }
     
    h1, h2, h3, h4, h5, h6 {
    	font: bold 100%/150% georgia, garamond, "times new roman", times, serif;
    }
     
    img {
    	border: 0;			/* this squashes a Firefox bug */
    	vertical-align: bottom;		/* this squashes an IE bug */
    }
     
    ins {
    	text-decoration: none;
    }
     
    strong {
    	font-weight: bold;
    }
     
    tt {
    	display: block;
    	margin: 0.5em 0;
    	padding: 0.5em 1em;
    }
     
    .skip {
    	position: absolute;
    	left: -999em;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •