Style guides in drupal development workflows

Style guidesDrupal development workflows

I am Kalin ChernevWeb developer @EC

Interests: APIs, tooling and reusability

Bragging rights: 1st Drupal site in 2007

Ping me: @kalinchernev

Hello!

Agenda

◉ Style guides◉ 3 focus areas◉ Drupal building blocks◉ 3 steps to implement components◉ Layouts

The presentation is just a map

Style guidesAnswering your W* questions

1

Next Europa Style Guide

Style guides: overall picture

◉ General-purpose standardization◉ Focus on re-usability of components◉ Useful in large projects◉ Live documentation of design principles◉ Fits well into the world of Agile

Additional resources on SG

◉ Google for John Albin, Drupal, style guides◉ Go to styleguides.io◉ Next Europa style guide (in progress)◉ Decoupling Drupal Without Losing Your Head

3 focus areasThings you have to know and manage all the time.

2

3 focus areas

Tools

Sass & LESS

Grunt || Gulp || npm

Bootstrap, MD, etc.

Bower

Drupal

…..

Methodologies

Agile, SCRUM, etc.

BEM

SMACSS

Atomic design

CSS & JS patterns

….

Environment

The team

Standardization

Acceptance

UX, accessibility

Continuous *

….

Drupal building blocksRefresher on few reasons why Drupal is so flexible

3

Drupal building blocks

◉ Block◉ Field◉ Entity◉ View modes◉ APIs (Form, Element, Render array, etc.)

“

The reason I use Drupal today is the same reason why

I started with it a decade agoIt does really good job in

content and data modelling

How to put CSS styles nicely

3-step planImplementing web components in a Drupal-way

4

General workflow

Generalized Drupal workflow

Define(Specify)

View(Display)

Render(Configure)

Drupal 7 building blocks

What Define / Specify Alter / Configure View / Render

Element hook_element_info() hook_element_info_alter() theme_element()

Block hook_block_info() hook_block_configure() hook_block_view()

Field (Field API) hook_field_info() hook_field_settings_form() hook_field_prepare_view()

Field (DS) hook_ds_field_info() hook_ds_field_settings_form() Callback function

Entity hook_entity_info() Field API || Display suite hook_entity_view()

But wait! What about Drupal 8?

Different code, but same concepts.

Aim for universal content modelling!

Entities + Fields + View modules

Element built in a style guide

How does it look in the front-end

Implementation strategy

1. Define: hook_field_formatter_info()2. Configure: hook_field_formatter_settings_form()3. View: hook_field_formatter_view()

Site building: enable the user to configure the number of nav items.

Development: Field Formatter API: a convenient layer on top of Field API.

Business: reusable Drupal tool to apply styling on secondary information.

How does it look in the admin panel

Component user settings in admin

Reusability FTW

LayoutsDrupal tools and the topic of modifiers

5

Managing layouts in Drupal

◉ Display suite◉ Views◉ Panels

Display suite: advantages

◉ Drupal 8 ready◉ View modules are in core◉ Block fields◉ Custom fields (maximum flexibility)◉ Data modelling is natural (Manage displays)

Display suite layouts

Layout settings via formatter

Layout settings via formatter

Miscellaneous

◉ Render arrays or theme functions◉ Custom formatters of simple settings in DS◉ Block or BEAN (entity)

Any questions?

Connect at: @kalinchernev

Thanks!