Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/souravdey777/flexbox-guide

⚡ A Guide for the concept of Flexbox and responsive design. Simply set the attributes as you needed and copy the CSS code. 🎉
https://github.com/souravdey777/flexbox-guide

code-generation code-generator codenewbie css dynamic-code flex flex-layout flexbox flexbox-css flexbox-layout flexible guide react reactjs references responsive responsive-design responsive-layout responsive-web-design style-guide

Last synced: 1 day ago
JSON representation

⚡ A Guide for the concept of Flexbox and responsive design. Simply set the attributes as you needed and copy the CSS code. 🎉

Host: GitHub
URL: https://github.com/souravdey777/flexbox-guide
Owner: Souravdey777
License: mit
Created: 2021-01-12T12:41:37.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2022-10-05T19:48:32.000Z (about 2 years ago)
Last Synced: 2023-03-02T20:21:30.792Z (over 1 year ago)
Topics: code-generation, code-generator, codenewbie, css, dynamic-code, flex, flex-layout, flexbox, flexbox-css, flexbox-layout, flexible, guide, react, reactjs, references, responsive, responsive-design, responsive-layout, responsive-web-design, style-guide
Language: JavaScript
Homepage: https://flexbox-guide.souravdey777.vercel.app/
Size: 5.8 MB
Stars: 34
Watchers: 1
Forks: 8
Open Issues: 8
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        




















# `Flexbox-Guide`





  Go to Flexbox-Guide →



⚡ A Guide for the concept of `Flexbox` and `Responsive Design`. Simply set the attributes as needed and copy the CSS code. 🎉





  





### Table of Contents

- [About `Flexbox-Guide`](#about-flexbox-guide)

- [Features](#features)

- [Technologies](#technologies)

- [Setup](#setup)

- [Contribution and Support](#contribution-and-support)

- [License](#license)

- [Contact](#contact)

- [Learn More about `Flexbox`](#learn-more-about-flexbox)

- [Learn More about `Reactjs`](#learn-more-about-reactjs)

## About `Flexbox-Guide`

Flexbox-Guide is a website developed for web developers and Coding newbies learning `CSS Flexbox Layout`. This website can be used for both learning or generating the code. Simply arrange the flex items as you need and copy the CSS to your code.

Before the Flexbox Layout module, there were four layout modes:

- Block, for sections in a webpage

- Inline, for text

- Table, for two-dimensional table data

- Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

For detailed explanation please check [A Complete Guide to `Flexbox`](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by `Chris Coyier`

**Why wait? Straightaway go to the website and join the `Awesomeness`** 😎

[https://flexbox-guide.souravdey777.vercel.app](https://flexbox-guide.souravdey777.vercel.app)





  





##### Blog about Flexbox-Guide

[![Blog on Flexbox-Guide](https://hashnode-blog-cards.souravdey777.vercel.app/api/getHashnodeBlog?url=https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool&large=true&theme=light)](https://souravdey777.hashnode.dev/flexbox-guide-flexbox-layout-made-simple-with-an-interactive-tool)

## Features

- Dynamic code generation

- Tool to 📚 learn Flexbox

## Technologies

##### For Open Source by Open Source technologies:

[`Reactjs`](#learn-more-about-reactjs) and that's it. ✌🏼

##### Dependencies

- react ^17.0.1

- react-dom ^17.0.1

- react-scripts 4.0.1

- react-toastify ^6.2.0

##### Dev Dependencies

- eslint: ^7.19.0

- eslint-plugin-react: ^7.22.0

- gh-pages: ^3.1.0

## Setup

##### Clone/download the repository on your local machine.

    `git clone https://github.com/Souravdey777/flexbox-guide.git`

##### Install dependencies

    `npm install` or `yarn install`

##### Run Snap Shot from the root directory. 🚀

    `npm start` or `yarn start`

    

##### Alternatively you can use Gitpod

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Souravdey777/flexbox-guide)

## Contribution and Support

Loved it!. ⭐ `Star the Repository` and support the project.

Upvote in 🚀 **Product Hunt**.



  



[Open a Pull Request](https://github.com/Souravdey777/flexbox-guide/pulls) or [Raise an Issue](https://github.com/Souravdey777/flexbox-guide/issues).

👨‍🚀 Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.



  



## License

📝 Distributed under the `MIT` License. See [LICENSE](https://github.com/Souravdey777/flexbox-guide/blob/main/LICENSE) for more information.

## Contact

[![Portfolio](http://img.shields.io/badge/-Portfolio%20Website-000000?style=flat)][website]

[![LinkedIn](http://img.shields.io/badge/-LinkedIn-0077B5?style=flat&logo=linkedIn&logoColor=white)][linkedin]

[![Twitter](http://img.shields.io/badge/-Twitter-1DA1F2?style=flat&logo=twitter&logoColor=white)][twitter]

[![Mail](https://img.shields.io/badge/-Gmail-D14836?style=flat&logo=gmail&logoColor=white)][mail]

[![Medium](http://img.shields.io/badge/-Medium-black?style=flat&logo=medium&logoColor=white)][medium]

[![Coder Rank](http://img.shields.io/badge/-Coders%20Rank-67A4AC?style=flat&logo=CodersRank&logoColor=white)][codersrank]

[![Product Hunt](http://img.shields.io/badge/-Product%20Hunt-DA552F?style=flat&logo=Product%20Hunt&logoColor=white)][producthunt]

[![Speaker Deck](http://img.shields.io/badge/-Speaker%20Deck-009287?style=flat&logo=Speaker%20deck&logoColor=white)][speakerdeck]

[![Instagram](http://img.shields.io/badge/-Instagram-E4405F?style=flat&logo=instagram&logoColor=white)][instagram]

## Learn More about `Flexbox`

##### Check the references below:

- [Understanding Flexbox](https://github.com/ohansemmanuel/Understanding-Flexbox) by `Emmanuel Ohans`.

- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) by `Chris Coyier`.

- [Flexbox by W3Schools](https://www.w3schools.com/css/css3_flexbox.asp)

##### If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

- [Flexbox Defense](http://www.flexboxdefense.com/) is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.

- [Flexbox Froggy](http://flexboxfroggy.com/) is a game where you help Froggy and friends by writing CSS code.

- [Flexyboxes](https://the-echoplex.net/flexyboxes/) is an app that allows you to see code samples and change parameters to see how Flexbox works visually.

- [Flexbox Patters](https://www.flexboxpatterns.com/) is a website that shows off a bunch of Flexbox examples.

## Learn More about `Reactjs`

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn `React`, check out the [React documentation](https://reactjs.org/).

##### Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

##### Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

##### Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

##### Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

##### Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

##### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

[website]: https://souravdey777.github.io/Portfolio/

[mail]:mailto:[email protected]

[twitter]: https://twitter.com/Souravdey777

[codersrank]: https://profile.codersrank.io/user/souravdey777

[youtube]: https://youtube.com/

[instagram]: https://www.instagram.com/souravdey777/

[linkedin]: https://www.linkedin.com/in/sourav-dey/

[medium]: https://medium.com/@Souravdey777

[producthunt]: https://www.producthunt.com/@souravdey777

[speakerdeck]: https://speakerdeck.com/Souravdey777