Welcome Smart Layout

Smart-layout is more than just another library; it's a revolutionary toolkit tailored to simplify your web design journey. Crafted with precision, it's designed to generate adaptive layouts that seamlessly fit into any container, enabling dynamic resizing and repositioning in real-time. Whether you're building a minimalist blog or an intricate web application, Smart-layout ensures your content looks impeccable on every screen.

But don't just take our word for it. As you navigate through this website, you'll be met with a plethora of examples, showcasing Smart-layout in action. With each section, we've paired in-depth explanations that break down the mechanics, making it easy for you to grasp and implement. From the basics to the advanced, we've got you covered.

So gear up for a transformative web design experience and let's dive deep into the wonders of Smart-layout!

Getting Started

Embarking on the journey with Smart-layout? You're in for a treat! This tool is built to make your web design experience fluid, intuitive, and remarkably powerful. Here's a straightforward guide to get you up and running:

  • 1 - Installation: Just like any other library, the first step is to integrate Smart-layout into your project. We've made this process painless and quick.
    • $ npm i smart-layout
  • 2 - Design & Development: Now, it's time to craft. Use the library's functions to create dynamic, adaptive layouts that react to user interactions in real-time.
    • return (

    ------- <ComponetLayout id="myLayout">

    ---------- <List />

    ---------- <div className="h-full w-full bg-primary" />

    ---------- <Form />

    ------- </ComponetLayout>

    )

    • Niklas

      niklas.kumpula@example.com

    • Mary

      mary.thompson@example.com

    • Ylva

      ylva.arseth@example.com

    • Ryan

      ryan.holmes@example.com

    • Cohen

      cohen.edwards@example.com

    • Iva

      iva.heijerman@example.com

    • Kurt

      kurt.caldwell@example.com

    • Efe

      efe.kaya@example.com

    • کوروش

      khwrwsh.nkwnzr@example.com

    • Sarah

      sarah.baker@example.com

    New User

    Name
    Mail
    Password
  • 3 - Configuration: While Smart-layout works wonderfully out of the box, it's fully customizable. Adjust settings to fit the unique needs of your project passing the prop config
    • <ComponentLayout

    ------- id="yourId"

    ------- config={{

    ----------- disableFullscreen?: boolean // disable the fullscreen button;

    ----------- disableMove?: boolean // disable the move button;

    ----------- disableMoveToTheTop?: boolean // disable the move to the top button;

    ----------- disableClose?: boolean // disable the close button;

    ----------- onFullScreen?: (element: layoutElement) => void // callback when the fullscreen button is clicked;

    ----------- onMove?: (element: layoutElement) => void // callback when the move button is clicked;

    ----------- onMoveToTheTop?: (element: layoutElement) => void // callback when the move to the top button is clicked;

    ----------- onClose?: (element: layoutElement) => void // callback when the close button is clicked;

    ----------- hideMenubar?: boolean // hide the menu bar that contains the buttons on each element;

    ----------- limitMovement?: posibleMovement // limit the movement of the elements to "horizontal" or "vertical;

    ----------- customLayout?: customLayout // pass a custom layout to the component;

    ----------- classNameLayoutElement?: string // className for the layout elements;

    ----------- elementsNames?: string[] | number[] // names that will be mapped to the elements;

    ---------- }}

    />

Smart layout Examples

Welcome to the vibrant "Examples" section of our Smart Layout documentation. Think of this space as both your guide and your cookbook. While we certainly aim to illustrate the library's capabilities, we've gone a step further. We've designed this section to be a comprehensive repository that you can frequently return to, borrowing code snippets, patterns, and entire solutions for your projects.

  • Guidance: Helping you understand the depths and nuances of Smart-layout.
  • Cookbook: Offering ready-to-use code 'recipes' tailored for various scenarios, from basic setups to intricate configurations.

So, whether you're seeking clarity, inspiration, or that perfect solution to a layout challenge, you're in the right place! Engage with these examples, adapt them, and let them guide your creative journey with Smart Layout.

Dive in, experiment, and let this section be both your mentor and your toolkit, propelling you towards web design mastery!

Saving Layouts

In the world of web design, one size rarely fits all. Different projects demand different layouts, be it grids, masonry, single-page, or multi-column designs. With Smart Layout, you don't have to settle for just one or wrestle with complex configurations to achieve variety.

This section is dedicated to showcasing the sheer versatility of Smart Layout. Discover how effortlessly you can switch between or even combine layouts. Whether you're looking to create a dynamic magazine layout, a clean corporate homepage, or a creative portfolio grid, Smart Layout equips you with the tools to do it all.

