Permalink
Browse files

Add news and tutorial links

  • Loading branch information...
1 parent 560130e commit 67fa348cb9f1957806017dd78b2703dad8398d0d Eric Meyer committed Nov 28, 2012
@@ -7,6 +7,14 @@ title: Demos
- [Different grid types](grid-types)
- [Mobile-first "magic" grids](magic)
+### Elsewhere
+
+- [Off-Canvas layout with Susy][off-canvas]
+- [Nettuts: Responsive Grids With Susy][nettuts]
+
+[nettuts]: http://net.tutsplus.com/tutorials/html-css-techniques/responsive-grids-with-susy/
+[off-canvas]: http://oddbird.net/2012/11/27/susy-off-canvas/
+
Have a tutorial you'd like to see?
[Contact us][twitter],
or [write it yourself][github].
@@ -1,19 +1,34 @@
+
+<pre class="download">gem install susy</pre>
<div class="intro">
+ <p class="highlight">Your markup. Your design. Our math.</p>
<p>
The web is a responsive place,
from your lithe <span class="amp">&</span> lively development process
to your end-user's super-tablet-multi-magic-lap-phone.
You need grids that are powerful yet custom,
reliable yet responsive.
</p>
- <p>
- We don't design your site or dictate your markup,
- we just do the math and get out of your way.
- </p>
</div>
<section class="info">
- <div class="highlight"><pre>gem install susy</pre></div>
- <p><a href="/guides/upgrade-1-0/">Changes <span class="amp">&</span> upgrade instructions »</a></p>
+ <p class="highlight">Recent News:</p>
+ <ul class="news">
+ <li class="newsitem">
+ <a href="http://oddbird.net/2012/11/27/susy-off-canvas/">
+ <strong>Tutorial:</strong> Off-Canvas Layout with Susy
+ </a>
+ </li>
+ <li class="newsitem">
+ <a href="https://rubygems.org/gems/susy/versions/1.0.5">
+ <strong>v1.0.5:</strong> Added support for rem units.
+ </a>
+ </li>
+ <li class="newsitem">
+ <a href="http://net.tutsplus.com/tutorials/html-css-techniques/responsive-grids-with-susy/">
+ <strong>Nettuts+ Tutorial:</strong> Responsive Grids With Susy
+ </a>
+ </li>
+ </ul>
</section>
<figure class="ag-test">
<figcaption>
@@ -9,8 +9,8 @@
// Grid Settings
$total-columns: 4;
-$column-width: 5em;
-$gutter-width: 1em;
+$column-width: 4em;
+$gutter-width: 1.5em;
$grid-padding: $gutter-width;
$break: 40em 10;
@@ -1,66 +1,51 @@
//-----------------------------------------------------------------------------
// Intro
-.serif-type {
+%serif-type {
@include adjust-font-size-to($medpx);
h2 { @include adjust-font-size-to($largepx,1.5,$medpx); }
p { @include trailer(1,$medpx); }
strong { font-weight: bold; }
em { font-style: italic; }
}
-.intro {
- @extend .serif-type;
+.download {
+ @include adjust-font-size-to($medpx);
+ @include rhythm-borders(1px,.5,$medpx);
+ @include leader(-.5,$medpx);
@include trailer(1,$medpx);
- p {
- &:first-child { color: $susy-bodycopy-dark-20; }
- &:last-child { font-style: italic; }
- }
- @include at-breakpoint($break) {
- @include span-columns(5);
- }
-}
-
-.info {
@include box-sizing(border-box);
- @include rhythm-borders(1px,2);
border-color: $susy-background-dark-20;
background: $susy-background-dark-10;
+ font-weight: bold;
text-align: center;
+ text-transform: uppercase;
+ letter-spacing: .1em;
+ @include at-breakpoint($break) { @include span-columns(5 omega); }
+}
- @include at-breakpoint($break) {
- @include span-columns(5 omega);
- }
-
- $version-size : $largepx;
-
- .version {
- @extend .caps;
- @include adjust-font-size-to($version-size);
- @include leader(0);
- @include trailer(.5,$version-size);
- font-weight: bold;
- a {
- @extend %icon;
- @extend %icon-pin;
- }
- }
+.highlight {
+ color: $susy-bodycopy-dark-20;
+ font-weight: bold;
+}
- .highlight { @include trailer(1); }
- pre {
- @include adjust-font-size-to($normpx);
- font-weight: bold;
+.intro {
+ @extend %serif-type;
+ @include trailer(1,$medpx);
+ p {
+ &:last-child { font-style: italic; }
}
+ @include at-breakpoint($break) { @include span-columns(5); }
}
-.v1-0 {
- h2 {
- @include adjust-font-size-to($medpx);
- }
+.info {
+ p { margin: 0; }
+ strong { color: $susy-bodycopy-dark-10; }
+ @include at-breakpoint($break) { @include span-columns(5 omega); }
}
.andmore {
- @extend .serif-type;
+ @extend %serif-type;
p:last-child { font-style: italic; }
@include at-breakpoint(50em 10) {
@include span-columns(5 omega,10);

0 comments on commit 67fa348

Please sign in to comment.