DEV Community

Cover image for New Project - CSS Flex Generator
Dillion Megida
Dillion Megida

Posted on • Updated on

New Project - CSS Flex Generator

I created a CSS Flex generator which helps users understand flex containers better. This is the link - CSS Flex Generator

The inspiration came from the project, CSS Grid Generator created by

sarah_edo image

Introduction

This project provides an easy means for creating CSS Flex containers for flexible layouts. It aids in the efficient understanding of the flex property and (soon) it would be able to generate codes. It was built with basic React by create-react-app

The project is at its 'first version' release. More work is still to be done on it.

Contributions

GitHub logo dillionmegida / cssflex-generator

Create flexible layouts easily with this generator.

CSS-Flex Generator

I was inspired by Sarah Drasner's project - CSS-Grid Generator - and decided to build something similar for flex containers.

Introduction

Ever since the introduction of Flex and Grid Containers, layouts have become easy to create as they are also flexible.

This project provides an easy means for creating CSS Flex containers for flexible layouts It aids in efficient understanding of the flex property and it also generate codes.

This application was built with one of ReactJS' toolchains - create-react-app

Contributions

To contribute

Fork this repository then download
git clone https://github.com/your-username/cssflex-generator.git
Enter fullscreen mode Exit fullscreen mode
Change to the directory
cd cssflex-generator
Enter fullscreen mode Exit fullscreen mode
Install Dependencies
npm install
Enter fullscreen mode Exit fullscreen mode
Start the server
npm start
Enter fullscreen mode Exit fullscreen mode
Make your changes
Push to your repository
Create Pull Request
Add Upstream
git remote add upstream https://github.com/dillionmegida/cssflex-generator.git
Enter fullscreen mode Exit fullscreen mode

Make this repository an upstream for easy syncing and follow up.


PS: You can also contribute by editing or adding to this documentation…






You could visit the repository on Github to know more about the project.

Contributions could be changes in the project or suggested ideas. They are all welcome.

Also, it's hacktoberfest, so why not contribute? 🤔

I look forward to your contributions.
Questions? Feel free to as them in the comment section. You could also reach out to me on twitter - @iamdillion.

Top comments (2)

Collapse
 
grohit profile image
G Rohit

Hey the link seems to be incorrect - could you please post a working ink

Collapse
 
dillionmegida profile image
Dillion Megida

Hi,
Thanks for the correction.
I just adjusted the link and it works well now