Group items tagged

Saturday   Photoshop template included for color customization. Pre-built in light green/auburn. Dolphin   Photoshop template included for color customization. Pre-built in blue. Fox   Photoshop template included for color customization. Pre-built in red. Background color controlled in css. Slate   Photoshop template included for color customization. Pre-built in red, blue, green and purple. Wax   Photoshop template included for color customization. Pre-built in blue, orange, red, green and grey. Style #1 Photoshop template not included. Pre-built in grey/blue. Style #2 Photoshop template not included. Pre-built in grey/blue. Style #4 Photoshop template not included. Pre-built in red/grey. Top red line controlled via CSS. Style #5 Photoshop template not included. Pre-built in dark blue. Bottom pink-ish line controlled nia CSS.    

How should a CSS framework be built? There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets: reset.css—handles the mass reset. type.css—handles the typography. grid.css—handles the layout grid. widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons. 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.

A word of caution This method works quite well, but there is a valid concern to be raised: it adds to the number of HTTP connections needed to render each page. On large, high-traffic sites, adding five more HTTP connections to every page view may result in angry system administrators. Two possible solutions to this are: Include everything in a single file, rather than breaking it into modules. The problem here is that you lose the ability to include only certain parts of the framework, and you also make maintenance more difficult. Have a server-side process that dynamically flattens the individual files into a single response. I’ve not seen this done, but it could be very efficient if done well. Using my example framework above, this dynamic process could occur when base.css is requested, but not when type.css, grids.css, etc. are. This way, the individual components are still available, but the entire framework is available in a flattened version, as well.

Total found:32

Grids & Typography Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. The main goal of the article was getting the maximum number of layouts based on the same markup, each with valid CSS and HTML, without hacks nor workaround and a good cross-browser compatibility. The result is a set of 40 layouts that we've thought worth sharing: on each of them you'll find also a download link (if you want, you can download the entire collection, 40 HTML pages in a single zip file). Further details can be found below the gallery.

Here is a quick summary for those of you who don't want to read the whole article: Always use strict doctype and standards-compliant HTML/CSS Always use a reset at the start of your css Use opacity:0.99 on text elements to clean up rendering in Safari Never resize images in the CSS or HTML Check font rendering in every browser. Don't use Lucida Size text as a % in the body, and as em's throughout All layout divs that are floated should include display:inline and overflow:hidden Containers should have overflow:auto and trigger hasLayout via a width or height Don't use any fancy CSS3 selectors Don't use transparent PNG's unless you have loaded the alpha

When it comes to understanding the world of standards based design, you have to think medieval. Creating a web site in CSS is like building a manor. You are a lord, setting aside land for specific purposes, hoping the user rotates their content appropriately. Most of you will build villages attracting only a few peasants to comment on various decrees, some of you will build castles and a very small number will build what I can only describe as cathedrals—structures that warrant pilgrimages from thousands across the globe.