George Kaiser Family Foundation

cover of Screenshot of the homepage of George Kaiser Family Foundation

The Product: A drag-and-drop component-based website

The Challenge:

The George Kaiser Family Foundation had trouble updating their existing website. They were frustrated by the limiations of WordPress, especially the new for a developer when they wanted to create templates with a new order of content. They also wanted to be able to offer localization for Spanish, but lacked the staffing or budget to provide translation for every page.

The solution was to turn to Webflow, which provides a rich backend environment that allows a skilled developer to create reusable components whose design can be fixed, and whose data architecture can be limited to specific field types which a non-developer can then drag and drop into place as needed. Webflow also provided a seamless way to integrate localization, allowing translations to be automated, and overridden when needed.

Among the challenges Webflow presents are its limited CMS functionality, and its limited customizablility of code. Because Webflow is using a React-like stateful Javascript framework both for its editing environment, and for its client-side presentation, custom Javascript and CSS needed to be included inline at the bottom of each component’s HTML. Webflow does not offer a “code-only” means of creating components, so a hybrid approach was necessary, that combined traditional CSS and Javascript skills alongside mastering Webflow’s editing environment.

The Details:

  • URL: https://www.gkff.org
  • Year Launched: 2024
  • Role(s): Principal Developer, Tech Lead, Technical Architect
  • Langauges: CSS, HTML, Javascript
  • Technologies & Tools: ESLint, SASS, Stylelint, Webflow, Webpack