Platform for the Development Team

As we touched on earlier, Platform is compromised of two main technologies, Bootstrap and WordPress. To dig a little deeper for us technical folks, the newest evolution of platform uses a plugin called Bootstrap Blocks.

Bootstrap Blocks brought a lot of amazing functionality as-well as change, the main specific one that I want to highlight is column manipulation. In previous iterations of platform this was not possible as the sections had a predefined structure and layout. If we had tried to incorporate column manipulation ourselves we would have drastically increased the bloat of our system.

Now that we have discussed the “Why” behind Bootstrap Blocks, lets dig in to what we needed to adjust. In previous iterations of Platform the layout for sections was predefined, if the layout was intended to be 2 – 50% columns than we are stuck using 2 – 50% columns. With the addition of Bootstrap Blocks this is a non-issue, they remaining step is to adjust our sections accordingly. To do this we took a look at our sections from a high level, what is its main feature or purpose. Once defined we took that specific piece out of the section and turned them into Components. We now use the Components as lego pieces, adding them to specific columns and structure. This allows us to keep the original functionality and wins from platform but now also adding the flexibility of column manipulation.

What you need to know

Now that development team has to define the structure of the section, it is important that we are consistent in how we do it. The hierarchy of the section should be as follows:

  • Group
  • Container (there is a toggle for container fluid)
  • Row
  • Columns

This can be hard to remember, so our internal team has made a few reusable blocks that can be added whenever needed. The only thing to remember is to switch the block to a Regular Block otherwise we will be overwriting the predefined structure.

Below you will find a few videos that walk you through the creation of these section for a few situations. They should be able to teach you everything needed for Bootstrap Blocks.

instagram facebook facebook2 pinterest twitter google-plus google linkedin2 yelp youtube phone location calendar share2 link star-full star star-half chevron-right chevron-left chevron-down chevron-up envelope fax