Category Archives: CSS

Sweet! Chrome as Live JavaScript, CSS, HTML editor

Yesterday it occurred to me as I was editing styles with Chrome’s Developer Tool that there should be something to automatically list for me the differences in the stylesheet before and after the changes I made, so I could just add the different rules across all the selectors to my stylesheet by copy and paste. I started googling and found one better: Chrome DevTools Autosave (by Nikita Vasilyev).

Took me 15 minutes to install and configure but it actually saves any changes you make directly to the static files on the server. Albiet, it does not work with PHP, HAML, SCSS/SASS or any of the server-side exclusive scripts, but I still found it helpful for my purposes. I was editing a stylesheet generated by compass, but I can still use `git diff` to see what changed and copy/paste those changes into my original SCSS file.

Check it out. Especially if you do a lot of slicing and themeing, I’m sure it has potential to be a big time saver for you, as well.

Credit: http://addyosmani.com/blog/autosave-changes-chrome-dev-tools/

Gridded Layouts and Simplified Markup

Really sold on gridded layouts lately. Loving the SASS version of 960.gs provided as a plugin for Compass. Albeit, have made some of my own improvements to it so my custom one is a little better. Will share that later.

For now, recommended you check out the following projects:

Very cool combination for Rapid Application Development (RAD). Especially applied to web design.

Blueprint: A CSS Framework

Blueprint

"Spend your time innovating, not replicating."

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Blueprint offers:

  • A CSS reset that eliminates the discrepancies across browsers.
  • A solid grid that can support the most complex of layouts.
  • Typography based on expert principles that predate the web.
  • Form styles for great looking user interfaces.
  • Print styles for making any webpage ready for paper.
  • Plugins for buttons, tabs and sprites.
  • Tools, editors, and templates for every step in your workflow.

Of course, Blueprint isn’t the only choice. It’s just the most popular, according to Google Trends:

keyword searches on Google

You may also be interested in 960 Grid System, or Yahoo! User Interface Library (YUI).

CSS Sprite Generator

My PHP-CLI CSS Sprite Generator allows you to combine any number of images in a given directory into a select few composite CSS Sprite images. Also generates a stylesheet.

Source code documentation snippet explains details:


/**
 * CSS Sprite Generator
 *
 * Combine any number of images in a given directory into a select few composite
 * CSS Sprite images. (e.g. one for horizontally-repeating, one for vertically-
 * repeating, and one for images that do not repeat like buttons.)
 *
 * Also generates an accompanying CSS stylesheet you can copy/paste from and use
 * as a guide in obtaining the x-y coordinates as well as the width/height
 * dimensions of your sliced images as they are located in the corresponding
 * composite image.
 */
 
CSS Sprite Generator
Usage: css-sprite.php [OPTION]... [PATH]
 
 --path <path> Path where sliced images reside. Default is current working
 directory where the program is launched.
 --prefix <prefix> Optional prefix used in output filenames for composite
 images. Default is "sprites".
 --matte <rgb> RGB color matte. Default is "255,255,255" which is white.
 For PNG 24-bit transparency, use "transparent".
 
Naming files:
 
 The suffix of your sliced image filenames determines how they are composited:
 
 -x = horizontally repeating (repeat-x)
 -y = vertically repeating (repeat-y)
 -n = not repeating (no-repeat)
 
 Filename examples:
 
 border1-bottomleftcorner-n.png
 border1-bottommiddle-x.png
 border1-middleright-y.png
 
 Note that images which repeat on BOTH the X and Y axis, such as tiled
 backgrounds, must be contained within their own image and cannot be used in
 CSS sprites for obvious reasons.
 
 You can also modify the files as they are composited:
 
 -pr<pixels> = add padding to the right of the image
 -pl<pixels> = add padding to the left of the image
 
 Filename examples:
 
 border1-middleleft-y-pr300.png
 border1-middleright-y-pl300.png

Check it out:

mikesmullin’s CSS-Sprite-Generator at master – GitHub.

Will add more documentation soon.