How to smartly adapt a framework and still make it your own
As a developer we tend to want to create from scratch. Part of this reinvention is because of ego and potential praise. The other is just being ignorant about what is already out there. In many respects, there appears to be more prestige for developing something new rather than reusing a sustainable, well-supported system.
When concepting the new eROI.com we searched for a sustainable web solution, one that allowed us the flexibility of adding content seamlessly and efficiently while still providing a cohesive user experience. We knew we wanted to use WordPress, our favorite content management system and discovered Divi, a modular theme that allows users to create content without forcing a specific layout with visual building blocks.
Before committing we needed to ensure that we could bend Divi to meet our custom design needs while maintaining the robust tools that made us love the theme in the first place. First let’s look at the pros:
FLUID LAYOUT
Divi is already equipped to be responsive no matter which layout you build. You can create a new row, choose your columns and then the module you need with a user-friendly drag and drop interface. There is also the ability to save page layouts for speedy content creation. Each and every building block will conform to the viewport, creating a fluid experience.
GLOBAL STYLES
Working on a site with multiple developers can be dangerous if there are no global styles instituted, meaning that you would see styles in the same stylesheet called:
.pinktxt { color:#FFE28b; font-size:22px; }
and a few lines later you would see:
.pinkforrealthistimeok { color:#ffe289!important; font-size:20px; }
and lose your mind trying to figure out which one is the correct style.
Every company needs a set of branding guidelines to maintain their identity. This holds the entire team accountable for maintaining the brand and ensures that a group of individuals create content with the voice and tone of a singular entity.
With the new eROI.com, we constructed a visual styleguide that would allow content creators and developers alike to have the same point of reference. This guide encompasses everything from typography, links, lists, buttons, iconography, functionality of the modules and more.
CONTENT OPTIONS
While Divi comes with a wide variety of modules, they didn’t cover all the options we required. Mimicking their code structure to remain consistent, we modified the existing modules to meet our needs as well as built several new modules including our interactive hero module, device module and crew spotlight module.
http://eroi.com/wp-content/uploads/2015/04/home-page.mp4.mp4
PROCESS
Since the theme already provided the page builder and a set of modules, it was easy to get up and running without being concerned about redundancies or conflicting code. This also makes developing new modules and maintaining code more straightforward.
There are some drawbacks to working with a theme you didn’t create unfortunately. Let’s dig into what those are.
TEMPLATE BLOAT
It is every developers responsibility to make sure that the products we produce are usable and the content is easy to digest. I start every project focused on keeping my code DRY, not only because its easier to scan and maintain, but it decreases page load time and reduces conflicting scripts.
Divi does not require users to have any coding experience if used out of the box. It comes pre-installed with a theme customizer as well as several theme-specific modules that would suffice the needs of most use cases. These features were not required for our site so it was necessary to filter through the code and eliminate any unused styles and scripts to maintain a clean code base.
HAVE TO BE COMMITTED
Divi leverages the use of shortcodes to build its pages. When a shortcode is inserted in a post or page, it is replaced with the appropriate module code snippet, which is produced by a PHP function. Without shortcodes, it would be difficult to have the flexibility of a modular framework. The disadvantage of relying on shortcodes is that if the site switched to another theme, the content would be riddled with shortcodes and hard to migrate without stripping out the bracketed code. The good news is an SQL query can be generated that will clean this up, but its not as simple as it would have been.
PROGNOSIS?
After weighing these pros and cons we held fast in our decision to use Divi and create a modular website. In the end we created a custom, fluid site that our content creators find easy to update on a regular basis.
[Originally posted on eROI.com]