Ruby Fleener is Springfield's Okayest Developer, as deemed by the SGF Web Devs in 2018. Currently, she works as a UX Consultant for World Wide Technology where she pushes pixels, slings code and enters into her users psyche. Among her many achievements she's mastered the art of not consistently getting yeast to rise, a bakers dream, and keeping her recklessly cute pups out of trouble.
During the dawn of times, tables and floats used to rule the responsive web world. But thanks to Flexbox and Grid, we now have advanced capabilities in laying out complex web pages. Now why is there Flexbox and why is there Grid? Well Flexbox is a set of CSS properties used to align elements. It allows for a one-directional layout where the parent’s children are altered to best fill their parent’s space. Grid, however, is the new kid on the block. It keeps two dimensions in mind all at once. This being columns and rows. Grid has offerings that help to solve more layout problems then you can shake a stick at. But, since it is so new, support can be a little tricky. We will go over the different properties that makes each tool so great and how it should be utilized in various layouts. There will be a live demo where we will use Flexbox to create a specific layout followed by a live demo utilizing Grid to create a more complex layout.
For the Demo: Create an Account in CodePen. Make sure you are connected to the Wifi on the day of the event. We will be forking a project I have already started for the demonstration. Reading Material: CSS Tricks - https://css-tricks.com/snippet... & https://css-tricks.com/snippet...
Workshop sponsored by: Mostly Serious
