easygrid/index.html at master · eahenke/easygrid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
	<title>Easy Grids</title>
	<meta charset='utf-8'/>
	<meta name="author" content="Eric Henke">
	<meta name="viewport" content="width=device-width" />

	 <link rel="icon" type="image/jpg" href="images/easy-icon.jpg" sizes="64x64">
	<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
	<link href="easygrid.css" rel="stylesheet" type="text/css" />

</head>
<body>

	<div class="warning size-warning hidden">
		<div class="warning-msg">
			<p>Uh oh, your padding is larger than your column and you broke the grid!  Reduce either the number of columns or the gutter size or padding size.</p>
			<p class="close"><a>I understand.</a></p>
		</div>
	</div>

	<div class="warning android-warning hidden">
		<div class="warning-msg">
			<p>It looks like you're using Android's stock browser. You're welcome to use it, but your experience may be better on another browser.</p>
			<p class="close"><a>I understand.</a></p>
		</div>
	</div>

	<div class="main-wrap">
		<h1>Easy CSS Grids</h1>
		<h5>Inspired by <a class="credit" href="http://flow.gs">flow.gs</a></h5>
		<p>Select the desired number of columns, the size of gutters and padding, and space between rows to generate lightweight CSS for a custom grid system</p>
	</div>

	<div class="controls">

		<div class="settings">
			<p>Select number of columns</p>
			<div class="slide-wrap">
				<input name="cols" class="slider" type="range" value="8" min="1" max="16" step="1" />
				<div class="output"></div>
			</div>
		</div>

		<div class="settings">
			<p>Select gutter size</p>
			<div class="slide-wrap">
				<input name="gutter" class="slider" type="range" value="1" min="0" max="3" step="0.25" />
				<div class="output"></div>
			</div>
		</div>

		<div class="settings">
			<p>Select padding size</p>
			<div class="slide-wrap">
				<input name="padding" class="slider" type="range" value="0.5" min="0" max="1" step="0.05" />
				<div class="output"></div>
			</div>
		</div>

		<div class="settings">
			<p>Select row gutter size</p>
			<div class="slide-wrap">
				<input name="rowGut" class="slider" type="range" value="0.5" min="0" max="1" step="0.05" />
				<div class="output"></div>
			</div>
		</div>

	</div>

	<div class="example">
		<div class="example-wrap">
			<div class="row row1">
			</div>

			<div class="row row2">
			</div>

		</div>
	</div>

	<div class="submit">
		<button>Generate CSS</button>
	</div>

	<div class="grid-code-wrap">
		<h2>Select the code</h2>
		<p>Click below to select the code, then copy it into a CSS file</p>
		<div class="grid-code"></div>
	</div>

	<div class="usage-wrap">
		<h2>Example usage</h2>
		<p>Click below to select the code, and copy it into an HTML file as a skeleton for your page</p>


		<div class="usage">
			<pre>
				<code id="html">
	&lt;div class="container"&gt; <span class="comment">&lt;!--Wrap your grid in a container and give it a desired width--&gt;</span>

		&lt;div class="row"&gt;

			&lt;div class="col-1"&gt;
				&lt;div class="column-content"&gt;<span class="content">...</span>&lt;/div&gt; <span class="comment">&lt;!--Put your content here if you want your columns to have padding.  If your grid has no padding, you don't need this div.--&gt;</span>
			&lt;/div&gt;

			&lt;div class="col-2"&gt; <span class="comment">&lt;!--This column is twice as wide as one--&gt;</span>
						&lt;div class="column-content"&gt;<span class="content">...</span>&lt;/div&gt;
			&lt;/div&gt;

			&lt;div class="col-3"&gt; <span class="comment">&lt;!--This column is 3x as wide as one--&gt;</span>
				&lt;div class="column-content"&gt;<span class="content">...</span>&lt;/div&gt;
			&lt;/div&gt;

		&lt;/div&gt; <span class="comment">&lt;!--End row--&gt;</span>

	&lt;/div&gt; <span class="comment">&lt;!--End grid container--&gt;</span>
				</code>
			</pre>
		</div>

	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="js/grid.js" type="text/javascript"></script>
</body>
</html>