tools
libraries
conventions
- naming conventions: Make a Naming Conventions Chart
Create a chart of agreed upon naming conventions for all parts of your framework. A web design comparison table of naming conventions by industry professionals is available at stuffandnonsense.co.uk. - other conventions
- 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, settingmarginandpaddingto 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 baseline-heightsetting 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, buttonsnavigation tabs:
ul.tabs li {border: none;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
background-image: url('/images/tabs/ »
site-specific-tab-look.jpg');
}- 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.
- Vertical navigation with one content column
- Vertical navigation with two columns of content
- Horizontal navigation with one content column
- Horizontal navigation with 2 columns of content
- Horizontal navigation with local navigation and one column of content
- Horizontal navigation with local navigation and 2 columns of content
- four preset page widths,
- six preset templates, and
- the ability to stack and nest subdivided regions of two, three, or four columns.
- The 4kb file provides over 1000 page layout combinationss YUI
- Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
- Supports easy customization of the width for fixed-width layouts.
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"]
#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?
- Header
- Main content
- Sub content
- Local nav
- Main nav
- 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
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
