Thursday, November 29, 2007

CSS Framework will make your life easier

please pardon my mess. information is in the process of being collected for this subject.

tools

libraries

conventions
best practices
  • W3C Web Standards (XHTML/CSS Validation)
  • Accessibility (content preceeds the navigation) [Flexible in response to user initiated font-size adjustments.]
  • content should dictate our layout, not the other way around (one single XHTML might not be the solution)
  • SEO [Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).]
  • Accomodates IAB's Ad Unit Guidelines for common ad dimensions.
  • Cross-browser compatibility - Offers full A-grade browser support.

examples of things web designers use on every project that can be abstracted
  • reset.css—handles the mass reset. A “mass reset” of default browser styles. For example, setting margin and padding to 0 on all elements, turning off borders on framesets and images, etc. (see also: Global White Space Reset) (Eric Meyer's Resetting Again)
  • type.css—handles the typography. good typography - stylesheet that sets up the typography and Aligning the type to a consistent baseline. This includes things like setting the margins on block level elements like paragraphs, headers, and lists to the same value as (or some multiple of) the base line-height setting for the site. Relative font-sizes everywhere; typography examples are available at How to size text in css and Compose to a Vertical Rhythm
  • Creating basic styles for forms.
  • Creating a few CSS classes I always use, such as .hide (where I set the display value to none) and .mute (which I set to a smaller type size and sometimes a lighter color).
  • grid.css—handles the layout grid. same basic 16-unit grid structure or An easily customizable grid (like in google blueprint )
  • widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. common widgets, like drop-down menus, navigation tabs, buttons
  • navigation tabs:  
    ul.tabs li {
    border: none;
    background-image: url('/images/tabs/ »
    site-specific-tab-look.jpg');
    }       All the work of floating the list items the to the left and making the links  inside them display as blocks (also floated to the left) with the text centered  in the middle
  • list of photos that appear as thumbnails
  • hacks and workarounds (such as those that accommodate older browsers) tend to be too site-specific
  • base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework. careful: adds to the number of HTTP connections
  • stylesheet for printing
  • An extendable plugin system
  • Support for PNG transparency in IE5.5+ (js)
  • Liquid layout version
  • support for external navigation
  • fixes like class="clearfix"
  • cross-browser compatibility: like alt css for ie6 or gte ie 6; examples and info are at CSS Bugs in IE5.x Mac, Will the browser apply the rule(s)?, My CSS Framework
  • page loads differently for different resolutions
  • Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
  • Layouts less than 100% are automatically centered.

Any framework must account for the most common layouts, otherwise it'll never get used.

for multiple pages can use Body ids to switch styles

adjusting layout will use some tricks:
Dunstan published his absolutely positioned menu technique
negative margin tricks : Ryan Brill posted about them on Mezzoblue
floated layouts : clearfix method by Tony Aslett
Floats, Margins and IE


common building blocks in the above 6 layouts?

  • Header
  • Footer
  • Main content
  • Sub content
  • Main nav (#nav-main rather than #main-nav) [programers call nav used on every page of site "global navigation"]
  • Local nav [prgrammers call section nav "local"]
others building blocks

#branding
#branding-logo
#branding-tagline
#container for pg container or #page
#nav or #navigation
#nav-section for nav for that section of the site that you are in
#nav-external for external links
#nav-supplementary or #nav-supp for supplementary links commonly found in the footer; (they are suggesting that this could replace the footer but that would not be useful for a framework)
#search
#search-input [search form]
#search-output [search results]
#content
#content-main
#content-news
#siteinfo
#siteinfo-legal [copy right]
#siteinfo-credits
'related-links'
date
rss


blog:
--- .entry
---- .entryTitle,
.entryAuthor,
.entryAuthorEmail,
.entryCreated,
.entryModified,
.entryContent,
.entryChildren.

ecom:
#content-products
.products
.products-prices
.products-description
.products-review


structure our websites?

  1. Header
  2. Main content
  3. Sub content
  4. Local nav
  5. Main nav
  6. Footer





Read More at:

Yahoo!'s YUI Grids CSS

? CSS Framework Themes: a collection of different sets by multiple contest entrants
? My CSS Framework by Karl Dawson
? Schema by David Golding
? Modular CSS
? Smashing Magazine's CSS Frameworks
Schema Web Design Framework - David Golding Design
Yahoo! UI Library Grids CSS







Sources:
Frameworks for Designers by Jeff Croft at alistapart.com

Google's Blueprint CSS credits Jeff Croft, Nathan Borror, Christian Metts, & Eric Meyer

A CSS Framework by Mike Stenhouse at contentwithstyle.com

My CSS Framework by The Standards Guy



? Not Reviewed Yet
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)