Skip to content
Browse files

Copywriting and ’s

  • Loading branch information...
1 parent b2bfa0b commit 03b43fddc6f7c121aa0589141502704cf8878643 @jonikorpi committed Oct 3, 2011
Showing with 11 additions and 11 deletions.
  1. +11 −11 framelessgrid.com/index.html
View
22 framelessgrid.com/index.html
@@ -127,7 +127,7 @@
<div class="col col2"></div>
</figure>
- <p>Pick a column width, a gutter width… you know, the usual stuff. Don't worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.</p>
+ <p>Pick a column width, a gutter width… you know, the usual stuff. Don&rsquo;t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.</p>
</div>
<div class="wrapper">
<h3>2. Make it repeat infinitely.</h3>
@@ -147,7 +147,7 @@
<div class="dot invisidot"></div>
</figure>
- <p>Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you're looking at an infinitely wide honeycomb filled with columns instead of hexagons.</p>
+ <p>Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you&rsquo;re looking at an infinitely wide honeycomb filled with columns instead of hexagons.</p>
</div>
<div class="wrapper">
<h3>3. Center it in the viewport.</h3>
@@ -169,7 +169,7 @@
<p>Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.</p>
</div>
<div class="wrapper">
- <h3>4. That's it, really.</h3>
+ <h3>4. That&rsquo;s it, really.</h3>
<figure id="done">
<div class="col col1 active"></div>
@@ -184,7 +184,7 @@
<div class="col col23"></div>
</figure>
- <p>Start using the grid. Use media queries to adapt your design as more columns become available. Since you'll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn't adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.</p>
+ <p>Start using the grid. Use media queries to adapt your design as more columns become available. Since you&rsquo;ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn&rsquo;t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.</p>
</div>
</section>
@@ -216,7 +216,7 @@
</a>
</h3>
- <p>This is what I use as a blank canvas. Contains some basic HTML5, including <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">Paul Irish's conditional classes</a>, the <a href="http://code.google.com/p/html5shim/">HTML5 Shim</a>, and a proper meta viewport tag.</p>
+ <p>This is what I use as a blank canvas. Contains some basic HTML5, including <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">Paul Irish&rsquo;s conditional classes</a>, the <a href="http://code.google.com/p/html5shim/">HTML5 Shim</a>, and a proper meta viewport tag.</p>
<h3>
<a href="https://github.com/jonikorpi/Frameless/blob/master/frameless.psd">
@@ -241,31 +241,31 @@
<h3>Is Frameless a framework?</h3>
- <p>Nope. It doesn't include any code. It's just an idea for a specific type of adaptive grid. You still have to do all the hard work yourself.</p>
+ <p>Nope. It doesn&rsquo;t include any code. It&rsquo;s just an idea for a specific type of adaptive grid. You can use it as a good starting point for a new design, but you&rsquo;ll still have to do all the hard work of designing and coding yourself.</p>
<h3>Is Frameless responsive?</h3>
<p>"Responsive web design“, as defined by its coiner, <a href="http://ethanmarcotte.com/">Ethan Marcotte</a>, consists of three components: a fluid grid, fluid media, and media queries. The Frameless grid is fixed-width, not fluid.</p>
<h3>Is Frameless related to <a href="http://lessframework.com/">Less Framework</a>?</h3>
- <p>Frameless is the spiritual successor to Less Framework. It's a much simpler idea, more flexible, and hopefully easier to integrate into your design workflow.</p>
+ <p>Frameless is the spiritual successor to Less Framework. It&rsquo;s a much simpler idea, more flexible, and hopefully easier to integrate into your design workflow.</p>
- <h3>Don't adapt unless it makes sense.</h3>
+ <h3>Don&rsquo;t adapt unless it makes sense.</h3>
- <p>Only adapt your design when it makes sense for the content to adapt. You don't have to fill up every column at every possible screen size.</p>
+ <p>Only adapt your design when it makes sense for the content to adapt. You don&rsquo;t have to fill up every column at every possible screen size.</p>
<h3>Design <a href="http://www.lukew.com/ff/entry.asp?933">Mobile First</a>.</h3>
<p>Start from the smallest possible size and work your way upwards. Adaptive designs tend to just work out better this way.</p>
<h3>Leave IE6–8 behind.</h3>
- <p>Old IE won't see any styles that are inside a media query, so just serve it your mobile layout and enhance it a little using <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">IE-specific classes</a>. It'll make your life much easier. More about this in my blog post: <a href="http://jonikorpi.com/leaving-old-IE-behind/">Leaving Old Internet Explorer Behind</a>.</p>
+ <p>Old IE won&rsquo;t see any styles that are inside a media query, so just serve it your mobile layout and enhance it a little using <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">IE-specific classes</a>. It&rsquo;ll make your life much easier. More about this in my blog post: <a href="http://jonikorpi.com/leaving-old-IE-behind/">Leaving Old Internet Explorer Behind</a>.</p>
<h3>Mobile Safari causing trouble?</h3>
- <p>Does your site zoom in too much when changing orientations on an iOS device? It's because of <a href="http://filamentgroup.com/examples/iosScaleBug/">this Mobile Safari bug</a>.</p>
+ <p>Does your site zoom in too much when changing orientations on an iOS device? It&rsquo;s because of <a href="http://filamentgroup.com/examples/iosScaleBug/">this Mobile Safari bug</a>.</p>
</section>

0 comments on commit 03b43fd

Please sign in to comment.
Something went wrong with that request. Please try again.