`From Prototype to Drupal` by Andrew Ivasiv

From Prototype to Drupal
by Andrew Ivasiv
Senior Front-End Developer @ Lemberg

● Tight timeline and deadline
● Get Front-End involved earlier
● Quickly piece together a
responsive website

● Modularity approach (Atomic Design)
● Independent Front-End Development
● Easy-to-use

Jekyll
GitBook
Hexo
Hugo
Octopress
PelicanBrunch
Middleman
Metalsmith
Harp
Expose
Assemble
Docpad
Gatsby
CactusLektor
Roots
Nanoc Hyde Punch
Sculpin
Phenomic
simple
Blacksmith
Cryogen
Gor
Couscous
Frog
Webby
Spress

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

YAML Front Matter
---
layout: post
title: "Welcome to Jekyll!"
date: 2016-04-01 18:11:13
categories: event
---

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

Breadcrumbs
Progress bar
Messages
Pager
Tabs
Table
Buttons
Form elements

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

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'%}

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

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

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>

● 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

Andrew147 @ Drupal.org
andriy.ivasiv@lemberg.co.uk

`From Prototype to Drupal` by Andrew Ivasiv

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to `From Prototype to Drupal` by Andrew Ivasiv

Similar to `From Prototype to Drupal` by Andrew Ivasiv (20)

More from Lemberg Solutions

More from Lemberg Solutions (12)

Recently uploaded

Recently uploaded (20)

`From Prototype to Drupal` by Andrew Ivasiv