New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

flex-layout-system

Package Overview
Dependencies
Maintainers
0
Versions
45
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

flex-layout-system - npm Package Compare versions

Comparing version

2.0.0
to
2.0.1

2

package.json

@@ -40,3 +40,3 @@ {

],
"version": "2.0.0",
"version": "2.0.1",
"description": "Flex Layout",

@@ -43,0 +43,0 @@ "name": "flex-layout-system",

60

README.md

@@ -5,2 +5,8 @@ # Introducing Flex Layout System v2: Simplifying Responsive Web Design

[![Website](https://img.shields.io/badge/Website-Official-blue)](https://flexlayout.com/)
[![npm](https://img.shields.io/badge/npm-Package-red)](https://www.npmjs.com/package/flex-layout-system)
[![Documentation](https://img.shields.io/badge/Docs-Documentation-green)](https://flexlayout.com/docs)
## Key Features

@@ -39,27 +45,45 @@

1. **Client-side Import**:
For Next.js, add "use client"; at the top of your component file:
To use this library in your Next.js project:
```js
"use client";
1. Install the package:
```bash
npm install flex-layout-system
```
2. **Import Types and Components**:
Import the types and components for use in JSX:
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
```
3. **Use Components**:
Use the components directly in your JSX:
```html
// Example usage:
<flex-box jc="space-between">
<flex-cell>Item 1</flex-cell>
<flex-cell>Item 2</flex-cell>
<span>1</span>
<span>2</span>
</flex-box>
```
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 (
<>
<Script src="https://unpkg.com/flex-layout-system/dist/browser.min.js" strategy="lazyOnload" />
<flex-box jc="space-between">
<span>1</span>
<span>2</span>
</flex-box>
</>
);
}
```
## Using Flex Layout System in Angular

@@ -108,1 +132,11 @@

For more information and examples, visit the [official website](https://flexlayout.com).
## Developer
[![unbywyd](https://img.shields.io/badge/unbywyd-Web_Developer-green)](https://unbywyd.com)
[![AI Web Solutions](https://img.shields.io/badge/AI_Web_Solutions-aiweb.co.il-black)](https://aiweb.co.il)
This project was developed by **unbywyd**.