flex-layout-system

Introducing Flex Layout System v2: Simplifying Responsive Web Design

Flex Layout System v2 is a streamlined library of web components designed to make responsive web design effortless. This new version brings several improvements, including a reduced number of components, built-in responsiveness, and no external stylesheets—everything is neatly packaged within the components themselves.

Key Features

• Simplified Components: The number of components has been significantly reduced, making them more intuitive and powerful. Each component is thoughtfully designed to cover a wide range of use cases.
• Built-in Responsiveness: Components now include built-in responsive behavior, eliminating the need for additional media queries or breakpoints.
• Self-contained Styles: All styles are encapsulated within the components, ensuring consistency and reducing the need for external CSS files.
• Framework Agnostic: Flex Layout System v2 is compatible with any framework or project, whether you're using React, Angular, or plain HTML/JS.

Get Started

Browser / Compiled Version / Source Web Components

1. Installation: Install the Flex Layout System package via npm:

npm install flex-layout-system

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

import "flex-layout-system";

To use the components directly in an HTML file:

<script src="https://unpkg.com/flex-layout-system/dist/browser.min.js"></script>

Using Flex Layout System in React / Next.js

1. Client-side Import: For Next.js, add "use client"; at the top of your component file:

"use client";

1. Import Types and Components: Import the types and components for use in JSX:

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

1. Use Components: Use the components directly in your JSX:

<flex-box jc="space-between">
  <flex-cell>Item 1</flex-cell>
  <flex-cell>Item 2</flex-cell>
</flex-box>

Using Flex Layout System in Angular

1. Installation: Install the package in your Angular project:

npm install flex-layout-system

1. Import Components: Import the library in your Angular module:

import "flex-layout-system";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

1. Use Components: Integrate the components into your Angular templates as needed.

Components Overview

Here’s a brief overview of the key components available in Flex Layout System v2:

• flex-canvas: The primary container component, used to manage the overall dimensions of the layout. It serves as the foundational wrapper in which other components, like flex-grid or flex-box, can be nested.
• flex-grid: The main container for creating grid-based layouts. It allows you to define a grid with customizable spacing between grid cells, providing a structured and organized layout.
• flex-box: A flexible container component designed to manage flexbox logic. It controls the alignment, direction, wrapping, and spacing of its child elements, making it ideal for responsive layouts within the grid.
• flex-cell: The building blocks within the flex-grid. These are individual cells that make up the grid structure, and they can be customized for size, order, and alignment to fit various layout needs.
• flex-media: A specialized component that monitors the size of a local container and adjusts its content accordingly. It's particularly useful for creating responsive designs that adapt to different screen sizes or container dimensions.
• d-box: A dynamic box that adapts its display properties based on media queries, allowing for flexible and responsive content presentation.
• space-box: A component for adding controlled spacing within layouts. It offers options for stretching and setting specific dimensions, making it easy to manage empty spaces or gaps.
• s-box: A versatile box component that provides extensive styling and layout control. It includes options for text alignment, padding, margins, and more, making it a flexible tool for fine-tuning the design.

Conclusion

Flex Layout System v2 is a powerful tool for web developers, making it easier than ever to create responsive, clean, and maintainable layouts. With a reduced number of components and built-in styling, it's designed to fit seamlessly into any project or framework.

For more information and examples, visit the official website.