Web

PLASTICS Industry Association

Mikey Moraza | 05.11.2017

Site type: Drupal | Responsive | Multi-page | Templated

Technologies: Jade | SASS | CoffeeScript | Sublime Text 3

Explore site: http://www.plasticsindustry.org/

Dev Team: Lightmaker

Client

The PLASTICS Industry Association, or PLASTICS for short, is an organization created to support the entire plastics supply chain. They believe in advancing sustainability, the promotion of plastics manufacturing, and being an educational resource for all areas of the plastics industry. They help enable innovation and advancement in plastics through their committees and multiple tradeshow events.

Problem

Recent to the site build, PLASTICS had underwent a rebranding. During their time as SPI: The Plastics Industry Trade Association, the organization felt they no longer wanted to be just another acronym. They wanted whoever heard the name PLASTICS to know exactly what they were about, eliminating any confusion there may have once been. As a product of that, a new website to go along with the rebrand only made sense.

Solution

If you do a bit of exploring around the site, you’ll quickly see just how much content they have. We set them up with an instance of Drupal to act as their CMS. Their page hierarchy dynamically creates the navigation. Besides the home page, which has distinct full-width modules, the majority of pages on the site use a left sidebar / right content structure where over 20+ modules can be displayed and used. To go along with the modern design of the site we made all modules responsive.

Challenges / Key features

The different components of this project were all pretty straight forward, simple to create,  and easy to style. The header however, did prove to be a bit more involved. I had to fit three levels of navigation into one big hoverable masterpiece. The main menu items with arrows open dropdowns when hovered. Within those dropdowns, a sub navigation is displayed on the left; each of those items are also hoverable. When a user does so, the third level of content displays in the remaining space of the dropdown.

Needless to say there were a lot of styling overrides, transitions, and testing of hover states for the 1,000+ line mammoth. Just to add to the fun, I converted that entire navigation into a mobile hamburger menu which was completely distinctive of the desktop design and took just as much effort to get right… All while refusing to change markup structure between breakpoints using javascript.

Bonus: If you appreciate cool quirky uses of CSS, check out the Supply Chain module on the homepage (depicted on the landscape tablet image below). I had fun developing it and my solution for matching the design and making it flow through the different widths was rather clever. Hope you enjoy!

Takeaways

The development went rather smooth which helped with the project’s quick turnaround. It was a simple two-man team; the Drupal developer who worked on the implementation and me working on the markup, styles, and functionality. The navigation on the site really taught me to strive for singular markup and CSS manipulation when matching a design before resorting to JS or the use of two sets of markup.

PLASTICS also allowed me to gain a full grasp of a more intricate git process. Forking of repos, pull requests, code reviews, approvals & merges are all a way of life now.

Web « I Choose Orlando Health
Web Branded Humans Platform »