Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Style guides in drupal development workflows

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

  • Be the first to comment

  • Be the first to like this

Style guides in drupal development workflows

  1. 1. Style guides Drupal development workflows
  2. 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. 3. Agenda ◉ Style guides ◉ 3 focus areas ◉ Drupal building blocks ◉ 3 steps to implement components ◉ Layouts
  4. 4. The presentation is just a map
  5. 5. Style guides Answering your W* questions 1
  6. 6. Next Europa Style Guide
  7. 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. 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. 9. 3 focus areas Things you have to know and manage all the time. 2
  10. 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 * ….
  11. 11. Drupal building blocks Refresher on few reasons why Drupal is so flexible 3
  12. 12. Drupal building blocks ◉ Block ◉ Field ◉ Entity ◉ View modes ◉ APIs (Form, Element, Render array, etc.)
  13. 13. “ 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
  14. 14. How to put CSS styles nicely
  15. 15. 3-step plan Implementing web components in a Drupal-way 4
  16. 16. General workflow
  17. 17. Generalized Drupal workflow Define (Specify) View (Display) Render (Configure)
  18. 18. 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()
  19. 19. But wait! What about Drupal 8? Different code, but same concepts. Aim for universal content modelling! Entities + Fields + View modules
  20. 20. Element built in a style guide
  21. 21. How does it look in the front-end
  22. 22. 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.
  23. 23. How does it look in the admin panel
  24. 24. Component user settings in admin
  25. 25. Reusability FTW
  26. 26. Layouts Drupal tools and the topic of modifiers 5
  27. 27. Managing layouts in Drupal ◉ Display suite ◉ Views ◉ Panels
  28. 28. Display suite: advantages ◉ Drupal 8 ready ◉ View modules are in core ◉ Block fields ◉ Custom fields (maximum flexibility) ◉ Data modelling is natural (Manage displays)
  29. 29. Display suite layouts
  30. 30. Layout settings via formatter
  31. 31. Layout settings via formatter
  32. 32. Miscellaneous ◉ Render arrays or theme functions ◉ Custom formatters of simple settings in DS ◉ Block or BEAN (entity)
  33. 33. Any questions? Connect at: @kalinchernev Thanks!

×