`From Prototype to Drupal` by Andrew Ivasiv
Download as PPTX, PDF1 like862 views
The document discusses the transition from prototype to Drupal, emphasizing the benefits of an early front-end involvement and a modular approach using atomic design principles. It outlines the usage of static website generators like Jekyll and various code structures for components and layouts, providing examples and guidelines for creating responsive websites. The document highlights the advantages of making themes independent of the back-end and improving consistency across projects.
![_includes/components/breadcrumbs.html
<div id="breadcrumb">
<div class="breadcrumb">
<a href="/">Home</a>
{% capture page_url_without_index_html %}{{ page.url | remove: "/index.html" }}{% endcapture %}
{% assign splitted_url_parts = page_url_without_index_html | split: '/' %}
{% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus: 2 }}{% endcapture %}
{% for i in (1..forLoopMaxInt) %}
{% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %}
{% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %}
<a href="{{ current_breadcrumb_url }}" class="active-trail">{{ splitted_url_parts[i] }}</a>
{% endfor %}
{{ page.title }}
</div>
</div>](https://image.slidesharecdn.com/fromprototypetodrupal-160527105819/85/From-Prototype-to-Drupal-by-Andrew-Ivasiv-18-320.jpg)
`From Prototype to Drupal` by Andrew Ivasiv
- 1. From Prototype to Drupal by Andrew Ivasiv Senior Front-End Developer @ Lemberg
- 3. ● Tight timeline and deadline ● Get Front-End involved earlier ● Quickly piece together a responsive website
- 5. ● Modularity approach (Atomic Design) ● Independent Front-End Development ● Easy-to-use
- 10. Layouts
- 11. _layouts/default.html <!DOCTYPE html> <html> {% include head.html %} <body> <div class="page-wrap"> {% include header.html %} <main role="main"> <div class="content-area"> <div class="region-content"> {{ content }} </div> </div> </main> {% include footer.html %} </div> </body> </html>
- 12. YAML Front Matter --- layout: post title: "Welcome to Jekyll!" date: 2016-04-01 18:11:13 categories: event ---
- 13. _layouts/post.html --- layout: default --- {% assign nodeClasses = "" | split:"|" %} {% for category in page.categories %} {% assign nodeType = category | prepend: ' node-type-' %} {% assign nodeClasses = nodeClasses | push: nodeType %} {% endfor %} <article class="node{{ nodeClasses }}"> <h2 class="node-title">{{ page.title }}</h2> <div class="content"> {{ content }} </div> </article>
- 14. Components
- 16. _includes/components/button.html {% if include.type %} {% assign type = include.type %} {%else%} {% assign type = 'primary' %} {% endif %} {% if include.button %} {% assign button = include.button %} {%endif%} <a href="#" class="button button-{{type}}">{{button}}</a>
- 17. Buttons --- layout: component title: Buttons weight: 10 --- {% include components/button.html type='primary' button='Save'%} {% include components/button.html type='secondary' button='Cancel'%} {% include components/button.html type='tertiary' button='Remove'%}
- 18. _includes/components/breadcrumbs.html <div id="breadcrumb"> <div class="breadcrumb"> <a href="/">Home</a> {% capture page_url_without_index_html %}{{ page.url | remove: "/index.html" }}{% endcapture %} {% assign splitted_url_parts = page_url_without_index_html | split: '/' %} {% capture forLoopMaxInt %}{{ splitted_url_parts.size | minus: 2 }}{% endcapture %} {% for i in (1..forLoopMaxInt) %} {% capture current_breadcrumb_url %}{{next_prepender}}/{{ splitted_url_parts[i] }}/{% endcapture %} {% capture next_prepender %}{{next_prepender}}/{{ splitted_url_parts[i] }}{% endcapture %} <a href="{{ current_breadcrumb_url }}" class="active-trail">{{ splitted_url_parts[i] }}</a> {% endfor %} {{ page.title }} </div> </div>
- 19. Form Input {% include components/form-elements/form-input.html type='checkbox' id_prefix='checkbox' number=2 label='Checkboxes' inline=true description=true %} {% include components/form-elements/form-input.html type='submit' button='Save' cancel=true %} Type - type of input field (text, checkbox, radio, file, password, submit) Number - number of fields to be printed out on the page Id prefix - ID prefix for checkbox/radio input fields Label - label title for multiple fields wrapper Description - prints out field's description (boolean) Inline - prints out multiple fields in line (boolean) Button - sets the title of the Submit button Cancel - adds a Cancel button next to the Submit button
- 20. Output <div class="form-item form-type-checkboxes"> <label>Checkboxes</label> <div class="form-checkboxes container-inline"> <div class="form-item form-type-checkbox form-item-checkbox"> <input type="checkbox" id="checkbox1" name="checkbox" class="form-checkbox"> <label class="option" for="checkbox1">Checkbox 1</label> </div> <div class="form-item form-type-checkbox form-item-checkbox"> <input type="checkbox" id="checkbox2" name="checkbox" class="form-checkbox"> <label class="option" for="checkbox2">Checkbox 2</label> </div> </div> <div class="description">Vivamus mollis, metus nec tincidunt venenatis, risus odio sodales risus</div> </div> <div class="form-actions form-wrapper"> <input type="submit" name="op" value="Confirm" class="form-submit"> <a href="/" id="edit-cancel">Cancel</a> </div>
- 22. Benefits
- 23. ● Nearly anyone can put together a mock-up of a new page or section ● Themes become more independent of back-end ● Helps to keep consistency within the project