<?xml version='1.0'?><feed xmlns:opensearch='http://a9.com/-/spec/opensearch/1.1/' xmlns:s='http://jadedpixel.com/-/spec/shopify' xmlns='http://www.w3.org/2005/Atom'><id>http://www.charlestoncreative.com/blogs/evolution-blog</id><title>Evolution Design - Evolution Blog</title><author><name>Evolution Design</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog' rel='self'/><link href='http://www.charlestoncreative.com/blogs/evolution-blog' rel='alternate'/><updated>2010-02-05T12:33:37-05:00</updated><entry><id>tag:db1@shopify.com,2010:articles/1463052</id><title>Centering (horizontally and vertically) an image in a box</title><summary type='html'><![CDATA[
<div class='posterous_autopost'><div class="posterous_bookmarklet_entry"> <blockquote class="posterous_long_quote"><h1>Centering (horizontally and vertically) an image in a box</h1>  <h2>The problem</h2>  <p>We want to center an image inside a container, bigger than the image and with assigned dimensions. The image is not a background one, it’s a true <code>&lt;img&gt;</code> element.</p>  <p>Any image has well defined dimensions, so the easiest and most reliable way to solve the problem is:</p>  <ul>  <li>make the image <code>display:block</code></li>  <li>assign to the image the needed left and top <code>margins</code> to get it centered in the container. Each of this margin value is obviously half the difference between a dimension of the container and that of the image.</li>  </ul>  <p>For example if you have images of two different sizes, like in a photo gallery with “landscape” and “portrait” images, to be centered in fixed size containers, then assigning to each &lt;img&gt; one of two classes (with different margins) will solve the problem.</p>  <p>But there are cases when one does not want to use the previous method. For example when many images, all with different dimensions are involved and it is not practical to assign different margins to each of them, or when the dimensions of the container and those of the image are not expressed in the same units (<code>px</code>, <code>em</code>, <code>%</code>, …) hence the difference cannot be computed. It’s useful to have a different solution, independent on the image’s size.</p>    <h2>A solution</h2>  <p>The horizontal centering is not difficult. If the image is left with its default <code>inline</code> display, then <code>text-align: center</code> is the obvious solution, working well in all browsers.display: block, then the usual method for horizontal centering of blocks can be applied, consisting in <code>margin-left:auto; margin-right:auto</code> (plus <code>text-align: center</code> on the container for IE5.x/Win.) --></p>  <p>For the vertical centering the best solution, working in modern browsers, is to assign <code>display: table-cell; vertical-align: middle</code> to the container. This works in Gecko based browsers, Opera 6+, Safari, IE8. It leaves IE7 and lower (both Windows and Mac) out.</p>  <p>For IE7- the idea is to create a sort of line-box having as height the height of the container, and the using again <code>vertical-align: middle</code>. The <code>line-height</code> property cannot be used to achieve this, since it <a href="http://www.brunildo.org/test/img_center.htmlIElineheight.html" title="line-height problem with images in IE/Win">doesn’t work</a> correctly in IE7-/Win in presence of images. Also the use of a big <code>font-size</code> (without specifying line-height) is problematic, because the height of the generated box is slightly bigger than the font-size.  And IE5/Mac (differently from IE/Win) is able to resize (according to user choice) line-height and font-size expressed in pixels, so it would have problems with this approach, unless the height of the container is expressed in em. Note: this same argument precludes the general use of such vertical centering method, based on line-height, in Gecko based and Safari browsers.</p>  <p>Fortunately IE7- has (partial) support for <code>display: inline-block</code>. If an empty inline-block element (for example a <code>span</code>) is added inside the container and it is assigned <code>height: 100%; vertical-align: middle</code> then it allows to precisely get what we want: a line box with the desired height. In other words, the inline-block element respects an assigned height (equal to the container’s one) and props the line open, so that <code>vertical-align: middle</code> (both on the extra element and the image) gives the desired vertical centering.</p>  <p>Some details:</p>  <ul>  <li>The extra, empty inline-block element may have zero width in IE7-/Win, but it must have at least <code>width: 1px</code> in IE/Mac, otherwise it has no effect (this sometimes offsets the horizontal centering by 1px. It could be counteracted with a -1px margin, but the problem is barely visible.)</li>  <li>In IE5/Mac the vertical centering is some pixels off. The use of a small font-size or line-height on the container seems beneficial, not clear why (IE5/Mac is a bit incoherent here, especially when playing with its font size settings.)</li>  </ul>  <p>A combined solution, using <code>display: table-cell</code> and the extra <code>span</code> with <code>display: inline-block</code>, works in Gecko based browsers, Opera 6+. Safari, IE5+/Win, IE5/Mac.</p>  <p>A variation of this technique can be used to <a href="http://www.brunildo.org/test/img_center.htmlvertmiddle.html">vertically center</a> a block element (even with unknown height) inside another one (with known height) which is a more interesting problem.</p>      <h2>The code</h2>  <p>Putting all together, and naming “wraptocenter” the class of the container, that’s the relevant CSS. Code for IE/Mac is wrapped in a suitable filter. Code for IE7-/Win is put in conditional comments.</p>  <pre>&lt;style type="text/css"&gt;  .wraptocenter {  display: table-cell;  text-align: center;  vertical-align: middle;  width: ...;  height: ...;  }  .wraptocenter * {  vertical-align: middle;  }  /*\*//*/  .wraptocenter {  display: block;  }  .wraptocenter span {  display: inline-block;  height: 100%;  width: 1px;  }  /**/  &lt;/style&gt;  &lt;!--[if lt IE 8]&gt;&lt;style&gt;  .wraptocenter span {  display: inline-block;  height: 100%;  }  &lt;/style&gt;&lt;![endif]--&gt;  </pre>    <p>And that’s the relevant HTML</p>  <pre>&lt;div class="wraptocenter"&gt;&lt;span&gt;&lt;/span&gt;&lt;img src="..." alt="..."&gt;&lt;/div&gt;  </pre>    <h2>Some examples</h2>  <p>To demonstrate the solution, it is applied to two different sized images, and to two different sizes for the containers. The first containers have dimensions expressed in pixels, the second ones in ems. The containers are given a grid background to better check the centering.</p>    <ul class="example uno">  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.html/../thumb/tmiri2_o.jpg" height="127" alt="miao1" width="169" /></div></li>  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.html/../thumb/tmicio_mo5_o.jpg" height="169" alt="miao3" width="135" /></div></li>  </ul>  <ul class="example due clear">  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.html/../thumb/tmiri2_o.jpg" height="127" alt="miao1" width="169" /></div></li>  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.html/../thumb/tmicio_mo5_o.jpg" height="169" alt="miao3" width="135" /></div></li>  </ul>    <p class="clear">Some other examples where the images contain a (red) grid, which should align with the light grey grid of the container background.</p>  <ul class="example uno">  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.htmlg101.gif" height="101" alt="" width="101" /></div></li>  	<li><div class="wraptocenter"><span></span><img src="http://www.brunildo.org/test/img_center.htmlg161.gif" height="161" alt="" width="161" /></div></li>  </ul>  <ul class="example due clear">  	<li><div class="wraptocenter due"><span></span><img src="http://www.brunildo.org/test/img_center.htmlg101.gif" height="101" alt="" width="101" /></div></li>  	<li><div class="wraptocenter due"><span></span><img src="http://www.brunildo.org/test/img_center.htmlg161.gif" height="161" alt="" width="161" /></div></li>  </ul>      <p class="clear">Other, slightly more complex, examples: <a href="http://www.brunildo.org/test/img_center.htmlimg_center2.html">images in floated containers</a>, <a href="http://www.brunildo.org/test/img_center.htmlImgThumbIBL2b.html">an image gallery with captions</a>.</p><p>  </p><p>An <a href="http://mrclay.org/web_design/centered_image/">article</a> on this problem by Steve Clay.</p>  <p>Many thanks to <a href="http://www.satzansatz.de/css.html">Ingo Chao</a>, for his help and comments.</p>      <p><a href="http://www.brunildo.org/test/img_center.html/./">CSS tests home</a></p></blockquote>    <div class="posterous_quote_citation">via <a href="http://www.brunildo.org/test/img_center.html">brunildo.org</a></div> <p></p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/centering-horizontally-and-vertically-an-imag">evolutiondesign's posterous</a>  </p></div>
]]></summary><updated>2010-02-05T12:33:37-05:00</updated><published>2010-02-05T12:33:37-05:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1463052-centering-horizontally-and-vertically-an-image-in-a-box' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2010:articles/1458702</id><title>Shopify, a Start-Up, Starts Its Own Business Competition - You’re the Boss Blog - NYTimes.com</title><summary type='html'><![CDATA[
<div class='posterous_autopost'><div class="posterous_bookmarklet_entry"> <h2 class="entry-title">Shopify, a Start-Up, Starts Its Own Business Competition</h2>  		<address class="byline author vcard">By <a href="http://boss.blogs.nytimes.com/2010/02/02/shopify-gains-customers-with-a-competition/?src=twt&amp;twt=nytsmallbiz/author/lora-kolodny/" class="url fn" title="See all posts by LORA KOLODNY">LORA KOLODNY</a></address>		  		<div class="entry-content">  			<div class="w480"><img src="http://graphics8.nytimes.com/images/2010/02/02/business/smallbusiness/02shopify/blogSpan.jpg" alt="  " /><span class="credit">by Daniel Weinand </span> <span class="caption">Tobias Lütke, founder of Shopify</span></div>  <div class="w75 left"><img src="http://graphics8.nytimes.com/images/blogs_v3/boss/boss_prize.gif" alt="The Prize" /></div>  <p>It is routine, of course, for start-ups to participate in <a href="http://www.nytimes.com/interactive/2009/11/11/business/smallbusiness/Competitions-table.html">business plan competitions</a> and related events. It is virtually unheard of, however, that a start-up would hold its own competition to foster start-ups — especially one offering a first-place prize of $100,000. But that is precisely what a start-up called <a href="http://www.shopify.com/">Shopify</a> is doing. </p>  <p>Founded by Tobias Lütke, Shopify is a software-as-a-service company that provides affordable tools to run a Web store. It has 20 full-time employees with headquarters in Ottawa. The Shopify application began in beta in 2006, and the company generated its first full year of revenue in 2007. Last year, it says, its revenue exceeded $2 million.</p>  <p>The business competition — <a href="http://storecontest.com/">Build a Business</a> — started taking entries in January, and is open to any new, Shopify-enabled Web store based (in participating states) in the United States. The Shopify subscriber with the highest revenue in its best two months from the period between January and June will win the $100,000 prize. Prizes of $5,000 each will go to the overall runner-up and to top stores selling apparel, digital goods and electronics. Entries are permitted until April 30. <span></span></p>  <div class="w190 right"><img src="http://graphics8.nytimes.com/images/2010/02/02/business/smallbusiness/02ferriss/articleInline.jpg" alt="Timothy Ferriss" /><span class="credit">by Corey Arnold</span> <span class="caption">Timothy Ferriss</span></div>  <p>To open the contest, Mr. Lütke joined with Tim Ferriss, an angel investor who is the founder of the Four Hour Work Week, a lifestyle design consultancy, and author of the popular blog and <a href="http://www.randomhouse.com/catalog/display.pperl?isbn=9780307465351">best-selling book</a> of the same name. Mr. Ferriss is well known for espousing the virtues of working smarter, not harder, and outsourcing just about everything. </p>  <p>The two met at a technology conference, <a href="http://en.oreilly.com/rails2009/public/schedule/proceedings">RailsConf 2009</a>, where both were invited speakers. They bonded over a mutual gripe about what they call “wantrepreneurs” — or wannabe entrepreneurs. These are people, according to Mr. Lütke and Mr. Ferriss, who are consumed with hesitation, worry or negativity.</p>  <p>In Mr. Lütke’s view, wantrepreneurs perpetuate notions — like e-commerce has to be expensive — about online retail that can discourage potential customers from trying Shopify. Mr. Lütke boasts that Shopify’s service costs $24 a month and lets small stores  integrate with drop-ship services, while giving them a chance to design their own “boutique” look instead of using generic templates, or profile pages that get lost in the shuffle in marketplaces like eBay and Etsy.</p>  <p>Similarly, in Mr. Ferriss’s view, wantrepreneurs who read <a href="http://www.fourhourworkweek.com/blog/">his blog</a> are likely to post comments or Tweets that question his advice and studies without testing them in the real world of business. Their doubts, he believes, can scare off other potential readers.</p>  <p>The two entrepreneurs spent about 15 minutes hatching the idea for Shopify’s Build a Business competition. Though neither had participated in a business competition before, they’re both competitive people — Mr. Ferriss a tango world champion and Mr. Lütke a former sponsored, competitive video game player. They concluded that a competition could help them turn doubters into evangelists for their brands.</p>  <p>It took four months to arrange and refine the competition rules and the online tools to run it, according to Mr. Lütke. Along with a $120,000 outlay for prize money, Shopify faced legal and administrative costs, but it avoided promotional costs by relying on Four Hour Work Week and Mr. Ferriss to spread the word. Mr. Ferriss, while he did not contribute financially, has written and produced Web <a href="http://blog.shopify.com/2009/12/10/win-100-000-with-shopify-s-build-a-business-competition">content promoting the competition</a>, and helped Shopify produce tutorial-style videos for participants.</p>  <p>Mr. Lütke determined before the competition that it would have to inspire at least 600 new accounts to be successful. New customers, he figured, would spend a minimum of $24 a month for six months to compete, translating to at least $86,400 in revenue for Shopify. </p>  <p>Mr. Ferriss expects the competition to “incentivize people to start companies,” using Shopify and his own newly released second edition of his book. He believes the competition will effectively begin start-ups that last years beyond the six months of game time. “The recipe to create entrepreneurs is very effective with competitions,” he said. “People respond to incentives, competition and recognition, especially if multiple prizes and social support are incorporated.” </p>  <p>So far, Shopify has signed up more than 1,000 new Web stores, already exceeding the expectations of Mr. Lütke, who expects 50 to 100 more participants to sign up by May 1.</p>  <p><em>See The Prize’s <a href="http://www.nytimes.com/interactive/2009/11/11/business/smallbusiness/Competitions-table.html">guide</a> to coming business plan competitions. And here’s <a href="http://www.nytimes.com/2009/06/11/business/smallbusiness/11competition.html">how to win</a> a competition.</em></p></div>    <div class="posterous_quote_citation">via <a href="http://boss.blogs.nytimes.com/2010/02/02/shopify-gains-customers-with-a-competition/?src=twt&amp;twt=nytsmallbiz">boss.blogs.nytimes.com</a></div> <p></p></div><p style="font-size: 10px;"> </p></div>
]]></summary><updated>2010-02-03T08:42:16-05:00</updated><published>2010-02-03T08:42:16-05:00</published><author><name>Jamie Sutton</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1458702-shopify-a-start-up-starts-its-own-business-competition-youre-the-boss-blog-nytimes-com' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2010:articles/1458682</id><title>Code Style: Font stack builder: Hoefler Text, Times, Georgia, Bitstream Vera Serif</title><summary type='html'><![CDATA[
<div class='posterous_autopost'><div class="posterous_bookmarklet_entry"> <div><h1 class="Title">Font stack builder  </h1>  </div>  <div>      <div class="LocalNav">    <div class="RgtBox" style="">  <h2>  Font stack tips  </h2>    <h2>  New font stack  </h2>  <ul>  <li>  <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?generic=sans-serif">Sans serif font stack</a>  </li>  <li>  <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?generic=serif">Serif font stack</a>  </li>  <li>  <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?generic=monospace">Monospace font stack</a>  </li>  <li>  <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?generic=cursive">Cursive font stack</a>  </li>  <li>  <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?generic=fantasy">Fantasy font stack</a>  </li>  </ul>      </div>      </div>    </div>  <p class="Standfirst">  Use the <span class="CS">Code Style</span> font stack builder to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.  </p>  <p class="ActionPoint">  <strong>Quick start:</strong> <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/css/font-family/BuildBetterCSSFontStacks.shtml">Build better CSS font stacks</a>  </p>  <p class="ActionPoint">    <strong>Bookmark:</strong> This <strong><a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/servlets/FontStack?stack=Hoefler+Text%2CTimes%2CGeorgia%2CBitstream+Vera+Serif&amp;generic=serif" title="Font stack: Hoefler Text, Times, Georgia, Bitstream Vera Serif">font stack URL</a></strong> is permanent, you can <strong>link</strong> to it.  </p>  <p class="ActionPoint">      <strong>Comment:</strong> Send your <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/css/font-family/FontStackBuilderFeedback.shtml">font stack builder feedback</a>.  </p>  <h2 class="NewSection">  Improve your font stack  </h2>  <p>  Add more font families using the selectors below. Click the <strong>up</strong> and <strong>down</strong> buttons to re-order the stack. Click the <strong>cross</strong> button to remove a font from the stack.  </p>  <table class="FontStack" border="0">    </table><strong>Font stack</strong> with CSS display probabilities per font, per platform                      Font name      Windows      Mac      Linux      &nbsp;          Hoefler Text      <strong>1.16%</strong>      <strong>88.70%</strong>      0.00%      <div><input name="stack" type="hidden" value="Times%2CHoefler+Text%2CGeorgia%2CBitstream+Vera+Serif&amp;generic=serif" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Down.png" alt="Move down font stack" /></div>  <div><input name="stack" type="hidden" value="Times%2CGeorgia%2CBitstream+Vera+Serif" /><input name="generic" type="hidden" value="serif" />  <input class="RemoveButton" type="image" src="/images/nuvola/icon-Cancel.png" alt="Remove from font stack" /></div>        Times      <strong>4.65%</strong>      <strong>10.87%</strong>      <strong>24.69%</strong>    <div><input name="stack" type="hidden" value="Times%2CHoefler+Text%2CGeorgia%2CBitstream+Vera+Serif" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Up.png" alt="Move up font stack" /></div>    <div><input name="stack" type="hidden" value="Hoefler+Text%2CGeorgia%2CTimes%2CBitstream+Vera+Serif&amp;generic=serif" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Down.png" alt="Move down font stack" /></div>  <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CGeorgia%2CBitstream+Vera+Serif" /><input name="generic" type="hidden" value="serif" />  <input class="RemoveButton" type="image" src="/images/nuvola/icon-Cancel.png" alt="Remove from font stack" /></div></form>        Georgia      <strong>92.83%</strong>      <strong>0.40%</strong>      <strong>45.33%</strong>    <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CGeorgia%2CTimes%2CBitstream+Vera+Serif" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Up.png" alt="Move up font stack" /></div></form>    <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CBitstream+Vera+Serif%2CGeorgia&amp;generic=serif" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Down.png" alt="Move down font stack" /></div></form>  <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CBitstream+Vera+Serif" /><input name="generic" type="hidden" value="serif" />  <input class="RemoveButton" type="image" src="/images/nuvola/icon-Cancel.png" alt="Remove from font stack" /></div></form>        Bitstream Vera Serif      <strong>0.29%</strong>      0.00%      <strong>22.58%</strong>    <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CBitstream+Vera+Serif%2CGeorgia" /><input name="generic" type="hidden" value="serif" />  <input class="UpDownButton" type="image" src="/images/nuvola/icon-Up.png" alt="Move up font stack" /></div></form>      <form action="/servlets/FontStack" method="get"><div><input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CGeorgia" /><input name="generic" type="hidden" value="serif" />  <input class="RemoveButton" type="image" src="/images/nuvola/icon-Cancel.png" alt="Remove from font stack" /></div></form>        <code>serif</code>      1.07%      0.02%      7.40%    <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif#generic-figures" title="The probability that no fonts are matched and the selection falls through to the generic font-family">What's this?</a>        <div class="MenuBox" style="">  <form class="GenericFontFamily" action="/servlets/FontStack" method="get">  <h2>  1. Generic font family selected <img src="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/images/nuvola/icon-Tick.png" height="18" alt="Confirmed" width="21" />  </h2>  <p>    <input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CGeorgia%2CBitstream+Vera+Serif" />  <select name="generic">  <option value="all">All font types</option>  <option value="serif">Serif</option>  <option value="sans-serif">Sans serif</option>  <option value="monospace">Monospace</option>  <option value="cursive">Cursive</option>  <option value="fantasy">Fantasy</option>  </select><input type="submit" value="Update generic font family" />  </p>  </form>  <form class="FontFamily" action="/servlets/FontStack" method="post">  <h2>  2. Add one or more font families to your stack   </h2>  <p>  <input name="generic" type="hidden" value="serif" />  <input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CGeorgia%2CBitstream+Vera+Serif" />  <select name="win-font">  <option value="">Windows fonts</option>  <option value="Baskerville Old Face" style="">Baskerville Old Face</option>  <option value="Bell MT" style="">Bell MT</option>  <option value="Bodoni MT" style="">Bodoni MT</option>  <option value="Bodoni MT Black" style="">Bodoni MT Black</option>  <option value="Bodoni MT Condensed" style="">Bodoni MT Condensed</option>  <option value="Bodoni MT Poster Compressed" style="">Bodoni MT Poster Compressed</option>  <option value="Book Antiqua" style="">Book Antiqua</option>  <option value="Bookman Old Style" style="">Bookman Old Style</option>  <option value="Californian FB" style="">Californian FB</option>  <option value="Calisto MT" style="">Calisto MT</option>  <option value="Cambria" style="font-family: Cambria;">Cambria</option>  <option value="Centaur" style="font-family: Centaur;">Centaur</option>  <option value="Century Schoolbook" style="">Century Schoolbook</option>  <option value="Constantia" style="font-family: Constantia;">Constantia</option>  <option value="Footlight MT Light" style="">Footlight MT Light</option>  <option value="Garamond" style="font-family: Garamond;">Garamond</option>  <option value="Georgia Ref" style="">Georgia Ref</option>  <option value="Gloucester MT Extra Condensed" style="">Gloucester MT Extra Condensed</option>  <option value="Goudy Old Style" style="">Goudy Old Style</option>  <option value="High Tower Text" style="">High Tower Text</option>  <option value="Lucida Bright" style="">Lucida Bright</option>  <option value="Lucida Fax" style="">Lucida Fax</option>  <option value="MS Reference Serif" style="">MS Reference Serif</option>  <option value="Minion Web" style="">Minion Web</option>  <option value="New Century Schoolbook" style="">New Century Schoolbook</option>  <option value="New York" style="">New York</option>  <option value="Niagara Engraved" style="">Niagara Engraved</option>  <option value="Niagara Solid" style="">Niagara Solid</option>  <option value="Onyx" style="font-family: Onyx;">Onyx</option>  <option value="Palatino" style="font-family: Palatino;">Palatino</option>  <option value="Palatino Linotype" style="">Palatino Linotype</option>  <option value="Perpetua" style="font-family: Perpetua;">Perpetua</option>  <option value="Rockwell" style="font-family: Rockwell;">Rockwell</option>  <option value="Rockwell Condensed" style="">Rockwell Condensed</option>  <option value="Runic MT Condensed" style="">Runic MT Condensed</option>  <option value="Sylfaen" style="font-family: Sylfaen;">Sylfaen</option>  <option value="Times New Roman" style="">Times New Roman</option>  <option value="University Roman LET" style="">University Roman LET</option>  </select>    <select name="mac-font">  <option value="">Mac fonts</option>  <option value="American Typewriter" style="">American Typewriter</option>  <option value="Baskerville" style="font-family: Baskerville;">Baskerville</option>  <option value="Belwe" style="font-family: Belwe;">Belwe</option>  <option value="Bembo" style="font-family: Bembo;">Bembo</option>  <option value="Bernhard Modern Std" style="">Bernhard Modern Std</option>  <option value="Big Caslon" style="">Big Caslon</option>  <option value="Book Antiqua" style="">Book Antiqua</option>  <option value="Bookman" style="font-family: Bookman;">Bookman</option>  <option value="Bookman Old Style" style="">Bookman Old Style</option>  <option value="Calisto MT" style="">Calisto MT</option>  <option value="Cambria" style="font-family: Cambria;">Cambria</option>  <option value="Caslon" style="font-family: Caslon;">Caslon</option>  <option value="Century Schoolbook" style="">Century Schoolbook</option>  <option value="Constantia" style="font-family: Constantia;">Constantia</option>  <option value="Didot" style="font-family: Didot;">Didot</option>  <option value="Footlight MT Light" style="">Footlight MT Light</option>  <option value="Garamond" style="font-family: Garamond;">Garamond</option>  <option value="Goudy Old Style" style="">Goudy Old Style</option>  <option value="ITC Century" style="">ITC Century</option>  <option value="Lucida Bright" style="">Lucida Bright</option>  <option value="Minion Std" style="">Minion Std</option>  <option value="Minion Web" style="">Minion Web</option>  <option value="New Century Schoolbook" style="">New Century Schoolbook</option>  <option value="New York" style="">New York</option>  <option value="Palatino" style="font-family: Palatino;">Palatino</option>  <option value="Times New Roman" style="">Times New Roman</option>  <option value="URW Antiqua T" style="">URW Antiqua T</option>  <option value="Utopia" style="font-family: Utopia;">Utopia</option>  </select>    <select name="lin-font">  <option value="">Linux fonts</option>  <option value="Bitstream Charter" style="">Bitstream Charter</option>  <option value="Caslon" style="font-family: Caslon;">Caslon</option>  <option value="Century Schoolbook L" style="">Century Schoolbook L</option>  <option value="Charter" style="font-family: Charter;">Charter</option>  <option value="ClearlyU" style="font-family: ClearlyU;">ClearlyU</option>  <option value="DejaVu LGC Serif" style="">DejaVu LGC Serif</option>  <option value="DejaVu LGC Serif Condensed" style="">DejaVu LGC Serif Condensed</option>  <option value="DejaVu Serif" style="">DejaVu Serif</option>  <option value="DejaVu Serif Condensed" style="">DejaVu Serif Condensed</option>  <option value="FreeSerif" style="font-family: FreeSerif;">FreeSerif</option>  <option value="Garamond" style="font-family: Garamond;">Garamond</option>  <option value="Liberation Serif" style="">Liberation Serif</option>  <option value="Linux Libertine" style="">Linux Libertine</option>  <option value="Lucida Bright" style="">Lucida Bright</option>  <option value="LucidaBright" style="font-family: LucidaBright;">LucidaBright</option>  <option value="Luxi Serif" style="">Luxi Serif</option>  <option value="MgOpen Canonica" style="">MgOpen Canonica</option>  <option value="New Century Schoolbook" style="">New Century Schoolbook</option>  <option value="Nimbus Roman No9 L" style="">Nimbus Roman No9 L</option>  <option value="Times New Roman" style="">Times New Roman</option>  <option value="URW Bookman L" style="">URW Bookman L</option>  <option value="URW Palladio L" style="">URW Palladio L</option>  <option value="Utopia" style="font-family: Utopia;">Utopia</option>  <option value="Vera Serif" style="">Vera Serif</option>  </select><input type="submit" value="Add font families" />  </p>  <p>  Duplicate font selections will be merged.  </p>  </form>  </div>  <p class="Footnote">  Get the <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif#declaration">CSS declaration for this font stack</a>.  </p>  <div><h2 class="NewSection" style="">  <a name="sampler">Styled with your font stack</a>  </h2>  <p style="">  This text sample has an inline style rule that uses your font stack, <em>including</em> the <strong>generic font family</strong>.  </p>  <form class="FontSize" action="/servlets/FontStack" method="get">  <p style="">  <input name="generic" type="hidden" value="serif" />  <input name="stack" type="hidden" value="Hoefler+Text%2CTimes%2CGeorgia%2CBitstream+Vera+Serif" />  <label>  <strong>Font size:</strong>  </label> <select name="font-size"><option value="xx-small">xx-small</option><option value="x-small">x-small</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="x-large">x-large</option><option value="xx-large">xx-large</option></select><input type="submit" value="Set font size" />  </p>  </form>  <h3 style="">  What do the font stack percentages mean?  </h3>  <p style="">  With CSS, if a single person happens to have the <strong>first named font</strong> installed, the chance that any other font is displayed on <em>their</em> screen will be <strong>zero</strong>. When you apply this principle to a <strong>large number of people</strong> like Web users, it is possible to calculate an overall <strong>probability</strong> that each font in a font stack will be displayed because <em>some people</em> will <strong>not</strong> have the first font, second or third fallback font. These percentage probability figures therefore equate to the <strong>proportion</strong> of people whose browsers will display each font in the stack, depending on which operating system they use.  </p>  <h3 style="">  <a name="generic-figures">What are the generic font family figures?</a>  </h3>  <p style="">  A CSS font stack is a <strong>priority list</strong> where the first matched font is selected, so the overall probability that fonts at the <strong>top of the stack</strong> are installed and displayed affects the proportion of people whose browsers will display those <strong>further down the stack</strong>. If the sum probability for all the named fonts is <strong>less than 100%</strong>, what remains is the probability that an un-specified <strong>generic font family</strong> will be displayed. In other words, a proportion of users may not match <strong>any</strong> named fonts and their font selection will fall through to the generic font family.  </p>  </div>  <h2 class="NewSection">  <a name="declaration">CSS font family declaration</a>  </h2>  <p>  <strong>Click</strong> and <strong>drag</strong> over this font family declaration to <strong>select</strong>, <strong>copy</strong> and <strong>paste</strong> into your style sheet.  </p>  <pre>font-family: "Hoefler Text",  Times,  Georgia,  "Bitstream Vera Serif",  serif;  </pre><p class="Footnote">  Font stack probabilities are based on data from the <span class="CS">Code Style</span> font survey for <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/css/font-family/sampler-Windows.shtml">Windows</a>, <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/css/font-family/sampler-Mac.shtml">Mac</a> and <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/css/font-family/sampler-Unix.shtml">Linux</a> operating systems. Special terms apply to the <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif/images/nuvola/index.shtml">Nuvola icon theme</a>.  </p><div class="posterous_quote_citation">via <a href="http://www.codestyle.org/servlets/FontStack?stack=Hoefler+Text,Times,Georgia,Bitstream+Vera+Serif&amp;generic=serif">codestyle.org</a></div> <p></p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/code-style-font-stack-builder-hoefler-text-ti">evolutiondesign's posterous</a>  </p></div>
]]></summary><updated>2010-02-03T08:36:31-05:00</updated><published>2010-02-03T08:36:31-05:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1458682-code-style-font-stack-builder-hoefler-text-times-georgia-bitstream-vera-serif' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2009:articles/1089462</id><title>How to make durable plant markers</title><summary type='html'><![CDATA[
<div> <a href="http://www.instructables.com/id/How-to-make-durable-plant-markers/"><img src='http://www.instructables.com/files/deriv/FFO/W12J/FDTDOC0E/FFOW12JFDTDOC0E.MEDIUM.jpg' width='500' height=''/ border='0'></a>    <div class="posterous_quote_citation">via <a href="http://www.instructables.com/id/How-to-make-durable-plant-markers/">instructables.com</a></div> <p>I have just planted our garden for the summer (stage 2) and thought this may come in handy for those like minded fellow gardeners.</p></div><p style="font-size: 10px;"></p>
]]></summary><updated>2009-05-04T21:39:12-04:00</updated><published>2009-05-04T21:39:12-04:00</published><author><name>Jamie Sutton</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1089462-how-to-make-durable-plant-markers' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2009:articles/1088392</id><title>Free Vectors - 28 Halftone Vectors (Clean &amp; Grunge Versions) | Think Design</title><summary type='html'><![CDATA[<div> <a href="http://thinkdesignblog.com/free-vectors-28-halftone-vectors-clean-grunge-versions.htm"><img src='http://thinkdesignblog.com/wp-content/uploads/image/preview-clean.jpg' width='500' height='848'/ border='0'></a>    <div class="posterous_quote_citation">via <a href="http://thinkdesignblog.com/free-vectors-28-halftone-vectors-clean-grunge-versions.htm">thinkdesignblog.com</a></div> <p>These free halftone vectors just came in super handy on a project. So thanks for sharing Nick! Check his blog often for excellent articles and freebies.</p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/free-vectors-28-halftone-vectors-clean-and-gr">evolutiondesign's posterous</a>  </p>]]></summary><updated>2009-05-03T20:11:57-04:00</updated><published>2009-05-03T20:11:57-04:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1088392-free-vectors-28-halftone-vectors-clean-grunge-versions-think-design' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2009:articles/1088382</id><title>  Sprouts and microgreens: edible houseplants</title><summary type='html'><![CDATA[<div> <a href="http://features.csmonitor.com/gardening/2009/02/05/sprouts-and-microgreens-edible-houseplants/"><img src='http://features.csmonitor.com/gardening/wp-content/assets/4/582/vertical1.jpg' width='205' height='308'/ border='0'></a>    <div class="posterous_quote_citation">via <a href="http://features.csmonitor.com/gardening/2009/02/05/sprouts-and-microgreens-edible-houseplants/">features.csmonitor.com</a></div> <p>Microgreens and sprouts, those immature vegetables short on size but large on taste, are making their way from trendy restaurants and stylish markets into family kitchens. </p><p>Fresh and so easy to grow too. I just finished my potato tower today and can't wait to start picking my fresh bakers in the fall. This is a nice way to get some quick instant gratification on my green thumb.</p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/sprouts-and-microgreens-edible-houseplants">evolutiondesign's posterous</a>  </p>]]></summary><updated>2009-05-03T20:09:11-04:00</updated><published>2009-05-03T20:09:11-04:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1088382-sprouts-and-microgreens-edible-houseplants' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2009:articles/1088152</id><title>65 Very Creative and Funny Photoshopped Images | 1stwebdesigner - Love In Design</title><summary type='html'><![CDATA[<div> <a href="http://www.1stwebdesigner.com/inspiration/65-very-creative-and-funny-photoshopped-images/"><img src='http://www.1stwebdesigner.com/wp-content/uploads/2009/04/photoshopped/skydumbo-photomanipulation.jpg' width='500' height='766'/ border='0'></a>    <div class="posterous_quote_citation">via <a href="http://www.1stwebdesigner.com/inspiration/65-very-creative-and-funny-photoshopped-images/">1stwebdesigner.com</a></div> <p>Some very creative Photoshoped images. If you look through these you will find a few common themes throughout. My favorites on these are the ones that incorporate natural textures in soft subtle overlays.</p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/65-very-creative-and-funny-photoshopped-image">evolutiondesign's posterous</a>  </p>]]></summary><updated>2009-05-03T08:42:55-04:00</updated><published>2009-05-03T08:42:55-04:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1088152-65-very-creative-and-funny-photoshopped-images-1stwebdesigner-love-in-design' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2009:articles/1088142</id><title>Artist creates invisible car - Telegraph</title><summary type='html'><![CDATA[<div> <a href="http://www.telegraph.co.uk/news/newstopics/howaboutthat/5261752/Artist-creates-invisible-car.html"><img src='http://www.telegraph.co.uk/telegraph/multimedia/archive/01395/car460_1395623c.jpg' width='460' height='288'/ border='0'></a>    <div class="posterous_quote_citation">via <a href="http://www.telegraph.co.uk/news/newstopics/howaboutthat/5261752/Artist-creates-invisible-car.html">telegraph.co.uk</a></div> <p>Pretty darn cool if you ask me. Great creative marketing of herself. She did this in only three weeks!</p></div><p style="font-size: 10px;">  <a href="http://posterous.com">Posted via web</a>   from <a href="http://evolutiondesign.posterous.com/artist-creates-invisible-car-telegraph">evolutiondesign's posterous</a>  </p>]]></summary><updated>2009-05-03T08:35:02-04:00</updated><published>2009-05-03T08:35:02-04:00</published><author><name>Posterous</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/1088142-artist-creates-invisible-car-telegraph' rel='alternate'/></entry><entry><id>tag:db1@shopify.com,2008:articles/424382</id><title>Paul Newman missed but never forgotten.</title><summary type='html'><![CDATA[<p><img src='http://static0.shopify.com/s/files/1/0000/4536/files/th_Paul_Newman_BW.jpg' alt='We will mis you Paul Newman' class="fl" /></p>


	<h2>Paul Leonard Newman</h2>


	<p><em>(January 26, 1925 – September 26, 2008)</em></p>


	<p>As one of the exemplary actors of our time, how can we not miss Paul Newman? He&#8217;s been in some of our favorite films. His performance in &#8220;Cat On a Hot Tin Roof&#8221; is one of the best screen performances I have ever seen. &#8220;The Long, Hot Summer&#8221;, &#8220;Torn Curtain&#8221; and don&#8217;t forget &#8220;Cool Hand Luke&#8221;.</p>


	<p>Not only was he a great actor, but bucking the Hollywood glitter he also became a great philanthropist. <a href="http://www.newmansown.com/">Newman&#8217;s Own</a> was started in 1982 and has since donated over $250 million dollars to charitable causes.</p>


	<p>Newman was a huge fan of Motor Sports. He got the fever for Auto Racing while filming the movie &#8220;Winning&#8221; in 1969. Two years later he competed in his first professional event in Connecticut. He won several championships in the Sports Car Club of America events and in 1979 he competed in the famous Le Mans race finishing in a Cool Second Place.</p>


	<p>He was not just an actor, he was a good human being with a big heart, a flavor for adventure, and a soft spot for the underdog. He was the epitome of Cool with those sharp as ice eyes and crisp smile. He will be missed, but not forgotten&#8230;</p>


	<p><img src='http://static2.shopify.com/s/files/1/0000/4536/files/sd_newman_movies.jpg' alt='Paul Newman Movies' /></p>]]></summary><updated>2008-09-30T09:49:09-04:00</updated><published>2008-09-30T09:49:09-04:00</published><author><name>Richard Sutton</name></author><link href='http://www.charlestoncreative.com/blogs/evolution-blog/424382-paul-newman-missed-but-never-forgotten' rel='alternate'/></entry></feed>