Skip to content

Instantly share code, notes, and snippets.

@charlesroper

charlesroper/_structure.sass

Created March 8, 2010 09:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save charlesroper/325007 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save charlesroper/325007 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
_structure.sass
+susy
div#page
+container
header#title, div#content, footer#site-info, section#footer
+full
div#content
div#primary
+clearfix
section#staticmatic
+columns(4,12)
section#compass
+columns(4,12)
section#susy
+columns(4,12)
+omega(12)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Staticmatic :: Compass :: Susy</title>
<meta charset="utf-8">
<link href="stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css"/>
<script language="javascript" src="javascripts/modernizr-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
<header id="title">
<h1>Staticmatic, Compass & Susy</h1>
</header>
<div id="content">
<div id="primary">
<section id="staticmatic">
<div class="content">
<h2>StaticMatic</h2>
<img src="/images/logo.png">
<p>StaticMatic is a powerful yet simple static website creation tool.</p>
<p>Using the elegance and power of Ruby, Haml and Sass, it enables web designers to nimbly side-step cumbersome content management systems, work on rapid prototypes or employ an efficient in-browser design workflow.</p>
<p>StaticMatic is an Open Source project maintained by <a href="http://github.com/stevebartholomew">Stephen Bartholomew</a>.</p>
</div>
</section>
<section id="compass">
<div class="content">
<h2>Compass</h2>
<p>Compass is a next-generation <span class="caps">CSS</span> authoring framework that makes it easy to build, maintain and prototype <span class="caps">CSS</span>.</p>
<p>Compass re-implements many well-known and battle-tested <span class="caps">CSS</span> frameworks such as Blueprint and 960gs, and also has a growing library of it&#8217;s own native frameworks, that enable authors to produce standards compliant, semantically rich markup and <span class="caps">CSS</span> without requiring the presentational cruft associated with traditional <span class="caps">CSS</span> frameworks. Compass also provides tools to enable advanced features of CSS3 and traditionally tricky design techniques such as vertical rhythm.</p>
<p>By exploiting the power and sophistication of Sass, an extension of <span class="caps">CSS</span> that compiles into standard <span class="caps">CSS</span>, Compass makes building and managing complex stylesheets easy, productive and fun.</p>
<p>Compass is an Open Source project maintained by <a href="http://chriseppstein.github.com/">Chris Eppstein</a></p>
</div>
</section>
<section id="susy">
<div class="content">
<h2>Susy</h2>
<p>Susy is a grid system for web designers that enables fluid layouts, without the math.</p>
<p>Built on the techniques of <a href="http://natbat.net/">Natalie Downe</a> authoring framework, Susy brings together the unique semantic control of hand-written code with the speed of a framework and the strength needed for a bullet-proof design. With Susy you can build quick, custom grids that respond to the needs of the user without giving up design integrity. It&#8217;s elastic, it&#8217;s fluid, it&#8217;s Susy.</p>
<p>Susy is an open source project envisioned and maintained by the <a href="http://www.oddbird.net/">OddBird Collective</a>: Eric Meyer, Carl Meyer and Jonny Gerig Meyer, all of whom would love to chat sometime. Give them a ring.</p>
</div>
</section>
</div>
<section id="credit">
<div class="content">
<h2>Thanks to</h2>
<ul id="selector">
<li>
<a href="https://github.com/chriseppstein">Chris Eppstein</a> /
<a href="https://github.com/chriseppstein">Compass</a>
</li>
<li>
<a href="http://nex-3.com/">Nathan Weizenbaum</a> /
<a href="http://sass-lang.com/about.html">Sass</a>
</li>
<li>
<a href="http://natbat.net/">Natalie Downe</a> /
<a href="http://natbat.net/2008/Sep/28/css-systems/">CSS Systems</a>
</li>
</ul>
</div>
</section>
</div>
<footer id="site-info">
<p class="license">
This website is being built as an experiment by Charles Roper.
</p>
<p class="styles">
View the styles for this site.
</p>
</footer>
</div>
</body>
</html>
Raw
screen.css
/* @group reset */
/* line 6, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; }
/* line 17, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
*:focus {
outline: 0; }
/* line 20, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
body {
line-height: 1;
color: #000;
background: #fff; }
/* line 23, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
ol, ul {
list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
/* line 27, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
table {
border-collapse: separate;
border-spacing: 0;
vertical-align: middle; }
/* line 30, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
/* line 33, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
q, blockquote {
quotes: "" ""; }
/* line 101, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
q:before, q:after, blockquote:before, blockquote:after {
content: ""; }
/* line 36, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
a img {
border: none; }
/* line 108, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/_reset.sass */
section, article, aside, header, footer, nav, dialog, figure {
display: block; }
/* @end */
/* line 27, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-susy-plugin-0.7.0.pre4/sass/susy/././_vertical_rhythm.sass */
body {
font-size: 100%;
line-height: 1.313em; }
/* line 30, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-susy-plugin-0.7.0.pre4/sass/susy/././_vertical_rhythm.sass */
html>body {
font-size: 16px; }
/* line 21, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-susy-plugin-0.7.0.pre4/sass/susy/_susy.sass */
body {
text-align: center; }
/* line 3, config/../src/stylesheets/includes/_structure.sass */
div#page {
overflow: hidden;
display: inline-block;
text-align: left;
margin-left: auto;
margin-right: auto;
width: 1060px;
max-width: 100%; }
/* line 5, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/./_hacks.sass */
div#page {
display: block; }
/* line 6, config/../src/stylesheets/includes/_structure.sass */
header#title, div#content, footer#site-info, section#footer {
display: inline;
float: left;
width: 88.679%;
margin-right: 1.887%;
clear: both;
margin-right: 5.66%;
margin-left: 5.66%; }
/* line 12, config/../src/stylesheets/includes/_structure.sass */
div#content div#primary {
overflow: hidden;
display: inline-block; }
/* line 5, C:/Users/charlesr/Tools/Ruby/ruby-1.8.7-p249-i386-mingw32/lib/ruby/gems/1.8/gems/compass-0.10.0.rc1/frameworks/compass/stylesheets/compass/utilities/general/./_hacks.sass */
div#content div#primary {
display: block; }
/* line 15, config/../src/stylesheets/includes/_structure.sass */
div#content div#primary section#staticmatic {
display: inline;
float: left;
width: 31.915%;
margin-right: 2.128%; }
/* line 19, config/../src/stylesheets/includes/_structure.sass */
div#content div#primary section#compass {
display: inline;
float: left;
width: 31.915%;
margin-right: 2.128%; }
/* line 22, config/../src/stylesheets/includes/_structure.sass */
div#content div#primary section#susy {
display: inline;
float: left;
width: 31.915%;
margin-right: 2.128%;
display: inline;
float: right;
margin-right: 0;
/* ugly hacks for IE6-7 */
#margin-left: -1%;
/* end ugly hacks */ }
@font-face {
font-family: 'Marketing Script Regular';
src: url('/fonts/marketing-script/MarketingScript.eot');
src: local('Marketing Script Regular'), local('MarketingScript'), url('/fonts/marketing-script/MarketingScript.woff') format('woff'), url('/fonts/marketing-script/MarketingScript.svg#MarketingScript') format('svg'), url('/fonts/marketing-script/MarketingScript.ttf') format('truetype'); }
/* line 13, config/../src/stylesheets/includes/_typography.sass */
body {
font-family: Georgia, "Times New Roman", serif; }
/* line 16, config/../src/stylesheets/includes/_typography.sass */
a {
text-decoration: none; }
/* line 19, config/../src/stylesheets/includes/_typography.sass */
p {
margin-bottom: 1.313em;
text-shadow: rgba(0, 0, 0, 0.75) 0.5px 0.5px 1px; }
/* line 23, config/../src/stylesheets/includes/_typography.sass */
h1 {
font-size: 3.125em;
line-height: 2.52em;
text-align: center;
font-family: Marketing Script Regular;
color: rgba(255,255,255,1); }
/* line 29, config/../src/stylesheets/includes/_typography.sass */
h2 {
font-family: Marketing Script Regular;
font-size: 2.5em;
line-height: 1.575em;
letter-spacing: -1px; }
/* line 1, config/../src/stylesheets/includes/_design.sass */
body {
background-color: #20015E;
background-image: url(/images/staticmatic.png);
background-position: center; }
/* line 12, config/../src/stylesheets/includes/_design.sass */
div#primary section .content {
padding: 21px;
border-top-width: 0.188em;
padding-top: 1.125em;
border: 3px solid rgba(0,0,0,.6);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: rgba(255,255,255,.8);
background-color: rgba(135,79,245,.2); }
/* line 1, config/../src/stylesheets/includes/_debug.sass */
div#page {
background-image: url(/images/grid.png);
background-repeat: repeat;
background-position: 5.66% 0;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
filter: alpha(opacity=50); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment