Magazine Grid
create great magazine layouts
for the iPad

It's an ultramodern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid.

More semantics, less divs

Magazine Grid takes use of html5-elements to structure your magazine page. 

<article>
  <nav class="pagina">…</nav>
  <section>
    <p class="grid x5">…</p>
    <p class="grid x2">…</p>
    <p class="grid x1">…</p>
  </section>
  <section class="gutter column2">
    <p>
      …
    </p>
  </section>
</article>

An article-element wraps up your page, sections define the portions of content. Inside the sections you define which elements should match the grid and how wide they are. Section class=gutter is a special type which provides a nice white-space around the textblock for best readability. It can even have 2 or 3 columns.

Made for the iPad

Magazine Grid is designed to work best on the iPad in portrait and landscape orientation. The simple 8 column grid uses the full display without leaving unnecessary margins.

iPhone compatible? Yes, Sir!

Of course Magazine Grid has a nice fallback style for devices with smaller displays such as the iPhone or iPod Touch. It linearizes the grid and puts the main focus on readability.

Lighter than 4kB

Magazine Grid is superlight to load fast on mobile devices. That is why it doesn't care about oldschool browsers like IE6 or Netscape.

Start using Magazine Grid now - download the framework for free. Documentation and Example Pages are included:

Download now It's Free! Some Rights reserved.