Recently I was building a Drupal site with Display Suite, Entity Reference and Bootstrap.
In this blog I want to share why that combination and some tricks I used to get a great frontend and editor-UX.
Great frontend and editor-UX:
First we wanted a great editor-experience. It should be simple to choose and change a page layout.
This is a known problem with Drupal.
You can do it with panels, but its not so easy to use and hard to theme. And I prefer editor-layouts to be the same as the frontend-layout.
Superimportant today: mobile first. Though its fun to write your own media-queries its almost certainly faster and reliable to use a framework for it. My favorites are Bootstrap, Foundation and Zen.
A big bonus: webdesigners tend to know these frameworks quite well (at least Bootstrap) so you can leverage that early in your development-cycle.
Display Suite + Bootstrap
Reliable and fast way to setup node-template files.
In most webdesigns pages are grid-layouts. They have multiple rows and each row contains one or more columns. This is exactly how Display Suite works.
For every column you create a field. So if you have the classic 100%/33%-33%-33%/100% (3 column stacked) layout you end up with 5 (textarea) fields.
You can create your own custom layouts, but a lot are allready published on drupal.org. In this case I used ds_bootstrap_layouts + a couple of custom layouts.
On a mobile interface the columns tend to become rows; everything below each other. This is the job of your front-end framework and Bootstrap handles that very well.
Entity Reference + Inline Entity Form
On most websites you have those content thingies that feels like part of the page but are just to complex to integrate in your node. Example: a promotion with an image, title, description and href-button.
Entity Reference helps you to include this new node-type (promotion) as a field in other content-types. This saves you a lot of clicks and exploding configurations.
You set this up quit easily, but editors want to edit it 'inline'. This is where Inline Entity Form kicks in. It does what it says. Instead of editing the referenced node on a seperate page you do it within the parent-node. That makes things much more logical.
Both modules are heavily contributed by the commerce guys. Its stable and flexible.
Tricks to get it better
Display Suite Forms
Disply Suite has a great option: ds_forms. It takes over the node-edit-form layout. This way you can make your editor-layouts equal to the actual front-end-layout. This really improves the editor experience. Love it!
One caveat: you can only have one edit-layout per content-type.
Block Reference
You have your node-layouts, but not everything can be referenced via entity-reference or included as fields. Use Block Reference to include things like a Menu Block, Social Links or a View with a caroussel within this layout.
Title
The Title module creates a real title-field instead of drupal-cores title-property. The difference is that with this module you can leverage the field-api. This makes front-end work easier and your code will be cleaner.
Fences
This is a module that cleans up html that Drupal spits out. It works out-of-the-box so just enable it and your there. It makes theming (css, js) easier, because your html is more readable. One thing: enable it early in your development, because it might break existing custom css.
Context
A no-brainer. Context is a simple interface to enable blocks with if/then logic. Example: on the frontpage show a view with newest news-articles.
I also use it as a bridge between (custom) modules and frontend. In my custom module I enable a specific context and in my theme I read out these contexts and act on it. Easy.
What do you think?
Let me know how you create great frontend and editor-UX with Drupal!