Size: Theme: Gridlines:

Posted on

First, some context.

Since creating Cutestrap over 3 years ago now, I’ve used it as the foundation for every side project I’ve worked on. After years of thoughts of what I would want out of an upgrade, I’ve completely re-built it from the ground up.

Originally, all of the vertical rhythm was hard coded, so all projects built with Cutestrap looked somewhat the same. Version 1 was also written in Sass, which restricted anyone not using it from unlocking all the customization potential.

So! Cutestrap Two is written in 100% vanilla CSS and uses Custom Properties to control the entire Baseline Grid and theme for way more customization options.

Whatever, what’s new though?

Straight to the point, I dig it, dear reader.

  • Form fields can now be styled with consistent singular .field with children
  • Custom Baseline Grid by changing a single Custom Property, --rhythm
  • More robust default color palette, using HSL
  • Buttons are no longer styled implicitly and use .button
  • Way more button modifiers that can be composed together
  • Wrappers are now sized calculated based on rhythm
  • Flexbox based grid system has removed in favor of a basic CSS Grid
  • For a naming convention, BEM is out, Popsicle is in

To learn more, I highly recommend checking out the Features which documents all of the changes in more concrete detail.