Skip to content

Instantly share code, notes, and snippets.

@billsaysthis

billsaysthis/possible Compass-Style.org home page.html

Created June 17, 2009 19:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save billsaysthis/131433 to your computer and use it in GitHub Desktop.
Save billsaysthis/131433 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
possible Compass-Style.org home page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Compass is a real stylesheet framework — not just a collection of classes. With Compass, you still use the best of breed css frameworks; adapted to make them easier to configure and apply to your semantic markup." />
<meta name="keywords" content="compass, sass, haml, rails, ruby on rails, sinatra, merb, css, blueprint, 960gs" />
<link href="http://compass-style.org/stylesheets/application.css?1239703540" media="screen" rel="stylesheet" type="text/css" />
<title>Compass - Untangle your design</title>
</head>
<body id='home'>
<div class='wrap' id='main'>
<div id='content'>
<h1>Compass</h1>
<div class='tagline'>
<em>Untangle your Design.</em>
</div>
<div class='description'>
<p>
Compass is a real stylesheet framework &mdash; not just a collection of classes.
With Compass, you still use the
<a href='http://github.com/chriseppstein/compass/wikis/supported-frameworks'>best of breed css frameworks</a>;
adapted to make them easier to configure and apply to your semantic markup.
</p>
</div>
<ol id='next-steps'>
<li class='download'>
<a href='http://github.com/chriseppstein/compass/wikis/getting-started'>Download</a>
</li>
<li class='learn'>
<a href='http://github.com/chriseppstein/compass/wikis'>Learn</a>
</li>
<li class='support'>
<a href='http://groups.google.com/group/compass-users'>Support</a>
</li>
<li class='get-involved'>
<a href='http://github.com/chriseppstein/compass'>Get Involved</a>
</li>
</ol>
<div class="feature">
<h2>Watch the Screencast</h2>
<object width="660" height="371"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4335944&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="660" height="371"></embed></object>
</div>
<div class="feature">
<h2 style="clear:both;">What the Community is Saying about Compass</h2>
<div style="float:left; width: 270px; position: relative;">
<p>
<span style="font-size: 48px; position: absolute; top: 0px; left: 0px;">&ldquo;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Compass is exactly how I expect a <span class="caps">CSS</span> framework should work.
Code less, do more. Wickedly cool<span style="position: relative">.<span style="font-size: 48px; position: absolute; top: -14px; left: 5px;">&rdquo;</span></span>
<span style="position: absolute; right: 0px;">&mdash;&nbsp;<a href="http://www.lorintackett.com/">Lorin Tackett</a></span>
</p>
</div>
<div style="float:left; width: 270px; position: relative; margin-left: 20px;">
<p>
<span style="font-size: 48px; position: absolute; top: 0px; left: 0px;">&ldquo;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[code written with compass] is amazingly beautiful! It is a complete pleasure to work around. I truly feel like it is the first big &#8220;whoa&#8221; I&#8217;ve had since I read Zeldman&#8217;s book years ago<span style="position: relative">!<span style="font-size: 48px; position: absolute; top: -14px; left: 5px;">&rdquo;</span></span>
<span style="position: absolute; right: 0px;">&mdash;&nbsp;<a href="http://www.shearshear.com/">Margaret Shear</a></span>
</p>
</div>
<style type="text/css">
.ohloh p {margin-top: 0px;}
</style>
<div style="float: right" class="ohloh">
<script type="text/javascript" src="http://www.ohloh.net/projects/26901/widgets/project_users?style=gray"></script>
</div>
<div style="clear:both">More quotes on <a href="https://twitter.com/chriseppstein/favorites">Twitter</a>.</div>
</div>
<div class="feature">
<h3>HAML</h3>
<p><a href="http://haml.hamptoncatlin.com/" title="haml">HAML</a>, created by Hampton Catlin, is a vastly simpler way to write views in Ruby.</p>
<pre class="html">
/* HTML */
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Compass - Untangle your design</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="stylesheets/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body id="index" class="blueprint">
<div class="container">
<h1>Welcome to Compass!</h1>
</div>
</body>
</html>
</pre>
<pre class="haml">
/* HAML */
!!!
%html{ "xml:lang" => "en", :lang => "en", :xmlns => "http://www.w3.org/1999/xhtml" }
%head
%meta{ :content => "text/html;charset=UTF-8", "http-equiv" => "content-type" }
%title Compass - Untangle your design
= stylesheet_link_tag 'screen', :media => "screen, projection"
= stylesheet_link_tag 'print', :media => "print"
/
[if IE]>
= stylesheet_link_tag 'ie.css', :media => "screen, projection"
%body#index.blueprint
.container
%h1 Welcome to Compass!
</pre>
</div>
<div class="feature">
<h3>SASS</h3>
<p>SASS is a powerful tool for writing stylesheets in Ruby.</p>
<pre class="css">
/* CSS */
div#foo { font-style: italic; }
div#foo em, div#foo a { font-weight: bold; }
</pre>
<pre class="sass">
/* SASS */
div#foo
font-style: italic
em, a
font-weight: bold
</pre>
</div>
<div class="feature">
<h3>Tools</h3>
<p>Compass includes several useful command line utilities that make your development easier, including converting existing HTML, CSS and ERB.</p>
<ul>
<li>Compass: multi-purpose tool that adds Compass to your project and can watch your files to regenerate runtime stylesheets.</li>
<li>HAML/HTML2HAML: convert HTML to HAML and vice versa, respectively.</li>
<li>SASS/CSS2SASS: convert CSS to SASS and vice versa, respectively.</li>
</ul>
</div>
</div>
<div id='layout_footer'></div>
</div>
<div id='footer'>
<div class='wrap'>
<ul>
<li class='opensource'>
<a href="http://www.opensource.org/">compass is opensource.</a>
</li>
<li class='viewsource'>
<a href="/hl/application.sass">view the styles for this site.</a>
</li>
<li class='dryicons'>
<a href="http://dryicons.com">icons by DryIcons.com</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6779438-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment