Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 67 lines (49 sloc) 2.645 kB
0acb52e Initial Commit
jo authored
1 # Using magazine grid
2
3 magazine grid will help you create nice magazine layouts in HTML5 for the iPad. It creates an 8-column grid and some typographic styles.
4
5 ## Grid numbers
6
7 The grid consists of 8 columns with a width of 82 pixels in portrait & 114 pixels in landscape orientation. They have a gap of 16 pixels. It comes with a fix baseline grid of 22 pixels and an optional gutter of 49 pixels.
8
9 ## Setting up
10
11 To use magazine grid, you need to include only CSS File. It's highly recommended to use the minified Version. Also, you need to set the viewport width to prevent automatic scaling of your page. Include the following code into the <head> of your page:
12
13 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;">
14 <link rel="stylesheet" href="magazinegrid.min.css" type="text/css" media="screen, handheld" charset="utf-8">
15
16 ## HTML
17
a51069b Formatted Readme
jo authored
18 <article>
0acb52e Initial Commit
jo authored
19 Will be the wrapper for the page. Be aware that all other features of magazine grid will only work inside an article-element
20
a51069b Formatted Readme
jo authored
21 <nav class="pagina">
36f9389 Changed Readme
jo authored
22 Put this as the first element inside the ´<article>´. Will format as a Pagination, possibly to put the category or page number.
0acb52e Initial Commit
jo authored
23
a51069b Formatted Readme
jo authored
24 <section>
0acb52e Initial Commit
jo authored
25 Defines a new "row" of elements.
26
a51069b Formatted Readme
jo authored
27 <p class="grid x1">
0acb52e Initial Commit
jo authored
28 Defines an element inside the grid which is one column wide. Feel free to use every semantic element you like.
29 Following classes are possible:
30
36f9389 Changed Readme
jo authored
31 - ´grid´ - makes the element a part of the grid
32 - ´x1-8´ - defines the width of the element. Can be between one and eight columns wide
33 - ´indent1-7´ - pushes an element one column to the right. Can be between one and seven.
34
35 ### Typography
0acb52e Initial Commit
jo authored
36
a51069b Formatted Readme
jo authored
37 <section class="gutter">
0acb52e Initial Commit
jo authored
38 Defines an element with a nice gutter to enhance rich text formatting. Following classes are possible:
39
36f9389 Changed Readme
jo authored
40 - ´gutter´ - sets a gutter of 0.5 columns on both sides of page
41 - ´column2´ - formats the text in 2 columns
42 - ´column3´ - formats the text in 3 columns
43 - ´column2 border´ - formats the text in 2 columns, justified & with a thin border between the gaps
44 - ´column3 border´ - formats the text in 3 columns, justified & with a thin border between the gaps
0acb52e Initial Commit
jo authored
45
a51069b Formatted Readme
jo authored
46 ### Example HTML
0acb52e Initial Commit
jo authored
47
a51069b Formatted Readme
jo authored
48 <article>
49 <nav class="pagina</strong>">…</nav>
50 <section>
51 <p class="grid x4">
52 Paragraph Element, 4 columns wide
53 </p>
54 <p class="grid x2 indent1">
55 Paragraph Element, 2 columns wide, pushed 1 column to the right
56 </p>
57 <h1 class="grid x1">
58 Headline Element, 1 column wide
59 </h1>
60 </section>
61 <section class="gutter column2">
62 <p>
63 Text running in 2 columns with gutter left/right of 0.5 grid columns
64 </p>
65 </section>
66 </article>
Something went wrong with that request. Please try again.