Simple-Display 🔮

Simple-Display is a lightweight React component library built with TypeScript and SCSS that simplifies element positioning and responsiveness in applications.

It provides three main components to enhance layout control:

• Container: Sets a maximum content width on the screen, preventing layout issues on large screens while maintaining a maximum size on smaller screens.

• Row: Represents a flexible content row that breaks when necessary. It allows you to prevent content from breaking into separate lines when placed within the same row.

• Col: Similar to Bootstrap's behavior, this column component offers props for screen sizes (xs, sm, md, lg, xl) and a range from 1 to 12. It simplifies responsiveness with fixed media queries, enabling you to divide the screen into proportional column widths.

💻 Installation

To start using Simple-Display, simply run

npm install simple-display

in your React application. Then import our default stylesheet in your application's High Order Component with

import 'simple-display/dist/style.css'

and you're ready to go! 🚀🚀🚀

🛠️ Demos

Check out the following demos to see Simple-Display in action:

Documentation: Explore the interactive components and usage examples in our Storybook Documentation.

Live Demo: Experience a live demonstration of Simple-Display in this CodeSandbox environment.

🔎 Key Features

• Easy-to-use components for layout control.
• Responsive design with predefined media queries.
• Semantically organized column sizes.

Enhance your application's layout and responsiveness with Simple-Display's intuitive components. Simplify positioning and create visually appealing interfaces across various screen sizes effortlessly.