Upcoming Webinar: Cascade + Bootstrap = Awesome

By Charlie Holder — Thursday, February 19th, 2015 at 10:00am
Cascade + Bootstrap = Awesome

Awesome = Bootstrap + Cascade, it’s as easy as A - B - C.

Responsive Web Design (RWD) is an approach that strives to provide an ideal viewing experience for a wide variety of devices. A site designed with RWD principles attempts to respond to each device accessing the content, and adapts the layout to fit the user’s display.

In this upcoming webinar Charlie Holder, Head of Customer Experience at Hannon Hill, will highlight how to leverage the power of Cascade Server to help create and manage content for a responsive website.

Introduction to Bootstrap

Like many frameworks, Bootstrap offers a fluid (or fixed) grid system that scales as the device size changes. Bootstrap’s grid system is based on 12 columns and includes predefined classes for easy layout options.

The question is, how do you structure your Cascade Server implementation to easily allow content contributors to create and edit responsive content that uses the framework’s expected XHTML markup? And the answer lies within the power of the Data Definition and Format.

Basic Examples

One method for providing content contributors a simple interface for managing their content is to allow them to select how many columns they want, and progressively show them that number of WYSIWYGs. As users select a value from the dropdown, the number of WYSIWYGs they’re presented with changes. Each additional WYSIWYG is labeled to identify content designated for a separate column.

An alternative to this method relies on the ability to dynamically repeat the WYSIWYG element inside the Data Definition. This differs from the first example in that there is no dropdown menu to choose a number of columns with. The number of WYSIWYGs created by the author signifies the number of columns that will be created.

Adding Rows

We’ll then take a step forward and add some more functionality. We’ll nest this repeatable WYSIWYG inside a repeatable group. By nesting the repeatable WYSIWYG within a repeatable group we gain the ability to create many more layouts with a single Data Definition and Content Type.

Adding Other Types of Content

The WYSIWYG is great. It’s a familiar face to the majority of content contributors. But there are other types of content than just styled text. What if users want to insert media? What if they want a column heading? What if they want to reuse content from somewhere else in the system? We’ll add a few more options to the Data Definition, but we don’t want to overcomplicate it. It needs to stay useable and easy to understand. In order to do that, I’m going to make use of Cascade Server’s Smart Fields and progressively display new fields for entering content.


Cascade Server’s powerful Data Definitions give you the ability to provide a large number of different page layouts and content configurations from a single Template, Configuration Set, Content Type, and Format. Adding in Smart Fields to provide additional options for configuring content keeps things simple while still offering maximum flexibility.

If you’re interested in learning more about how to leverage your Data Definitions and Formats to provide a large number of options and layouts with a small number of managed assets, sign up for our upcoming webinar. Our Head of Customer Experience, Charlie Holder, will walk through live demonstrations of each method listed here and explain the dynamics of each. After the webinar we will post the video as well some code samples to help you get started.

What: "Cascade + Bootstrap = Awesome"
Who: Charlie Holder, Head of Customer Experience at Hannon Hill
When: Tuesday, March 24th, 2015 at 2pm EST

Sign up today!

Subscribe to our blog via RSS Download RSS

Hannon Hill Corporation

3423 Piedmont Road NE, Suite 520
Atlanta, GA 30305

Phone: 678.904.6900
Toll Free: 1.800.407.3540
Fax: 678.904.6901


GSA Contract Holder