So, don't limit your creativity to a single framework. Dive into this section and see how Smart Layout makes varied designs not just possible, but delightfully simple!

How is Smart Layout saved

Smart layout is primarily saved in the local storage of the browser with an structure like this:

const layout = [

------ {"id": 1697226791867, "key": "1697226791867", "orientation": "vertical", "parentId": -1},

------ {"id": 0, "key": "0how-to-example", "orientation": "horizontal", "parentId": 1697226791867},

------ {"id": 1, "key": "1how-to-example", "orientation": "horizontal", "parentId": 1697226791867},

------ {"id": 2, "key": "2how-to-example", "orientation": "horizontal", "parentId": -1}

]

This last code example that we just saw it's the current description stored for the previous example at the time that I'm writing this

This structure is described by the type dynamicLayout and this same structure can be use to create a customLayout the type accepted by the prop with the exact same name. Let's see an example of a custom layout:

const customLayout = {

------- layout: [

--------- {"id": 1697226791867, "key": "1697226791867", "orientation": "vertical", "parentId": -1},

--------- {"id": 0, "key": "0how-to-example", "orientation": "horizontal", "parentId": 1697226791867},

--------- {"id": 1, "key": "1how-to-example", "orientation": "horizontal", "parentId": 1697226791867},

--------- {"id": 2, "key": "2how-to-example", "orientation": "horizontal", "parentId": -1}

------- ]

------- name: "customLayout"

}

Thanks to this prop we can dynamically change layouts, have default layouts or even let the user store their own, let's see an example:

1
2
3
4
5

Dynamic unmount

Navigating through dynamic web environments often means encountering components that continuously mount and unmount. Amidst this ever-changing landscape, Smart Layout emerges as a beacon of stability and elegance.

A standout feature of Smart Layout is its unmatched ability to diligently preserve the state of components that remain mounted. Despite the surrounding turbulence of components coming and going, the ones in view retain their states without missing a beat, ensuring a consistent and glitch-free user experience.

Coupled with this, Smart Layout also brings to the table its animated transitions. Mounting and unmounting processes aren't just about functionality; with smooth visual cues provided by these animations, they become a visual delight for the users.

And, there's exciting news on the horizon! One of our upcoming features will empower Smart Layout to preserve its structure even when components unmount. This means your layout will intelligently adapt and restructure itself, ensuring optimal use of space and an uninterrupted flow.

Venture further into this section to see how Smart Layout masterfully blends state preservation, animated transitions, and future-ready adaptability, setting a new benchmark in web design!

How it works

Behind the scenes the library it's keeping track of the amount of mounted components, dinamically regenerating the layout and the position of each element ensuring to preserve the state of each one of the elements displayed on the screen. When you unmount one of them, you are altering the number of components, restarting the layout

We'll see an example, but first let's take a look at this code snippet:

const ExampleOnClose = () => {

-- const [elements, setElements] = useState([1, 2, 3, 4]);

-- return (

---- <ComponentLayout

----- config={{

------ onClose: (e) => setElements(elements.filter((el) => el !== e.id)),

----- }}

----- id="testBroke"

---- >

----- {elements.map((e) => (

------ <div key={e}>

------- {e}

------ </div>

----- ))}

---- </ComponentLayout>

-- );

};

export default Example;

As you can see in this example we are adding a close button that basically updates the state unmounting the matching components.

To do that that we are using the: layoutElement type as part of the event. This type is described as:

interface layoutElement {

------- key: string;

------- id: number;

------- parentId: number;

------- orientation: orientation;

------- className?: string;

------- name?: string | number;

}

But probably you noticed that the example it's not working properly, that's because when we are deleting elements, the id it's changing. This is because that id is automatically generated using the children position inside the ComponentLayoutSo instead, we should add the names array inside the config prop of the ComponentLayout so in this way, the children are going to map with those names, let's see:

const ExampleOnClose = () => {

-- const [elements, setElements] = useState([1, 2, 3, 4]);

-- return (

---- <ComponentLayout

----- config={{

------ onClose: (e) => setElements(elements.filter((el) => el !== e.id)),

----- }}

----- id="testBroke"

---- >

----- {elements.map((e) => (

------ <div key={e}>

------- {e}

------ </div>

----- ))}

---- </ComponentLayout>

-- );

};

export default Example;

Now it's working properly, deleting the elements and preserving the states as it is expected. Go and play with it and restart it as much as you want using the button on the top right corner.