Мар
08
2010

Верстаем под drupal. Часть 1: основные элементы

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

Меню

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

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

.mymenuclass {}
.mymenuclass UL{}
.mymenuclass UL LI{}
.mymenuclass UL LI A{}
.mymenuclass UL LI A:hover{}
.mymenuclass UL LI.active-trail {}
.mymenuclass UL LI.active-trail A{}

Пэйджер

<ul class="pager"><li class="pager-first first"><a href="#" class="active">Первая</a></li>
  <li class="pager-previous"><a href="#" class="active">предыдущая</a></li>
  <li class="pager-item"><a href="#" class="active">1</a></li>
  <li class="pager-current">2</li>
  <li class="pager-item"><a href="#" class="active">3</a></li>
  <li class="pager-next"><a href="#" class="active">следующая</a></li>
  <li class="pager-last last"><a href="#" class="active">последняя</a></li>
</ul>

Блоки

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

<div id="blockid" class="block">
  <h2>Заголовок</h2>

  <div class="content">
    <!-- тут непосредственно контент блока -->
  </div>
</div>

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

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

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

                                  <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
                                    Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
                                    Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
                                    Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
                                    Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
                                    Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
                                    Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>

                                    <blockquote>
                                        <p>
                                            &#8220;This stylesheet is going to help so freaking much.&#8221;
                                            <br />
                                            -Blockquote
                                        </p>
                                    </blockquote>
                                  <br />
                                  <table>
                                  <tbody>
                                    <tr>
                                      <th>Header</th>
                                      <th>Header</th>
                                      <th>Header</th>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                  </tbody></table>

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

Leave Your Comment