alexander taranov. right slicing for drupal = painless teming

18
Правильная верстка под Drupal = безболезненный теминг Александр Таранов [email protected]

Upload: drupaljedi-llc

Post on 06-Aug-2015

35 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Alexander Taranov. Right slicing for drupal = painless teming

Правильная верстка под Drupal =

безболезненный теминг

Александр Таранов[email protected]

Page 2: Alexander Taranov. Right slicing for drupal = painless teming
Page 3: Alexander Taranov. Right slicing for drupal = painless teming
Page 4: Alexander Taranov. Right slicing for drupal = painless teming
Page 5: Alexander Taranov. Right slicing for drupal = painless teming
Page 6: Alexander Taranov. Right slicing for drupal = painless teming
Page 7: Alexander Taranov. Right slicing for drupal = painless teming

VIEWS

● Unformatted list● HTML list● Grid● Table

Page 8: Alexander Taranov. Right slicing for drupal = painless teming

VIEWS UNFORMATTED LIST

<div class="view-id-... view-display-id-... "> <div class="view-content"> <div class="views-row views-row-1 views-row-odd"></div> <div class="views-row views-row-2 views-row-even"></div> <div class="views-row views-row-3 views-row-odd"></div> </div></div>

Page 9: Alexander Taranov. Right slicing for drupal = painless teming

VIEWS HTML LIST

<div class="view view-ulli view-id-... view-display-id-... "> <div class="view-content"> <div class="item-list”>

<ul> <li class="views-row views-row-1 views-row-odd"></li>

<li class="views-row views-row-2 views-row-even"></li> <li class="views-row views-row-3 views-row-odd"></li>

</ul> </div> </div</div>

Page 10: Alexander Taranov. Right slicing for drupal = painless teming

VIEWS GRID

<div class=”view view-grid view-id-grid view-display-id-page”> <div class=”view-content”> <table class=”views-view-grid cols-4”> <tr class=”row-1”> <td class=”col-1”> <td class=”col-2”> <td class=”col-3”> </tr> </table> </div><div>

Page 11: Alexander Taranov. Right slicing for drupal = painless teming

VIEWS TABLE

<div class=”view view-table view-id-table view-display-id-pag”> <div class=”view-content”> <table class=”views-view-grid cols-2”> <tr class=”odd”> <td class=”views-field”> <td class=”views-field”> ... </tr> <tr class=”even”> </table> </div><div>

Page 12: Alexander Taranov. Right slicing for drupal = painless teming

PAGER

<ul class="pager">

<li class="pager-current first">1</li>

<li class="pager-item">

<a title="..." href="#">2</a>

</li>

<li class="pager-item">

<a title="..." href="#">3</a>

</li>

</ul>

Page 13: Alexander Taranov. Right slicing for drupal = painless teming
Page 14: Alexander Taranov. Right slicing for drupal = painless teming
Page 15: Alexander Taranov. Right slicing for drupal = painless teming

<div class="menu">

<ul>

<li><a href="/...">...</a></li>

<li><a href="/...">...</a></li>

<li><a href="/...">...</a></li>

</ul>

</div>

MENU

Page 16: Alexander Taranov. Right slicing for drupal = painless teming

Form

<form> <div> <div class="form-item">...</div> <div class="form-item">...</div> <div class="form-item">...</div> <input type="submit"

id="edit-submit" class="form-submit" />

</div></form>

Page 17: Alexander Taranov. Right slicing for drupal = painless teming

FORM ITEM

Page 18: Alexander Taranov. Right slicing for drupal = painless teming

FORM ITEM

<input class="form-text" type="text">

<input type="checkbox" class="form-checkbox" />

<input type="radio" class="form-radio" />

<select class="form-select" …

<input type="file" class="form-file" />

<input class="form-submit" type="submit">

<textarea class="form-textarea" …