Introduction to using the Fork forms library http://github.com/forkcms/markup-library

1. FORMS
Fork forms library
Presentation about the Fork forms library http://github.com/forkcms/markup-library/
Photo: http://www.flickr.com/photos/cubagallery/

2. O Hai! I’m Yoni
Yoni De Beule, http://www.yonidebeule.be, @yoniweb

3. I work at Netlash-bSeen
among others.
http://www.netlash.com http://www.minify.be http://www.vlmbuzz.be http://www.wrappp.it

4. I love building websites.
I love building websites that are beautiful, accessible, easy to use and fast.

5. I love building the best possible websites
within the project specific time and budget.
I love building the best possible websites within the project specific time and budget (they should always be beautiful, accessible, easy to use and fast).

6. Time
Photo: http://www.flickr.com/photos/apoxapox/

7. Budget
Photo: http://www.flickr.com/photos/stephangeyer/

8. FANCY FORMS
Big budget
Fancy form examples

9. Fancy forms

10. Fancy forms

11. Fancy forms

12. Awesome if you have the time and budget.
Awesome if you have the time and budget.

13. UGLY FORMS
Small budget
Ugly forms

15. http://www.famiweb.be/

16. http://www.dmoz.org/

17. Clear lack of time and budget.
Clear lack of time and budget.

18. FORK FORMS
Fork forms library
Fork forms is a lightweight html/css library that allows you to build complex forms in very little time. Fork forms degrades nicely to IE6, IE7 and IE8 and is tested in IE6, IE7, IE8, Firefox 2, Firefox 3, Safari, Opera and Chrome. Forms is build to allow you
to spend more time and budget on other aspects of your site.

19. Fork forms is a forms library you could have
written yourself.
Fork forms is a forms library you could have written yourself.

20. Major principles
Major principles

21. Major principles
1. Flexible
Flexible

22. Major principles
1. Flexible
2. Understandable
Understandable

23. Major principles
1. Flexible
2. Understandable

24. HOW TO USE
Fork forms library

25. Simple form example

26. <form>
<p>
<label>Name</label> <input type="text" class="inputText" />
</p>
</p>
<label>Message</label> <textarea></textarea>
</p>
<p>
<input type="submit" class="inputSubmit" value="Send" />
</p>
</form>
Compromises have been made to make the code fit the screen (missing fieldset, label and input on the same line, ect)

27. This may look simple but you can tweak the button layout, focus styles, errors and messages.

28. Simple form example with class horizontal

29. <form class= "horizontal" >
<p>
<label>Name</label> <input type="text" class="inputText" />
</p>
</p>
<label>Message</label> <textarea></textarea>
</p>
<p>
<input type="submit" class="inputSubmit" value="Send" />
</p>
</form>
You can add horizontal to any wrapper (div, fieldset or form).

31. Variable width form example

32. <form>
<p class="tinyInput" >
<label>Tiny</label> <input type="text" class="inputText" />
</p>
<p class="smallInput" >
<label>Small</label> <input type="text" class="inputText" />
</p>
<p class="defaultInput" >
<label>Normal</label> <input type="text" class="inputText" />
</p>
<p class="mediumInput" >
<label>Medium</label> <input type="text" class="inputText" />
</p>
<p class="bigInput" >
<label>Big</label> <input type="text" class="inputText" />
</p>
</form>

34. Aligning blocks

35. <form>
<p class="bigInput" >
<label>Address</label> <input type="text" class="inputText" />
</p>
<div class="alignBlocks">
<p>
<label>City</label> <input type="text" class="inputText" />
</p>
<p class="smallInput">
<label>State</label> <input type="text" class="inputText" />
</p>
<p class="smallInput">
<label>Zip</label> <input type="text" class="inputText" />
</p>
</div>
</form>

37. Aligning fields

38. <form>
<div class="alignFields">
<p>
<label>City and ZIP code</label>
<input type="text" class="inputText" />
</p>
<p class="smallInput" >
<input type="text" class="inputText" />
</p>
</div>
</form>

40. Oneliner

41. <form>
<div class="oneLiner">
<p>
<label>City and ZIP code</label>
<input type="text" class="inputText" />
</p>
<p class="smallInput" >
<input type="text" class="inputText" />
</p>
<p>
<input type="submit" class="inputSubmit" value="Send" />
</p>
</div>
</form>

43. formSection

44. <form>
<div class="formSection">
<p class="label" >Properties</p>
<div class="formSectionContent">
<div class="alignBlocks">...</div>
<div class="alignBlocks">...</div>
<div class="alignBlocks">...</div>
<p>
<input type="submit" class="inputSubmit" value="Send" />
</p>
</div>
</div>
</form>

46. Now add messages, errors, visible fieldsets,
input lists and selects

50. http://github.com/forkcms/markup-library

51. Questions?
Questions?

52. http://www.yonidebeule.be
Yoni De Beule, http://www.yonidebeule.be, @yoniweb