forked from guyroutledge/box-model
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (111 loc) · 5.51 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
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
<html>
<head>
<title>Box Model Demo</title>
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="box-model.css">
</head>
<body>
<header>
<h1>Interactive box-model demo</h1>
<p>Adjust the sliders to see how the box changes and generates the necessary code.</p>
<p><em>Visit the <a href="https://github.com/canadalearningcode/box-model">canadalearningcode/box-model repo</a> to see how it works!</em></p>
</header>
<div class="box"></div>
<div class="box-code">
<h2>Box CSS:</h2>
<pre><code id="boxCode"></code>
<small>/* Fork of Guy Routledge's <a href="https://github.com/guyroutledge/box-model">Interactive Box Model (guyroutledge/box-model) repo</a> */</small>
</pre>
<aside class="box-dimensions">
<h3>Generated dimensions</h3>
<p>
width: <span id="generatedWidth">200</span>px,<br>
height: <span id="generatedHeight">200</span>px
</p>
</aside>
</div>
<aside class="box-controls">
<form>
<fieldset class="box-link-properties">
<legend>Box-sizing</legend>
<label for="contentBox">content-box</label>
<input type="radio" name="boxSizing[]" id="contentBox" checked>
<label for="borderBox">border-box</label>
<input type="radio" name="boxSizing[]" id="borderBox">
</fieldset>
<fieldset>
<legend>Dimensions</legend>
<label for="boxWidth">Width:</label>
<input type="range" min="0" max="500" name="boxWidth" id="boxWidth" value="200" step="5">
<label for="boxWidth">Height:</label>
<input type="range" min="0" max="500" name="boxHeight" id="boxHeight" value="200" step="5">
</fieldset>
<fieldset>
<legend>Padding</legend>
<fieldset class="box-link-properties">
<label for="linkPaddingNone">Link None</label>
<input type="radio" name="linkPadding[]" id="linkPaddingNone" checked>
<label for="linkPaddingTopBottom">Link T/B</label>
<input type="radio" name="linkPadding[]" id="linkPaddingTopBottom">
<label for="linkPaddingRightLeft">Link R/L</label>
<input type="radio" name="linkPadding[]" id="linkPaddingRightLeft">
<label for="linkPaddingAll">All</label>
<input type="radio" name="linkPadding[]" id="linkPaddingAll">
</fieldset>
<label for="boxPaddingTop">Padding Top:</label>
<input type="range" min="0" max="100" name="boxPaddingTop" id="boxPaddingTop" value="20" step="5">
<label for="boxPaddingRight">Padding Right:</label>
<input type="range" min="0" max="100" name="boxPaddingRight" id="boxPaddingRight" value="20" step="5">
<label for="boxPaddingBottom">Padding Bottom:</label>
<input type="range" min="0" max="100" name="boxPaddingBottom" id="boxPaddingBottom" value="20" step="5">
<label for="boxPaddingLeft">Padding Left:</label>
<input type="range" min="0" max="100" name="boxPaddingLeft" id="boxPaddingLeft" value="20" step="5">
</fieldset>
<fieldset>
<legend>Margin</legend>
<fieldset class="box-link-properties">
<label for="linkMarginNone">Link None</label>
<input type="radio" name="linkMargin[]" id="linkMarginNone" checked>
<label for="linkMarginTopBottom">Link T/B</label>
<input type="radio" name="linkMargin[]" id="linkMarginTopBottom">
<label for="linkMarginRightLeft">Link R/L</label>
<input type="radio" name="linkMargin[]" id="linkMarginRightLeft">
<label for="linkMarginAll">All</label>
<input type="radio" name="linkMargin[]" id="linkMarginAll">
</fieldset>
<label for="boxMarginTop">Margin Top:</label>
<input type="range" min="0" max="100" name="boxMarginTop" id="boxMarginTop" value="20" step="5">
<label for="boxMarginRight">Margin Right:</label>
<input type="range" min="0" max="100" name="boxMarginRight" id="boxMarginRight" value="20" step="5">
<label for="boxMarginBottom">Margin Bottom:</label>
<input type="range" min="0" max="100" name="boxMarginBottom" id="boxMarginBottom" value="20" step="5">
<label for="boxMarginLeft">Margin Left:</label>
<input type="range" min="0" max="100" name="boxMarginLeft" id="boxMarginLeft" value="20" step="5">
</fieldset>
<fieldset>
<legend>Border</legend>
<fieldset class="box-link-properties">
<label for="linkBorderNone">Link None</label>
<input type="radio" name="linkBorder[]" id="linkBorderNone" checked>
<label for="linkBorderTopBottom">Link T/B</label>
<input type="radio" name="linkBorder[]" id="linkBorderTopBottom">
<label for="linkBorderRightLeft">Link R/L</label>
<input type="radio" name="linkBorder[]" id="linkBorderRightLeft">
<label for="linkBorderAll">All</label>
<input type="radio" name="linkBorder[]" id="linkBorderAll">
</fieldset>
<label for="boxBorderTop">Border Top:</label>
<input type="range" min="0" max="50" name="boxBorderTop" id="boxBorderTop" value="10" step="5">
<label for="boxBorderRight">Border Right:</label>
<input type="range" min="0" max="50" name="boxBorderRight" id="boxBorderRight" value="10" step="5">
<label for="boxBorderBottom">Border Bottom:</label>
<input type="range" min="0" max="50" name="boxBorderBottom" id="boxBorderBottom" value="10" step="5">
<label for="boxBorderLeft">Border Left:</label>
<input type="range" min="0" max="50" name="boxBorderLeft" id="boxBorderLeft" value="10" step="5">
</fieldset>
</form>
</aside>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="box-model.js"></script>
</body>
</html>