<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mike Smullin &#187; framework</title>
	<atom:link href="http://www.mikesmullin.com/tag/framework/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mikesmullin.com</link>
	<description>Personal Blog</description>
	<lastBuildDate>Sat, 31 Jul 2010 00:06:14 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Blueprint: A CSS Framework</title>
		<link>http://www.mikesmullin.com/design/blueprint-a-css-framework/</link>
		<comments>http://www.mikesmullin.com/design/blueprint-a-css-framework/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 03:08:58 +0000</pubDate>
		<dc:creator>Mike Smullin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://www.mikesmullin.com/?p=405</guid>
		<description><![CDATA[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]]></description>
			<content:encoded><![CDATA[<div id="attachment_407" class="wp-caption aligncenter" style="width: 432px"><a href="http://www.mikesmullin.com/wp-content/uploads/2010/02/blueprint.png"><img class="size-full wp-image-407" title="Blueprint" src="http://www.mikesmullin.com/wp-content/uploads/2010/02/blueprint.png" alt="Blueprint" width="422" height="115" /></a><p class="wp-caption-text">&quot;Spend your time innovating, not replicating.&quot;</p></div>
<p style="text-align: center;">
<p><a href="http://blueprintcss.org/">Blueprint</a> is a <acronym title="Cascading Style Sheets">CSS</acronym> 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.</p>
<p>Blueprint offers:</p>
<ul>
<li>A <acronym title="Cascading Style Sheets">CSS</acronym> reset that eliminates the discrepancies across browsers.</li>
<li>A solid grid that can support the most complex of layouts.</li>
<li>Typography based on expert principles that predate the web.</li>
<li>Form styles for great looking user interfaces.</li>
<li>Print styles for making any webpage ready for paper.</li>
<li>Plugins for buttons, tabs and sprites.</li>
<li>Tools, editors, and templates for every step in your workflow.</li>
</ul>
<p>Of course, Blueprint isn&#8217;t the only choice. It&#8217;s just the most popular, according to Google Trends:</p>
<div id="attachment_440" class="wp-caption aligncenter" style="width: 599px"><a href="http://www.google.com/trends?q=960+css%2C+blueprint+css%2C+yui+css&amp;ctab=0&amp;geo=all&amp;date=all&amp;sort=3"><img class="size-full wp-image-440" title="CSS Framework Trends" src="http://www.mikesmullin.com/wp-content/uploads/2010/02/css-framework-trends.png" alt="" width="589" height="247" /></a><p class="wp-caption-text">keyword searches on Google</p></div>
<p style="text-align: center;">
<p>You may also be interested in <a href="http://960.gs/">960 Grid System</a>, or <a href="http://developer.yahoo.com/yui/">Yahoo! User Interface Library (YUI)</a>.</p>

<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-caring-old">
<ul class="socials">
		<li class="shr-blogger">
			<a href="http://www.blogger.com/blog_this.pyra?t&amp;u=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;n=Blueprint%3A+A+CSS+Framework&amp;pli=1" rel="nofollow" class="external" title="Blog this on Blogger">Blog this on Blogger</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;t=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-googlebookmarks">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework&amp;summary=%0D%0A%0D%0ABlueprint%20is%20a%20CSS%20framework%2C%20which%20aims%20to%20cut%20down%20on%20your%20development%20time.%20It%20gives%20you%20a%20solid%20foundation%20to%20build%20your%20project%20on%20top%20of%2C%20with%20an%20easy-to-use%20grid%2C%20sensible%20typography%2C%20useful%20plugins%2C%20and%20even%20a%20stylesheet%20for%20printing.%0D%0A%0D%0ABlueprint%20offers%3A%0D%0A%0D%0A%09A%20CSS%20reset%20that%20eliminates%20&amp;source=Mike Smullin" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-myspace">
			<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;t=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://www.mikesmullin.com/design/blueprint-a-css-framework/&amp;title=Blueprint%3A+A+CSS+Framework" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://www.mikesmullin.com/design/blueprint-a-css-framework/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Blueprint%3A+A+CSS+Framework+-+http://b2l.me/fkkv5&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-yahoomail">
			<a href="http://compose.mail.yahoo.com/?Subject=Blueprint%3A+A+CSS+Framework&amp;body=Link: http://www.mikesmullin.com/design/blueprint-a-css-framework/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A %0D%0A%0D%0ABlueprint%20is%20a%20CSS%20framework%2C%20which%20aims%20to%20cut%20down%20on%20your%20development%20time.%20It%20gives%20you%20a%20solid%20foundation%20to%20build%20your%20project%20on%20top%20of%2C%20with%20an%20easy-to-use%20grid%2C%20sensible%20typography%2C%20useful%20plugins%2C%20and%20even%20a%20stylesheet%20for%20printing.%0D%0A%0D%0ABlueprint%20offers%3A%0D%0A%0D%0A%09A%20CSS%20reset%20that%20eliminates%20" rel="nofollow" class="external" title="Email this via Yahoo! Mail">Email this via Yahoo! Mail</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.mikesmullin.com/design/blueprint-a-css-framework/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Compass: CSS Stylesheet Framework</title>
		<link>http://www.mikesmullin.com/development/compass-css-stylesheet-framework/</link>
		<comments>http://www.mikesmullin.com/development/compass-css-stylesheet-framework/#comments</comments>
		<pubDate>Fri, 05 Feb 2010 02:17:29 +0000</pubDate>
		<dc:creator>Mike Smullin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Ruby]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://www.mikesmullin.com/?p=367</guid>
		<description><![CDATA[Compass is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of CSS. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup. It&#8217;s]]></description>
			<content:encoded><![CDATA[<p><a href="http://compass-style.org/">Compass</a> is a stylesheet authoring framework that makes your stylesheets and markup easier to build and maintain. With compass, you write your stylesheets in Sass instead of <acronym title="Cascading Style Sheets">CSS</acronym>. Using the power of Sass Mixins and the Compass community, you can apply battle-tested styles from frameworks like Blueprint to your stylesheets instead of your markup.</p>
<p style="text-align: center;"><a href="http://www.mikesmullin.com/wp-content/uploads/2010/02/compass.png"><img class="aligncenter size-full wp-image-374" title="Compass" src="http://www.mikesmullin.com/wp-content/uploads/2010/02/compass.png" alt="Compass" width="357" height="95" /></a></p>
<p>It&#8217;s a Ruby on Rails project. You run a CLI utility that watches a directory where your .css and .sass reside. The changes you make to your .sass files get automatically parsed and translated to .css files. The .sass format allows you to have a simplified less repetitive stylesheet markup, in addition to the ability to use variables, functions, mathematic operations, and more.</p>
<ul>
<li>In <acronym title="Cascading Style Sheets">CSS</acronym>, ever wished you could store the color palette for your site design in a few variables and then just reference those variables through the stylesheet?</li>
<li>Ever wished you could perform cross-browser compatible mathematical addition on layout column widths?</li>
<li>Ever wished you could easily gather a library of  commonly used <acronym title="Cascading Style Sheets">CSS</acronym>, and then selectively include them in your various designs with a single line?</li>
</ul>
<p>Now you can, with <a href="http://compass-style.org/">Compass</a>.</p>
<p>Installation on Debian/Ubuntu 9.10 Karmic is like:</p>
<pre class="brush: bash;">
sudo aptitude install ruby gem; # dependencies
sudo gem sources --add http://gems.github.com/
sudo gem install chriseppstein-compass; # install
sudo gem install chriseppstein-compass-960-plugin; #optional plugin
compass -f blueprint project; # example usage
compass -r ninesixty -f 960 project; # example plugin usage
</pre>
<p>Looks promising! See <a href="http://wiki.github.com/chriseppstein/compass/getting-started">more detailed Compass install instructions</a>.</p>
<p>UPDATE: Since I posted this, I realized that using the Ubuntu/debian package management system (Aptitude) to try to install Ruby and Rubygems is a huge hassle and ultimately will not work. Now I use RVM. Like so for Ubuntu 10.04 64-bit server:</p>
<pre class="brush: bash;">
# installing rvm
# see also: http://rohitarondekar.com/articles/installing-rails3-beta3-on-ubuntu-using-rvm
sudo aptitude install curl git-core
bash &lt; &lt;( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
sed -i 's/^\[/# [/' ~/.bashrc
echo '[[ -s &quot;$HOME/.rvm/scripts/rvm&quot; ]] &amp;&amp; source &quot;$HOME/.rvm/scripts/rvm&quot;' &gt;&gt; ~/.bashrc
source ~/.bashrc

# dependencies for compiling Ruby
sudo apt-get install curl bison build-essential autoconf zlib1g-dev libssl-dev libxml2-dev libreadline6-dev
# dependencies for compiling my RubyGems gems
sudo aptitude install libpq-dev libmysql-ruby libmysqlclient-dev sqlite3 libsqlite3-dev libxslt-dev libxml2-dev imagemagick

# openssl package for RVM
rvm package install openssl

# readline package for RVM
rvm package install readline

# installing ruby
rvm install 1.9.2 -C --with-openssl-dir=$rvm_path/usr,--with-readline-dir=$rvm_path/usr
sudo -i
echo &quot;gem: --no-ri --no-rdoc&quot; &gt;&gt; /etc/gemrc
rvm use 1.9.2 --default
sudo ln -s `which ruby` /usr/bin/ruby1.9.2
</pre>
<p>This will get you on edge Rails and Ruby. Then from there its as simple as:</p>
<pre class="brush: bash;">
gem install compass
compass watch
</pre>
<p>&#8216;</p>
<p>And I no longer use 960gs. I prefer <a href="http://susy.oddbird.net/">Susy</a> now.</p>
<p>Hope this helps!</p>

<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-caring-old">
<ul class="socials">
		<li class="shr-blogger">
			<a href="http://www.blogger.com/blog_this.pyra?t&amp;u=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;n=Compass%3A+CSS+Stylesheet+Framework&amp;pli=1" rel="nofollow" class="external" title="Blog this on Blogger">Blog this on Blogger</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;t=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-googlebookmarks">
			<a href="http://www.google.com/bookmarks/mark?op=add&amp;bkmk=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Add this to Google Bookmarks">Add this to Google Bookmarks</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework&amp;summary=Compass%20is%20a%20stylesheet%20authoring%20framework%20that%20makes%20your%20stylesheets%20and%20markup%20easier%20to%20build%20and%20maintain.%20With%20compass%2C%20you%20write%20your%20stylesheets%20in%20Sass%20instead%20of%20CSS.%20Using%20the%20power%20of%20Sass%20Mixins%20and%20the%20Compass%20community%2C%20you%20can%20apply%20battle-tested%20styles%20from%20frameworks%20like%20Blueprin&amp;source=Mike Smullin" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-myspace">
			<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;t=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Post this to MySpace">Post this to MySpace</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/&amp;title=Compass%3A+CSS+Stylesheet+Framework" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://www.mikesmullin.com/development/compass-css-stylesheet-framework/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Compass%3A+CSS+Stylesheet+Framework+-+http://b2l.me/fkg2e&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-yahoomail">
			<a href="http://compose.mail.yahoo.com/?Subject=Compass%3A+CSS+Stylesheet+Framework&amp;body=Link: http://www.mikesmullin.com/development/compass-css-stylesheet-framework/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A Compass%20is%20a%20stylesheet%20authoring%20framework%20that%20makes%20your%20stylesheets%20and%20markup%20easier%20to%20build%20and%20maintain.%20With%20compass%2C%20you%20write%20your%20stylesheets%20in%20Sass%20instead%20of%20CSS.%20Using%20the%20power%20of%20Sass%20Mixins%20and%20the%20Compass%20community%2C%20you%20can%20apply%20battle-tested%20styles%20from%20frameworks%20like%20Blueprin" rel="nofollow" class="external" title="Email this via Yahoo! Mail">Email this via Yahoo! Mail</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.mikesmullin.com/development/compass-css-stylesheet-framework/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
