Archive

Archive for the ‘CSS’ Category

yui compressor example


yui-compressor –type css /home/batman/Dropbox/production/alpha/httpdocs/css/bd.css -o combo.css –charset utf-8

Advertisements
Categories: CSS

Print Meida CSS – Check List

October 25, 2010 Leave a comment

Print Friendly Page
(dark / black backgrounds won’t print)
font-size:100%;
serif-font
avoid floating
colors to black
display none for pages you don’t to show

css code
<link rel=”stylesheet” href=”css/master.css” type=”text/css” media=”screen”>
<link rel=”stylesheet” href=”css/print.css” type=”text/css” media=”print”>

You can combine these two into one
@media screen {} //anything between these brackets is screen
@media print {} //nest the print rules

Categories: CSS

Finished Site Check List – CSS

October 25, 2010 Leave a comment

Finished Site Check List

CSS Usage – FireFox Addon (Detects Unused Css Rules)
Validate CSS
Validate HTML
Increase Font Size
Test WithOut Images – (White Text On White Background)
Turn Off CSS

Cross Browser Testing
Test Agreed Devices
http://www.browsercam.com
https://browserlab.adobe.com

Measure Page Load
http://www.webpagetest.org – specifically tests IE
http://tools.pingdom.com/fpt/

FireFox
Y!SLOW

Reduce Image Sizes
Add width and height to inline images (Improves Speed.. but presentational?)

Categories: CSS

CSS header – for neatness

October 12, 2010 Leave a comment

/* ——————————–
Site:
CSS author:
Updated:
Updated by:
———————————–*/

/* ———————————
brief description
———————————–*/

Categories: CSS

yui-compressor before and after shot.


before yui-compressor (562 bytes):

AFTER (469 bytes)

Categories: CSS

Yui compressor – an easy way to minify your .css files


Yahoo!  open sourced, free of charge, an easy to use linux command line tool to minify your javascript and css.

The fantastic product I speak of is called “yui-compressor”. Yui compressor strips your .css or .js file of as much whitespace as possible. For javascript, yui-compressor shortens your variable names, usually making them only a single character long, or a little longer.

Another useful feature of yui-compressor that I found is that it can combine multiple.css or .js files, and then compress them.

For example, as I develop, I like to keep many .css files for the different elements of the page I’m working on. I’ll have “toolbar.css”, “hd.css”, “bd.css”…. and so on.Of course, it makes no sense for me to send several .css files over the wire,so I combine them in a combo file.

Here is how to combine multiple .css files with yui compressor

1. Fire up the terminal, go to the directory of your .css files

2. Find the files you want to compress, in our case y.css, u.css, i.css

3. Type  "yui-compressor --type css y.css, u.css, i.css -o combo.css --charset utf-8"

4. Your files are now combined, and minified in combo.css from yui-compressor

On ubuntu you can get yui-compressor from synaptic.

Here is a screen shot:

Categories: CSS

css tables – a simple 3 column layout


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type = "text/css"> .table, .tr, .td {border:1px solid #ff0000;} .table {display:table; width:100%} .tr {display: table-row;} .td {display: table-cell;} </style> </head> <body> <div class="table"> <div class="tr"> <div class="td nav">left</div> <div class="td main">Content</div> <div class="td right-nav">right</div> </div> </div> </body> </html>
Categories: CSS