Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Style guides
Drupal development workflows
I am Kalin Chernev
Web developer @EC
Interests: APIs, tooling and reusability
Bragging rights: 1st Drupal site in 2007
Pin...
Agenda
◉ Style guides
◉ 3 focus areas
◉ Drupal building blocks
◉ 3 steps to implement components
◉ Layouts
The presentation is just a map
Style guides
Answering your W* questions
1
Next Europa Style Guide
Style guides: overall picture
◉ General-purpose standardization
◉ Focus on re-usability of components
◉ Useful in large pr...
Additional resources on SG
◉ Google for John Albin, Drupal, style guides
◉ Go to styleguides.io
◉ Next Europa style guide ...
3 focus areas
Things 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....
Drupal building blocks
Refresher 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 ago
It does really good job in
content a...
How to put CSS styles nicely
3-step plan
Implementing 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_in...
But wait! What about Drupal 8?
Different code, but same concepts.
Aim for universal content modelling!
Entities + Fields +...
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:...
How does it look in the admin panel
Component user settings in admin
Reusability FTW
Layouts
Drupal 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)...
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!
Style guides in drupal development workflows
Prochain SlideShare
Chargement dans…5
×

Style guides in drupal development workflows

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

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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!

×