{"repo":"prazzon/Flexbox-Labs","free":true,"listed":false,"github":"https://github.com/prazzon/Flexbox-Labs","clone":"git clone https://github.com/prazzon/Flexbox-Labs.git","description":"A web app for creating flexible layouts with the power of CSS Flexbox.","language":"TypeScript","stars":4026,"topics":["react","vite","framer-motion","sass","typescript","typescript-react"],"license":"MIT","category":"deployment-docker-iac","readme_excerpt":"Table of Contents About Features Built With Usage Live Demo Getting Started Contributing License Feedback About Flexbox Labs is a visual tool that helps create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn. Features - Live Preview: Preview changes in real-time as you adjust parameters. - Playground Customization: Add, delete, or duplicate flex items. - Undo and Redo Changes: Easily revert or redo modifications for easy experimentation. - Edit Flex Properties: Edit both flex container and individual flex item properties. - Save/Load Layouts : Save, load or delete custom layouts. - Pre-build Layouts : Load pre-built layouts/templates. - Export HTML and CSS Code: Get HTML and CSS code for the generated layout. Built with [![NextJS][nextjs-image]][nextjs-url] [![React][react-image]][react-url] [![TypeScript][typescript-image]][typescript-url] [![Sass][sass-image]][sass-url] [![Framer][framer-image]][framer-url] Usage Visit the live demo and explore the playground using the toolbar. To customize the flex container, navigate to the Edit tab. Select any item from the playground to modify its individual flex properties. Once satisfied with your layout, click the code button on the tab to get the generated HTML and CSS code. Live Demo Check out the live demo of Flexbox Labs: Demo Getting Started 1. Clone the repository 2. Navigate to the app directory 3. Install npm dependencies 4. Run the dev server","default_branch":null,"files":null,"tree":[],"storefront":"/r/prazzon","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/prazzon/Flexbox-Labs/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}