-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
94 lines (68 loc) · 2.94 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>Fluid Grids</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:300,500,300italic">
<link rel="stylesheet" href="http://csswizardry.com/css/csswizardry.min.css">
<link rel="stylesheet" href="fluid-grids.css">
<link rel="shortcut icon" href="http://csswizardry.com/icon.png">
</head>
<body>
<!-- Hidden preload `div` to fetch images before CSS needs them. -->
<div class="ಠ_ಠ">
<img src="http://csswizardry.com/img/css/sprites/main.svg" alt="">
</div>
<div class="wrapper">
<header class="page-head">
<a href="/" class="site-logo">
<img src="http://csswizardry.com/img/dot.gif" alt="CSS Wizardry" class="s s--csswizardry-logo">
</a>
</header><!-- /page-head -->
<div class="gw">
<div class="g one-whole desk-six-tenths">
<h1>Fluid Grid Generator</h1>
<p>Grid system generator as outlined in <a href="http://csswizardry.com/2011/06/fluid-grid-calculator/">this blog post</a>.</p>
<label for="total-cols">Total Columns</label>
<input id="total-cols" name="total-cols" type="number" value="16">
<label for="col-width">Column Width (px)</label>
<input id="col-width" name="col-width" type="number" value="40">
<label for="gutter-width">Gutter Width</label>
<input id="gutter-width" name="gutter-width" type="number" value="20">
<!-- Template for the CSS -->
<script type="text/html" id="css-template">
.grid-wrapper{
max-width: {{ totalWidth }}px;
margin-left: -{{ fluidGutterWidth }}%;
overflow:hidden;
}
.grid{
float:left;
margin-left: {{ fluidGutterWidth }}%;
}
{% for col in cols %}
.grid-{{ loop.index }} {
width: {{ col }}%;
}
{% endfor %}
</script>
<!-- Preview of the grid system -->
<div class="preview">
</div>
<label for="code">Copy and paste the CSS below.</label>
<textarea class="code"></textarea>
</div>
</div>
</div><!-- /wrapper -->
<footer class="page-foot"><div class="wrapper">
<p>
© 2013 <a href="http://twitter.com/csswizardry">Harry Roberts</a> and <a href="http://twitter.com/MrRio">James Hall</a>.
The source code of this project is <a href="https://github.com/csswizardry/fluid-grids">hosted on GitHub</a>
</p>
</footer><!-- /wrapper /page-foot -->
<div class="strip"></div>
<!-- Scripts at the end of the page for performance -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://paularmstrong.github.com/swig/js/swig.pack.min.js"></script>
<script src="fluid-grids.js"></script>
</body>
</html>