Responsive Templater

Html / Project

Open project
Generate your site's html!

Add

Select

For Elements

Save name
Save text for all columns of this row
Add ‹li›
Add List

Topbar

Add Topbar
Add List
Add ‹li› in the List

Layouts

Layout 1

Layout 2

Layout 3

  1. Guide started!

  2. Here there are all your projects and your site html!

  3. Here you can add a new project with a name!

  4. Here you can select one of your projects! you can save or delete the project selected or delete all of them!

  5. You can save..

  6. ..delete..

  7. or delete all of your projects!

  8. Here you can import or export your projects!

  9. This framework uses localStorage to save your projects! In case your browser does not support it, your projects will be saved only in this session!

  10. Here you can add rows and columns or get the html of what you've done!

  11. Here you can enter the number of rows or sub-rows to add

  12. Here you can select the number of columns (1 - 12 columns) to add in the rows or sub-rows.

  13. Here you can specify where you want add a row. In the Main of your site, in a selected column or in a selected element.

  14. Here you can specify where you want to place the row (append, prepend, after, before).

  15. Example: add 2 rows with 2 columns and click the button: Add rows.

  16. First example finished!

  17. Here you can select various elements.

  18. Here you can select row or sub-row.

  19. After you have selected one of these will be generated all the columns present in the row.

  20. After you have selected a column will be generated all the lists present in the column.

  21. Remember that you can select a row, a column and a list, just click on their headers.

  22. After you have selected a column you can select the other inside elements using the buttons: Parent, Children, Next and Prev Sibling. (the border of the other elements selected is greater than the row, column and list selected!

  23. Example: select first row and the first column of the row.

  24. Second example finished!

  25. It's for the row selected! Here you can delete the row or delete all columns inside.

  26. Here you can change the header of the row!

  27. Example: change the name of the row selected and click the button: Save.

  28. Third example finished!

  29. It's for the column selected!

  30. Here there is the html of the current column.

  31. Here there is the class of the current column.

  32. Here you can select the class for the column.

  33. By clicking this button you save the text for all columns of the row selected.

  34. It's for add list in the column!

  35. Here you decide the number of ‹li› in the list.

  36. By clicking this button you add only ‹li› in the list.

  37. Here you can select the typo of the list (ul, ol ,dl).

  38. By clicking this button you add the list in the column selected.

  39. Here there is the html of the list.

  40. Here there is the class of the list.

  41. Here you can select the type of navigation for the list. ( for ‹ul› you can select what you want, for ‹ol› you can't select Pagination, for ‹dl› you can't select Block-grid, Button-group and Pagination.

  42. Here you can select the class for the list ( it works only if you have selected Block-grid ).

  43. It's for the other elements selected. You can modify, save and delete the element.

  44. Here there is the html of the element.

  45. Here there is the class of the element.

  46. Example: change the html and class of the first column of the first row. Add a list list in the first column with 4 ‹li›.

  47. Example: change the html and class of the second column of the first row.

  48. Fourth example finished!

  49. Here you can manage your Topbar.

  50. Here you can change the name of the Topbar.

  51. Here you can change the name of the Toggle-Topbar ( The text that appears to the right of the Topbar).

  52. If you activate this option, the topbar will be put inside a row and then it not take the maximum width of the site.

  53. Here you can select the type of list.

  54. Here you can enter the number of ‹li› to add in the list.

  55. The class that you want to add in the list when you add it.

  56. Here you can select the position of the list in the Topbar that isn't a dropdown list.

  57. Here you can select a list that is in the Topbar.

  58. Here you can enter the name of the list selected. If the list is a dropdown list the name will be added to the top of the list.

  59. Here there is the current html of the list.

  60. Here there is the current class of the list.

  61. Here you can enter the number of ‹li› that you want to add in the list.

  62. Here you can select a ‹li› that is present in the list.

  63. Here there is the current html of the ‹li›.

  64. Here there is the current class of the ‹li›.

  65. Here you can select a predefined layout.

  66. Here there are other options.

  67. If you click here the guide starts.

  68. By clicking this button you can see how it would be your site. Click again to modify the your site.

  69. If you click here the names[headers] of all rows and sub-rows will be hidden. Click again to show the names[headers].

  70. If you click here all elements selected will be deselected.

  71. If you click here all elements will be removed.

  72. Example: Deselect all elements.

  73. Go to Generate your site's html of what you've done.

  74. Click this button to Generate the html.

  75. Here you can select a framework. (Bootstrap is converted from Foundation, so not all elements are convertible!)

  76. Here you can copy the HTML of what you've done

  77. Fifth example finished!

  78. End of the guide!