Gumdrop 4 announcement

Gumdrop 4 is now in development with an intended release date of early or mid July. This new version updates the grid system (don’t worry, it’s still flexboxes) and adds improved styling of form controls. Additionally, this update reduces the amount of “div soup” required for certain components. In this post, I’ll be detailing the inspiration behind Gumdrop 4 as well as providing a look at new components coming to Gumdrop.

Like any project, Gumdrop’s story begins as a set of goals or objectives; an underlying concept. Gumdrop’s objectives are:

  • Interoperability – work on all current, modern browsers.
  • Compatibility – all sites using Gumdrop can update with minimal change to their code.
  • Flexibility – because Gumdrop is divided into modules (using SCSS), developers can pick and choose what they want to use.
  • Accessibility – Gumdrop features aria support and encourages developers and designers to embrace Inclusive design.

These four objectives are the foundation on which Gumdrop was built. Gumdrop 4 expands on these by making sure that components are rendered equally across different browser vendors. This is accomplished with a complete rewrite of Gumdrop’s code and the inclusion a an all-new reset stylesheet built for Gumdrop.¬†Additionally, all new colors and typography redefine the Gumdrop visual style.

This image is a collage of inspiration pieces used for creating Gumdrop versions 3 and 4. It contains user interface elements, colors, typography, and a general vision for what Gumdrop can be.
This is an overview of the moodboard for Gumdrop versions 3 and 4.
This animated gif shows you all the existing Gumdrop components as they will appear in version 4.
This animated gif shows you all the existing Gumdrop components as they will appear in version 4.

These components will be available in the Gumdrop 4 timeframe as a full UI kit, with tablet and desktop components. From this preview however, you can see the range Gumdrop 4 has to offer.

Built mobile first, Gumdrop components are crafted to render beautifully on all your mobile devices. Components then scale and adjust to tablet, laptop, desktop screens. All components utilize “ems” allowing for proper rendering regardless of screen size or density.

I’ll share more as we get closer to launch, and I do plan to release a preview version soon. Thanks for your time and let me know your thoughts below.