Skip to content

Commit c512856

Browse files
Maarten84Maarten84
committed
Basis opzet formulieren
1 parent 6f1ea06 commit c512856

20 files changed

+603
-30
lines changed

‎Gruntfile.js

+1
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ module.exports = function(grunt) {
6060
},
6161
}
6262
},
63+
6364
nunjucks: {
6465
render: {
6566
options: {

‎dist/about.html

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676

7777
</li>
7878

79+
<li><a href="/forms.html" >Forms</a>
80+
81+
</li>
82+
7983
<li><a href="/buttons.html" >Buttons</a>
8084

8185
</li>

‎dist/buttons.html

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676

7777
</li>
7878

79+
<li><a href="/forms.html" >Forms</a>
80+
81+
</li>
82+
7983
<li><a href="/buttons.html" class="active">Buttons</a>
8084

8185
</li>

‎dist/css/styles.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/styles.min.css.map

+6-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/forms.html

+346
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Forms - CastleCSS</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
7+
<link rel="stylesheet" href="css/styles.min.css" />
8+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
10+
</head>
11+
12+
<body>
13+
14+
<!-- Google Tag Manager -->
15+
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N85PTX"
16+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
17+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
18+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
19+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
20+
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
21+
})(window,document,'script','dataLayer','GTM-N85PTX');</script>
22+
23+
<div id="wrapper" class="wrapper ">
24+
25+
<div class="g full-height">
26+
27+
<!-- Side -->
28+
<div class="b0_12 b4_08 b5_06 b6_04">
29+
<!-- End Google Tag Manager -->
30+
<header id="header" class="nav-container">
31+
<div class="nav-label">menu</div>
32+
<a class="nav-logo p-b4-3x" href="index.html"><img src="img/logo-castlecss.png"></a>
33+
<div class="nav-wrap pl-3x pr-3x">
34+
35+
<ul class="doc-menu list-unstyled">
36+
37+
<li><a href="/about.html" >About CastleCSS</a>
38+
39+
</li>
40+
41+
<li><a href="/installation.html" >Installation</a>
42+
43+
</li>
44+
45+
<li><a href="/variables.html" >Variables</a>
46+
47+
</li>
48+
49+
<li><a href="/grid.html" >Breakpoints &amp; Grid</a>
50+
51+
<ul class="list-unstyled">
52+
53+
<li><a href="grid.html#basicexamples">The basics</a>
54+
55+
<li><a href="grid.html#breakpoints">Breakpoints</a>
56+
57+
<li><a href="grid.html#basicexamples">Basic grid examples</a>
58+
59+
<li><a href="grid.html#gutters">Gutters</a>
60+
61+
<li><a href="grid.html#directionalignment">Direction and alignment</a>
62+
63+
</ul>
64+
65+
</li>
66+
67+
<li><a href="/utility.html" >Utility classes</a>
68+
69+
</li>
70+
71+
<li><a href="/utility_spacers.html" >Utility spacers</a>
72+
73+
</li>
74+
75+
<li><a href="/icons.html" >Icons</a>
76+
77+
</li>
78+
79+
<li><a href="/forms.html" class="active">Forms</a>
80+
81+
</li>
82+
83+
<li><a href="/buttons.html" >Buttons</a>
84+
85+
</li>
86+
87+
<li><a href="/notifications.html" >Notifications / alerts</a>
88+
89+
</li>
90+
91+
<li><a href="/mixins.html" >Mixins</a>
92+
93+
</li>
94+
95+
</ul>
96+
</div>
97+
98+
99+
100+
</header>
101+
102+
</div>
103+
<!-- End side -->
104+
105+
106+
<!-- Main -->
107+
<div class="b0_12 b4_14 b4_push_01">
108+
<div class="p p-b3-3x">
109+
<div class="block js-forms">
110+
<h1>Forms</h1>
111+
<h2>Label placement</h2>
112+
<div class="g">
113+
<div class="b0_12 b3_08">
114+
<ul class="fields g">
115+
<li class="b0_12">
116+
<b>Ontop of field</b>
117+
</li>
118+
<li class="b0_12">
119+
<div class="form-field">
120+
<label for="lable1a">Label</label>
121+
<input class="text" type="text" name="Naam" id="lable1a" value="">
122+
</div>
123+
</li>
124+
</ul>
125+
</div>
126+
<div class="b0_12 b3_08">
127+
<ul class="fields formlabel-top g">
128+
<li class="b0_12 mb-2x">
129+
<b>Moves ontop of field</b>
130+
</li>
131+
<li class="b0_12">
132+
<div class="form-field">
133+
<label for="lable2a">Label</label>
134+
<input class="text" type="text" name="Naam" id="lable2a" value="">
135+
</div>
136+
</li>
137+
</ul>
138+
</div>
139+
<div class="b0_12 b3_08">
140+
<ul class="fields formlabel-bottom g">
141+
<li class="b0_12 mb-2x">
142+
<b>Moves bottom inside field</b>
143+
</li>
144+
<li class="b0_12">
145+
<div class="form-field">
146+
<label for="lable3a">Label</label>
147+
<input class="text" type="text" name="Naam" id="lable3a" value="">
148+
</div>
149+
</li>
150+
</ul>
151+
</div>
152+
</div>
153+
<div class="g">
154+
<div class="gi b0_12 b3_12">
155+
<ul class="fields formlabel-top g">
156+
<li class="b0_12 mt-2x"><h2>Textarea's</h2></li>
157+
<li class="b0_12 ">
158+
<div class="form-field">
159+
<label for="textarea">Textarea</label>
160+
<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
161+
</div>
162+
</li>
163+
</ul>
164+
</div>
165+
<div class="gi b0_12 b3_12">
166+
<ul class="fields formlabel-bottom g">
167+
<li class="b0_12 mt-2x"><h2>Textarea's</h2></li>
168+
<li class="b0_12 ">
169+
<div class="form-field">
170+
<label for="textarea">Textarea</label>
171+
<textarea maxlength="30000" cols="50" rows="10" id="textarea" name="textarea"></textarea>
172+
</div>
173+
</li>
174+
</ul>
175+
</div>
176+
</div>
177+
<ul class="fields formlabel-top g">
178+
<li class="b0_12 mt-2x mb-2x">
179+
<h2>Custom Checkbox</h2>
180+
<b>Label right & Inline</b>
181+
</li>
182+
<li class="b0_12">
183+
<div class="form-field form-inline">
184+
<label class="input-control input-checkbox">First checkbox
185+
<input type="checkbox" checked="checked"/>
186+
<div class="input-indicator"></div>
187+
</label>
188+
<label class="input-control input-checkbox">First checkbox
189+
<input type="checkbox" checked="checked" disabled />
190+
<div class="input-indicator"></div>
191+
</label>
192+
<label class="input-control input-checkbox">First checkbox
193+
<input type="checkbox" checked="checked"/>
194+
<div class="input-indicator"></div>
195+
</label>
196+
</div>
197+
</li>
198+
<li class="b0_12"><b>Label left</b></li>
199+
<li class="b0_12 label-left">
200+
<label class="input-control input-checkbox">First checkbox
201+
<input type="checkbox" checked="checked"/>
202+
<div class="input-indicator"></div>
203+
</label>
204+
<label class="input-control input-checkbox">First checkbox
205+
<input type="checkbox" checked="checked" disabled />
206+
<div class="input-indicator"></div>
207+
</label>
208+
<label class="input-control input-checkbox">First checkbox
209+
<input type="checkbox" checked="checked"/>
210+
<div class="input-indicator"></div>
211+
</label>
212+
</li>
213+
<li class="b0_12 mt-2x"><h2>Custom Radio</h2></li>
214+
<li class="b0_12">
215+
<label class="form-block">Choose</label>
216+
<div class="form-field form-inline">
217+
<label class="input-control input-radio">First radio
218+
<input type="radio" name="radio2" checked="checked"/>
219+
<div class="input-indicator"></div>
220+
</label>
221+
<label class="input-control input-radio">Second radio
222+
<input type="radio" name="radio2"/>
223+
<div class="input-indicator"></div>
224+
</label>
225+
</div>
226+
</li>
227+
<li class="b0_12">
228+
<label class="input-control input-radio">First radio
229+
<input type="radio" name="radio" checked="checked"/>
230+
<div class="input-indicator"></div>
231+
</label>
232+
<label class="input-control input-radio">Second radio
233+
<input type="radio" name="radio"/>
234+
<div class="input-indicator"></div>
235+
</label>
236+
</li>
237+
<li class="b0_12 mt-2x"><h2>Custom select</h2></li>
238+
<li class="b0_12 input-select">
239+
<div class="select">
240+
<select>
241+
<option>First select</option>
242+
<option>Option</option>
243+
<option>Option</option>
244+
</select>
245+
<div class="select-arrow"></div>
246+
</div>
247+
</li>
248+
</ul>
249+
<ul class="fields formlabel-bottom g">
250+
<li class="b0_12 mt-2x"><h2>Combined input/button</h2></li>
251+
<li class="b0_12 ">
252+
<div class="form-field input-icon">
253+
<label for="search">Product sku</label>
254+
<div class="combined-item fa fa-search">
255+
<input type="search" name="search" class="form-input" id="search">
256+
<button type="submit" class="btn btn-submit">Search</button>
257+
</div>
258+
</div>
259+
</li>
260+
</ul>
261+
</div>
262+
</div>
263+
</div>
264+
<!-- End main -->
265+
266+
<!-- TODO CastleModules van maken : data-castlemodule='castlecss-forms' -->
267+
<script>
268+
$('.js-forms').find('.form-field').each(function(){
269+
var $this = $(this);
270+
271+
function setValue($field) {
272+
// Check if inputs or textareas have a value
273+
if( $field.val() == null )
274+
return;
275+
else if( $field.val().length > 0 )
276+
$field.parents('.form-field').addClass('has-value');
277+
else if( $field.val().length === 0 )
278+
$field.parents('.form-field').removeClass('has-value');
279+
// Check if select has an option selected with a value
280+
else if( field[0].tagName.match('select') && $field.find('option:selected').val() )
281+
$field.parents('.form-field').addClass('has-value');
282+
else
283+
$field.parents('.form-field').removeClass('has-value');
284+
}
285+
286+
// Get all formfields
287+
var $formfields = $this.find('input, textarea, select');
288+
289+
// Check if there is already a value
290+
$formfields.each(function(){
291+
setValue($(this));
292+
}).focus(function(){
293+
$(this).parents('.form-field').addClass('has-focus');
294+
}).focusout(function(){
295+
$(this).parents('.form-field').removeClass('has-focus');
296+
}).on('keyup change', function(){
297+
setValue($(this));
298+
});
299+
});
300+
301+
</script>
302+
303+
<!-- Scripts for documentation -->
304+
<footer id="footer">
305+
306+
</footer>
307+
<script>
308+
$(function () {
309+
navOpen();
310+
311+
window.onscroll = function(e) {
312+
offSetManager();
313+
}
314+
});
315+
316+
function offSetManager(){
317+
318+
var yOffset = 110;
319+
var currYOffSet = window.pageYOffset;
320+
var menuHeight = $('.doc-menu').height();
321+
var windowHeight = $(window).height();
322+
323+
if((yOffset < currYOffSet) && (menuHeight < windowHeight)) {
324+
$('.nav-wrap').addClass('fixed');
325+
} else if(yOffset > currYOffSet){
326+
$('.nav-wrap').removeClass('fixed');
327+
}
328+
}
329+
330+
function navOpen() {
331+
$('.nav-label, .open-documentation').on('click', function(e) {
332+
$('.nav-container').toggleClass('nav-container-active');
333+
e.preventDefault();
334+
});
335+
}
336+
337+
</script>
338+
339+
<script src="js/shCore.js"></script>
340+
<script src="js/shBrushXml.js"></script>
341+
<script src="js/shBrushSass.js"></script>
342+
<script src="js/shBrushJScript.js"></script>
343+
<script type="text/javascript">SyntaxHighlighter.all();</script>
344+
<script async defer src="https://buttons.github.io/buttons.js"></script>
345+
</body>
346+
</html>

‎dist/grid.html

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676

7777
</li>
7878

79+
<li><a href="/forms.html" >Forms</a>
80+
81+
</li>
82+
7983
<li><a href="/buttons.html" >Buttons</a>
8084

8185
</li>

‎dist/icons.html

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676

7777
</li>
7878

79+
<li><a href="/forms.html" >Forms</a>
80+
81+
</li>
82+
7983
<li><a href="/buttons.html" >Buttons</a>
8084

8185
</li>

0 commit comments

Comments
 (0)