The latest articles on DEV Community by Praise Ogunleye (@prazzon). https://dev.to/prazzon https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2210203%2F02b9305e-a8a5-4248-9bf8-5a7ba884544a.jpg https://dev.to/prazzon en Praise Ogunleye Mon, 14 Oct 2024 13:07:20 +0000 https://dev.to/prazzon/i-built-a-flexbox-playground-with-awesome-animations-fgo https://dev.to/prazzon/i-built-a-flexbox-playground-with-awesome-animations-fgo <p>Hey everyone 👋<br> I'm excited to share the latest update to my open source project.</p> <p>It's called <strong>Flexbox labs,</strong> and it's a visual tool that helps you create layouts using CSS Flexbox.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxckswg3mj6o8z4i02k2k.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxckswg3mj6o8z4i02k2k.png" alt="Flexbox labs" width="800" height="468"></a></p> <p>It includes:<br> • An edit tab - to customize flex container and items.<br> • A save tab - to save custom layouts<br> • A layouts tab - consisting of pre-built layouts<br> • A settings tab - to customize the app<br> • And a clone, undo, redo, reset and generate code feature.</p> <p>It was built using React, TypeScript, Sass and Framer Motion.</p> <p>Site link: <a href="https://flexboxlabs.netlify.app/" rel="noopener noreferrer">https://flexboxlabs.netlify.app/</a></p> <p>GitHub repo: <a href="https://github.com/prazzon/Flexbox-Labs" rel="noopener noreferrer">https://github.com/prazzon/Flexbox-Labs</a></p>