Flex Layout System

# Get Started with Flex Layout System v2

Flex Layout System v2 is a powerful and streamlined library of web components designed to simplify responsive web design. With a reduced number of components, built-in responsiveness, and self-contained styles, Flex Layout System v2 allows you to create clean and maintainable layouts effortlessly.

# Installation

To get started with Flex Layout System v2, follow these simple steps:

# Step 1: Install the Package

Run the following command in your project to install the Flex Layout System package from npm:

npm install flex-layout-system

# Step 2: Use It in Your Project

For ES/TS Projects, import the library in your JavaScript or TypeScript file:

import "flex-layout-system";

If you want to use this library in your HTML file (browser), you can use the following script tag:

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

# Using Flex Layout System in Frameworks

# Angular

If you want to use this library in your Angular project, follow these steps:

  1. Install the package in your Angular project:
npm install flex-layout-system
  1. Finally, in your app.module.ts file, add the following:
import "flex-layout-system";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

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

# Next.js

To use this library in your Next.js project:

  1. Install the package:
npm install flex-layout-system
  1. In your component file, add "use client" at the top:
"use client"; 

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

// Example usage:
<flex-box jc="space-between">
  <span>1</span>
  <span>2</span>
</flex-box>