Requirements for the layout for drupal

Not once faced with a problem when they send a layout and everything seems to be fine there, but how you start to attach to drupal, then you face the fact that you either need to redo the layout or rewrite the theme functions. As a result, the thematization process may increase significantly due to this. Therefore, at work we decided to write the requirements for layout for drupal. Below are the requirements for the main elements.

Menu

Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >

1. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
2. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
3. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
4. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
5. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
6. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
8. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
9. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
10. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
11. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
12. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
13. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
14. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >

It is better to try even to wrap the ul menu even in a div and in css to access it through it. Type of such:
')

Copy Source | Copy HTML

1. .mymenuclass {}
2. .mymenuclass UL {}
3. .mymenuclass UL LI {}
4. .mymenuclass UL LI A {}
5. .mymenuclass UL LI A: hover {}
6. .mymenuclass UL LI.active -trail {}
7. .mymenuclass UL LI.active -trail A {}

Pager

Copy Source | Copy HTML

1. < ul class = "pager"> < li class = "pager-first first"> <a href = "#" class = "active"> First </ a > </ li >
2. < li class = "pager-previous"> <a href = "#" class = "active"> previous </ a > </ li >
3. < li class = "pager-item"> <a href = "#" class = "active"> 1 </ a > </ li >
4. < li class = "pager-current"> 2 </ li >
5. < li class = "pager-item"> <a href = "#" class = "active"> 3 </ a > </ li >
6. < li class = "pager-next"> <a href = "#" class = "active"> next </ a > </ li >
7. < li class = "pager-last last"> <a href = "#" class = "active"> last </ a > </ li >
8. </ ul >

Blocks

If there are blocks on the site, then you should arrange them in the same style. Those. so that the html block templates look the same (if possible, of course)
For example such as:

Copy Source | Copy HTML

1. < div id = "blockid" class = "block">
2. < h2 > Title </ h2 >
4. < div class = "content">
5. <! - here is directly the content of the block ->
7. </ div >
8. </ div >

As a blockid, we use a unique id for the block, through which in the styles we prescribe the uniqueness of this block if necessary.

Test content

Insert content of this type into the content area (full text of news, text page, etc.):

Copy Source | Copy HTML

1. < p > Lorem < sup > superscript </ sup > dolor < sub > subscript </ sub > amet, consectetuer adipiscing elit, <a href = "#" title = "test link"> test link </ a > .
2. < strong > Nullam </ strong > dignissim < em > convallis </ em > est. Quisque aliquam. < cite > cite </ cite > .
3. < u > Nunc iaculis suscipit dui. </ u > Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
4. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
5. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. < acronym title = "National Basketball Association"> NBA </ acronym > Mauris a ante.
6. Suspendisse quam sem, consequatat, commodo vitae, feugiat in, nunc.
7. Morbi imperdiet augue quis tellus. < abbr title = "Avenue"> AVE </ abbr >
8. </ p >
10. < blockquote >
11. < p >
12. & # 8220; this stylesheet is freaking much. & # 8221;
13. <Br />
14. -Blockquote
15. </ p >
16. </ blockquote >
17. <Br />
18. < table >
19. < tbody >
20. < tr >
21. < th > Header </ th >
22. < th > Header </ th >
23. < th > Header </ th >
24. </ tr >
25. < tr >
26. < td > Data </ td >
27. < td > Data </ td >
28. < td > Data </ td >
29. </ tr >
30. < tr >
31. < td > Data </ td >
32. < td > Data </ td >
33. < td > Data </ td >
34. </ tr >
35. < tr >
36. < td > Data </ td >
37. < td > Data </ td >
38. < td > Data </ td >
39. </ tr >
40. </ tbody >
41. </ table >

This is certainly not all. But if the coder will adhere to at least such requirements, then the process of the theme of drupal will take less time.

In addition to this article, I also recommend reading the layout for drupal. Forms

If someone has similar experiences, I will be glad if you share. Additions are also welcome;)