Fork forms library

2,156 views

Published on

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

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,156
On SlideShare
0
From Embeds
0
Number of Embeds
490
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fork forms library

  1. 1. FORMS Fork forms libraryPresentation about the Fork forms library http://github.com/forkcms/markup-library/Photo: http://www.flickr.com/photos/cubagallery/
  2. 2. O Hai! I’m YoniYoni De Beule, http://www.yonidebeule.be, @yoniweb
  3. 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. 4. I love building websites.I love building websites that are beautiful, accessible, easy to use and fast.
  5. 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. 6. TimePhoto: http://www.flickr.com/photos/apoxapox/
  7. 7. BudgetPhoto: http://www.flickr.com/photos/stephangeyer/
  8. 8. FANCY FORMS Big budgetFancy form examples
  9. 9. Fancy forms
  10. 10. Fancy forms
  11. 11. Fancy forms
  12. 12. Awesome if you have the time and budget.Awesome if you have the time and budget.
  13. 13. UGLY FORMS Small budgetUgly forms
  14. 14. http://www.famiweb.be/
  15. 15. http://www.dmoz.org/
  16. 16. Clear lack of time and budget.Clear lack of time and budget.
  17. 17. FORK FORMS Fork forms libraryFork 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 youto spend more time and budget on other aspects of your site.
  18. 18. Fork forms is a forms library you could have written yourself.Fork forms is a forms library you could have written yourself.
  19. 19. Major principlesMajor principles
  20. 20. Major principles 1. FlexibleFlexible
  21. 21. Major principles 1. Flexible 2. UnderstandableUnderstandable
  22. 22. Major principles1. Flexible2. Understandable
  23. 23. HOW TO USEFork forms library
  24. 24. Simple form example
  25. 25. <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)
  26. 26. This may look simple but you can tweak the button layout, focus styles, errors and messages.
  27. 27. Simple form example with class horizontal
  28. 28. <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).
  29. 29. Variable width form example
  30. 30. <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>
  31. 31. Aligning blocks
  32. 32. <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>
  33. 33. Aligning fields
  34. 34. <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>
  35. 35. Oneliner
  36. 36. <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>
  37. 37. formSection
  38. 38. <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>
  39. 39. Now add messages, errors, visible fieldsets,input lists and selects
  40. 40. http://github.com/forkcms/markup-library
  41. 41. Questions?Questions?
  42. 42. http://www.yonidebeule.beYoni De Beule, http://www.yonidebeule.be, @yoniweb

×