# jonikorpi/Frameless

Copywriting and &rsquo;s

1 parent b2bfa0b commit 03b43fddc6f7c121aa0589141502704cf8878643 committed Oct 3, 2011
Showing with 11 additions and 11 deletions.
1. +11 −11 framelessgrid.com/index.html
22 framelessgrid.com/index.html
 @@ -127,7 +127,7 @@
-

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.

+

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.

2. Make it repeat infinitely.

@@ -147,7 +147,7 @@
-

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.

+

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.

3. Center it in the viewport.

@@ -169,7 +169,7 @@

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.

-

4. That's it, really.

+

4. That’s it, really.

-

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.

+

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.

@@ -216,7 +216,7 @@ -

This is what I use as a blank canvas. Contains some basic HTML5, including Paul Irish's conditional classes, the HTML5 Shim, and a proper meta viewport tag.

+

This is what I use as a blank canvas. Contains some basic HTML5, including Paul Irish’s conditional classes, the HTML5 Shim, and a proper meta viewport tag.

@@ -241,31 +241,31 @@

Is Frameless a framework?

-

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.

+

Nope. It doesn’t include any code. It’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’ll still have to do all the hard work of designing and coding yourself.

Is Frameless responsive?

"Responsive web design“, as defined by its coiner, Ethan Marcotte, consists of three components: a fluid grid, fluid media, and media queries. The Frameless grid is fixed-width, not fluid.

Is Frameless related to Less Framework?

-

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.

+

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.

-

Don't adapt unless it makes sense.

+

Don’t adapt unless it makes sense.

-

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.

+

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.

Design Mobile First.

Start from the smallest possible size and work your way upwards. Adaptive designs tend to just work out better this way.

Leave IE6–8 behind.

-

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 IE-specific classes. It'll make your life much easier. More about this in my blog post: Leaving Old Internet Explorer Behind.

+

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 IE-specific classes. It’ll make your life much easier. More about this in my blog post: Leaving Old Internet Explorer Behind.

Mobile Safari causing trouble?

-

Does your site zoom in too much when changing orientations on an iOS device? It's because of this Mobile Safari bug.

+

Does your site zoom in too much when changing orientations on an iOS device? It’s because of this Mobile Safari bug.