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
- A Complete Guide to Flexbox
- Solved by Flexbox - This site is not another CSS framework. Instead, its purpose is to showcase problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
- Flexbox Patterns - Build awesome user interfaces with CSS flexbox.
- Don't use flexbox for overall page layout
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.