Flex Layout System v2: Effortless Responsive Design

Effortlessly create dynamic, responsive grids with minimal code.

Why Flex Layout System?

- Built-in Responsiveness: Predefined breakpoints (xs, sm, md, lg, xl, xxl) – no media queries needed.
- Customizable Breakpoints: Adjust DEFAULT_MEDIA_SIZES to fit your unique design requirements.
- Self-Contained Styling: All styles are encapsulated inside components – clean, consistent, and portable.
- Framework Agnostic: Works seamlessly in plain HTML, Angular, Next.js, and more.
- Intuitive and Simple: Write familiar HTML-like syntax and get powerful layouts out of the box.

Quick Example:

``html




Box 1


Box 2




`


Responsive Design Made Easy

Flex Layout System v2 is built with responsiveness at its core. You don’t need to write media queries or fiddle with CSS—everything is managed directly through attributes.

$3

The system supports six predefined breakpoints:

- xs: Extra small (default: 0–600px)
- sm: Small (default: 601–900px)
- md: Medium (default: 901–1200px)
- lg: Large (default: 1201–1440px)
- xl: Extra large (default: 1441–1920px)
- xxl: Ultra large (default: 1921px and above)

$3

Simply define responsive values for your attributes, separated by commas, and the library will handle the rest. For example:

`html



Responsive Box



`

- gap: Adjusts the spacing between grid items for different screen sizes.
- dn (direction): Switches from row to column layout on small screens (xs).
- w (width): Changes cell width to 100% on smaller screens (sm).

and more... See the documentation for a full list of attributes.

$3

Need specific breakpoints? Customize them globally using DEFAULT_MEDIA_SIZES:

`js
window.DEFAULT_MEDIA_SIZES = {
xs: 500, // Extra small screens
sm: 800, // Small screens
md: 1100, // Medium screens
lg: 1400, // Large screens
xl: 1800, // Extra large screens
xxl: 2400, // Ultra large screens
};
`

This allows you to align the breakpoints with your unique design needs, and all responsive attributes will automatically adapt to your configuration.

$3

- No Extra CSS: Responsive logic is baked directly into your components.
- Consistency: Predefined breakpoints ensure layouts look great across all devices.
- Customizability: Adjust breakpoints once, and the entire layout adapts globally.
- Ease of Use: Declare responsive values directly in your markup, no coding required.
- With Flex Layout System, responsiveness is not an afterthought—it’s seamless and effortless.

Get Started ### Browser / Compiled Version / Source Web Components 1.

Installation: Install the Flex Layout System package via npm:

`bash
npm install flex-layout-system
`

2. Importing Components:
In your JavaScript or TypeScript file, import the library:

`js
import "flex-layout-system";
`

To use the components directly in an HTML file:

`html

`

Using Flex Layout System in React / Next.js

To use this library in your Next.js project:

1. Install the package:

`bash
npm install flex-layout-system
`

2. In your component file, add "use client" at the top:

`js
"use client";

import "flex-layout-system/jsx.types.d"; // Import JSX types
import "flex-layout-system"; // Import components

// Example usage:

1
2
;
`

3. Important: This library uses Shadow DOM and is purely client-side, meaning it will only work on the client side. You can write syntax similar to regular HTML, but rendering will be handled exclusively on the client.

4. Ensure the library is imported on the client side. If you're using "use client", Next.js will handle the import correctly. However, if you're working with a server component, it won't render! You must ensure the script is loaded on the client side, either using lazy loading methods provided by Next.js or by utilizing Script from next/script to load the library as a polyfill for web component support on the client.

`js
import Script from "next/script";

export default function MyComponent() {
return (
<>