Flexbox and Craft

In this hangout we will appreciate Craft's BYO HTML approach to templating and take a closer look at the CSS Flexbox Layout module. Breaking away from the float-based approach that has guided web layouts for many years, Flexbox brings a new way of thinking to to how we approach the components of our websites and web applications giving us a variety of new features to help keep things flexible as we design for multiple devices and screen sizes.

Getting Started with Flexbox

Educational Games

  • Flexbox Froggy - a game where you help Froggy and friends by writing CSS code.
  • Flexy Boxes - flexbox playground and code generator

Tools

  • Flexibility - Design beautiful, flexible layouts on the web without sacrificing the experience in older Internet Explorer browsers.
  • Autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use
  • Flexbox Grid - A grid system based on the flex display property.

Level up in Craft CMS with practical examples, snippets, and patterns.
Craft The Planet emails are sent out several times a week.