Building re-usable front-end architecture in Drupal projecs.

1. Style guides
Drupal development workflows

2. I am Kalin Chernev
Web developer @EC
Interests: APIs, tooling and reusability
Bragging rights: 1st Drupal site in 2007
Ping me: @kalinchernev
Hello!

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

4. The presentation is just a map

5. Style guides
Answering your W* questions
1

6. Next Europa Style Guide

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

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

9. 3 focus areas
Things you have to know and manage all the time.
2

10. 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 *
….

12. Drupal building blocks
Refresher on few reasons why Drupal is so flexible
3

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

14. “
The reason I use Drupal today
is the same reason why
I started with it a decade ago
It does really good job in
content and data modelling

15. How to put CSS styles nicely

16. 3-step plan
Implementing web components in a Drupal-way
4

17. General workflow

18. Generalized Drupal workflow
Define
(Specify)
View
(Display)
Render
(Configure)

19. 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()

20. But wait! What about Drupal 8?
Different code, but same concepts.
Aim for universal content modelling!
Entities + Fields + View modules

21. Element built in a style guide

22. How does it look in the front-end

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

24. How does it look in the admin panel

25. Component user settings in admin

26. Reusability FTW

27. Layouts
Drupal tools and the topic of modifiers
5

28. Managing layouts in Drupal
◉ Display suite
◉ Views
◉ Panels

29. Display suite: advantages
◉ Drupal 8 ready
◉ View modules are in core
◉ Block fields
◉ Custom fields (maximum flexibility)
◉ Data modelling is natural (Manage displays)

30. Display suite layouts

31. Layout settings via formatter

32. Layout settings via formatter

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

34. Any questions?
Connect at: @kalinchernev
Thanks!