This document introduces the Drupal Web Experience Toolkit (WxT) distribution. It provides concise overviews of the key features and functionality included in the distribution, such as content management, multilingual and responsive design support, and pre-configured modules, themes and content types. Instructions are also given for customizing the distribution to build out a new website that maintains the core accessibility and design standards of the Web Experience Toolkit.

1. DRUPAL WEB EXPERIENCE
TOOLKIT
DISTRIBUTION

2. About us
• Drupal consulting,
development, and training
• Founded in 2007 by Alex and
Suzanne
• Help organizations build
awesome Drupal websites
with custom functionality

3. Our projects

4. WHAT IS THE
DRUPAL-WXT
DISTRIBUTION?

5. Drupal - Web Experience
Toolkit Distribution
+
WxT
=
Drupal Core
Drupal - Web
Experience Toolkit

6. Web Experience Toolkit
(aka Wetkit, WxT, WET)
HTML
Javascript
CSS
wet-boew.github.io

7. Web Experience Toolkit
(aka Wetkit, WxT, WET)
Follows accessibility
standards
Responsive
GoC Look and Feel
wet-boew.github.io

8. Drupal
Content
management
User management
Menus
Theming/Layout
System
drupal.org

9. Drupal Core
Featured
News
Content
About
Services
Users
Content title
D. Schrute
Germany
Portfolio
Taxonomy
Spain
dwight
8 Sept
started.
sailing
joe
8 Sept
shopping
text
Comments
Wow, can't
city breakwait to get
adventure
city break
J. Halpert
Contact
search
Me too!

10. FEATURES OF
DRUPAL-WXT

11. Content Management

12. Content Management
•
•
•
Create/edit/delete content
Version management for content changes
Draft version of each piece of content

13. Content Types
Basic Page
Title/body/image fields
Listed on the homepage
Documentation
Title/body fields
Not listed in the homepage

14. Add Custom Content Types
Basic Page
Title/body/image fields
Listed on the homepage
Documentation
Title/body fields
Not listed in the homepage
Event
Title/body/date/location fields
Listed on the events page
News Item
Title/body/category fields
Listed on the news page

15. WYSIWYG Editor
•
•
Implements CKEditor
You can customize the options for the editor

16. Moderation Workflow
Publish a Page
Page is Translated
Draft is Created
Create a New Page
Editor Reviews the Draft
Draft is Published

17. Drafts

18. Reviewing Changes

19. Reviewing Changes

20. Bilingual Support

21. Bilingual Support
User interface
Configuration
Content

22. Bilingual User Interface
•
•
Front-end user interface and administrative interface
text is translatable
You can add translations as you customize the site

23. Bilingual Content
•
•
Tools for translating each content item
Create a workflow for content translation

24. Landing Pages

25. Editing the Homepage

26. Editing the Homepage

27. GoC Look and Feel

28. “Internet” Version

29. “Intranet” Version

30. Responsive

31. Mega Menu

32. ARCHITECTURE

33. drupal.org/project/wetkit

34. Files
drupal.org/project/wetkit

35. Modules
modules from drupal.org
each module has settings, adds
functionality

36. Themes
themes change the look and feel of
the site: add layouts and implement
the Wetkit HTML/stylesheets

37. Configuration
menus and content types come
pre-configured, but you can change
the configuration

38. User Interface
the distribution comes with
compressed CSS/JS and also a
fr.po file with translations of the UI

39. Content
during installation, you can choose
to install sample content: pages,
landing pages, and translations of
these

40. CUSTOMIZING THE
DISTRIBUTION

41. Drupal - Web Experience
Toolkit Distribution
=
+
Drupal Core
Wetkit
Drupal - WxT
Content
+
Functionality
=
=
Information Architecture
Customizations
Your Website

43. Goals:
• Convey information/provide tools for users
• Maintain accessibility, responsiveness, bilingualism
• Allow for updates to the distribution

44. Resources
• http://wet-boew.github.io
• https://github.com/wet-boew/wet-boew-
drupal
• http://drupal.org/project/wetkit

45. Upcoming Trainings
• WxT-Drupal Site Building - Jan 16-17
• Drupal Module Development - Dec 16-17
• Drupal Theming - Feb 10-11
http://evolvingweb.ca/training
Follow us on Twitter: @evolvingweb