Use Parade for onepage sites or pages with dynamic layout

Now check campaigns.tieto.com/onecloud . Guess what, that's a single node too. There are dozens of onepage microsites built with the Drupal 8 module called parade . They were built by marketing people without involving a web developer. No HTML, CSS or any kind of technology skills are needed to create sites with similar dynamic layout. 

It allows to use pre-designed sections to safely build pages with unique layout.

The parade module is built on top of the awesome paragraphs module and it's a collection of features packed together.

Features

• Multiple paragraph types out of the box.
• A multiple link Menu field, and Anchor fields in each Paragraph type.
• Preview each paragraph in a modal.
• JavaScript libraries included for common solutions, such as smooth scroll and parallax.
• Improved UI with button images.
• Multilingual support.
• Parallax background effect for both videos and images.

Multiple section types out of the box

• Header: hero text, background image or video, optional parallax effect.
• Locations: multiple geolocations displayed with Leaflet map.
• Marketo Form/Poll: uses Marketo's (marketo.com) generated form IDs and app.
• Text Boxes: responsive, nested paragraph for displaying 'cards'.
• and more...

Parade Menu demo

Animated and responsive menu + parallax background video out-of-the-box.

How it began

Drupal is famous for its extensive and friendly community. There are great events, conferences all over the world addressing the Drupal ecosystem. We regularly sponsor and attend numerous Drupal events and have utilized these events to build our network. We first met Ruben Teijeiro at Drupalaton in 2015. Ruben strongly believes in the benefits and power of open source softwares and communities; so when he joined Tieto - a large, but flexible and innovative IT company - he asked possible vendors he had already known from the community to help him build great things.

He turned to us, BRAINSUM and we started to build and deliver Drupal 8 projects for Tieto. We intend to share further details regarding our projects in future blog posts or case studies. For now let's focus on the Tieto campaign sites project, which brought on Parade to life.

Requirements and prototyping

Drupal 8 is an "enterprise CMS", which means it can fulfill the needs of large companies or organisations.

With the Paragraphs module we were able to deliver a working prototype of a one page site creation tool rapidly, then we got a pilot project to recreate an already existing campaign site with the new technology.

During this agile workflow the client got convinced that we can deliver not only prototypes but live sites and we gathered the requirements.

When Tieto decided to build a new campaign site factory as an alternative and possible replacement to its legacy closed source web platform which was delivered by a huge global software provider with something which is

• flexible - but still should enforce compliance to company style guides,
• reusable - even its custom parts should be generic and reusable in other Tieto projects or products,
• secure - a 3rd party should audit the code,
• future-proof - should be built on open standards and best practices,
• easy to maintain - should not use niche stack technologies,
• cost effective in terms of TCO (Total Cost of Ownership),

we at BRAINSUM got a chance to prove what we believe and open source won again.

Parade is a good example of open source being the best choice for any company.

The result

In 3 months we were able to deliver a number of new live campaign sites and in November 2016 the marketing team started to use the tool on their own to create new sites without involving us. The base feature set was published on drupal.org at the end of October 2016 and since then we are focusing on improving the tool and not on creation of new campaign sites or custom solutions.

With Parade, a Drupal 8 module built on top of a fully open source stack and framework Tieto got:

• Flexibility and style guide compliance. The predesigned section types and layouts give authors the safe freedom needed without the headache of copy-pasting code snippets to html source and breaking the site. 
• Reusable components - there are no custom features, everything was published on drupal.org as a generic feature pack. There is only one custom module in the project, which contains a couple of form alterations to bring closer the Drupal UX to Tieto's specific needs.
• High security standards  - the Drupal security team will review the module regularly - for free!
• A future-proof foundation. Drupal 8 is 1 year old. It's matured but remained a modern framework which is constantly maintained and developed. It uses widely used Symfony components, and we use standard tools like Docker, Composer and good practices such as continuous deployment and automated testing. There is also no lock-in - there are plenty of companies all over the world working with Drupal.
• Low maintence costs as the community is testing and even bugfixing - for free!
• No lincence fees and as a bonus for the contribution Tieto's reputation is getting credited as valuable backlinks are pointing to Tieto from drupal.org

While giving back to the community may sound too expensive or complex for a smaller company, for large companies or organisation who need to plan for a longer time period it's clear that it brings far more value and benefits than costs. When it comes to TCO and maintenance risks it turns out that the fully open source way doesn't have real drawbacks. It protects against hidden technical debts and vendor lock-ins, so it's the safest option no matter of company size.

Thanks Ruben Teijeiro, for being such a great advocate of open source.

Some of the available sections

Challenges of creating and maintaining an open source module

If you check out our drupal.org profile page for further information on Brainsum and our endeavors..
We are not newbies in contribution.

Brainsum contributions to Drupal

To be clear, most of Brainsum's contributions are integration modules to different APIs or services for which the scope is well defined. Nonetheless, Parade is different.

Parade is a feature module in which we must define the scope to serve our client's needs and also the community's requirements. We still haven't reached the point to release a 1.0 branch; this is because we want to allow for full flexibility. We know that the module has already reached the maturity for going RC, yet we are still trying to find the right balance between being generic for the community and specific to our client's needs. The maintainers of the Paragraphs module approached us to collaborate and align our goals.

Please open up issues on the project page if you are approaching from the community or contact us here if you'd like to build something specific with us in conjunction to this tool.

Demo module and live demo site

For a quick start we created a demo module (it's a submodule of parade, called parade demo) which creates a content type (Parade Onepage) and adds a paragraph field to it for the dynamic sections and it includes some CSS too, so you can start to upload content immediately and it will look like our demo site.

Parade is best for onepage sites, but its paragraph types can also be used on other pages. For example this blog also uses them. If you have more ideas don't hesitate to contact us, any feedback is much appreciated!