Требования к вёрстке под drupal

Не раз сталкивался с проблемой, когда присылают вёрстку и там вроде бы всё хорошо, но вот как начинаешь прикручивать к drupal, то сталкиваешься с тем, что либо надо вёрстку переделывать либо функции темы переписывать. И в итоге процесс темизации из-за этого может значительно увеличиться. Поэтому мы на работе решили написать требования к вёрстке под drupal. Ниже привожу требования к основным элементам.

Меню

Copy Source | Copy HTML

1. <div class="mymenuclass">
2.   <ul>
3.     <li class="leaf first"><a href="#">My account</a></li>
4.     <li class="expanded active-trail"><a href="#">Create content</a>
5.       <ul class="menu">
6.         <li class="leaf first active-trail"><a href="#" class="active">Page</a></li> <!-- текущая страница -->
7.  
8.         <li class="leaf last"><a href="#">Story</a></li>
9.       </ul>
10.     </li>
11.     <li class="collapsed"><a href="#">Administer</a></li>
12.     <li class="leaf last"><a href="#">Log out</a></li>
13.   </ul>
14. </div>

Лучше стараться даже ul меню обернуть еще в div и в css обращаться через него. Типа такого:

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{}

Пэйджер

Copy Source | Copy HTML

1. <ul class="pager"><li class="pager-first first"><a href="#" class="active">Первая</a></li>
2.   <li class="pager-previous"><a href="#" class="active">предыдущая</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">следующая</a></li>
7.   <li class="pager-last last"><a href="#" class="active">последняя</a></li>
8. </ul>

Блоки

Если есть блоки на сайте, то следует оформлять их в едином стиле. Т.е. чтобы html шаблонов блоков выглядел одинаково (по возможности конечно)
Например типа такого:

Copy Source | Copy HTML

1. <div id="blockid" class="block">
2.   <h2>Заголовок</h2>
3.  
4.   <div class="content">
5.     <!-- тут непосредственно контент блока -->
6.  
7.   </div>
8. </div>

В качестве blockid используем уникальный id для блока, через который в стилях прописываем уникальности этого блока если необходимо.

Тестовый контент

В область контента (полный текст новости, текстовая страница и прочее) вставлять контент вот такого типа:

Copy Source | Copy HTML

1. <p>Lorem ^superscript dolor _subscript 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, consequat at, commodo vitae, feugiat in, nunc.
7.   Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr>
8. </p>
9.  
10. <blockquote>
11.   <p>
12.     &#8220;This stylesheet is going to help so 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>

Это конечно далеко не всё. Но если верстальщик будет придерживаться хотя бы таких требований, то уже процесс темизации друпаля будет занимать меньше времени.

Помимо этой статьи так же рекомендую почитать Верстаем под drupal. Формы

Если у кого-то есть похожие наработки, то буду рад если поделитесь. Дополнения тоже приветствуются ;)