Transform Your Designs with Smart-layout

Layouts mock up

Are your web applications lacking the spark they need? Introducing Smart-layout — a revolutionary toolkit designed to breathe life into your static designs. With Smart-layout, you can dynamically adapt and reposition elements in real-time, turning mundane layouts into captivating user experiences.
If that sounds interesting, come with me and explore Smart-Layout.

Getting Started

First things first, let’s install Smart-layout into your project:

$ npm i smart-layout

Implementing Smart-layout

After installing Smart-layout, implementing it into your project is a breeze. Here’s a quick example using the ComponentLayout:

// Import the ComponentLayout from Smart-layout
import { ComponentLayout } from 'smart-layout';
// Your component utilizing Smart-layout
const YourSmartLayoutComponent = () => {
  return (
 <ComponetLayout id="myLayout">
  <List />
  <div className="h-full w-full bg-primary" />
  <Form />
 </ComponetLayout>
  );
};

Result:

Gift example layout

Now, you’re ready to bring dynamic and adaptive layouts to your components with Smart-layout!

Advantages of Using Smart-layout

• Adaptability: Create layouts that seamlessly adjust to different screen sizes and resolutions.
• Dynamic Interactions: Enhance user experiences with real-time resizing and repositioning of elements.
• Consistency: Preserve the state of components, ensuring a glitch-free and consistent user journey.

Advanced Possibilities

Beyond the basics, Smart-layout offers advanced possibilities to take your designs to the next level. Explore features such as:

• Customizable Configurations: Fine-tune Smart-layout to fit the unique needs of your projects with a wide range of configuration options.
• Layout Preservation: Smart-layout intelligently adapts and restructures itself, preserving the layout structure even when components unmount.
• Animated Transitions: Enjoy smooth visual cues with animated transitions during mounting and unmounting processes.

Now, let’s dive into two real-world examples showcasing how Smart-layout can instantly elevate your web designs.

Example 1: Manufacturing Administration Dashboard

Let’s explore the power of Smart-layout with our Manufacturing Administration Dashboard example. This project showcases how Smart-layout can transform a traditional static dashboard into a dynamic and adaptive masterpiece. With a focus on manufacturing administration, this example highlights the seamless integration of Smart-layout, bringing key performance indicators (KPIs) to life.

Before the implementation of Smart-layout, witness a static design that lacks the interactive and responsive elements crucial for a manufacturing environment. After applying Smart-layout, experience the dashboard’s evolution, where KPIs dynamically adapt and reposition in real-time. Smart-layout introduces a new level of user experience, ensuring that your manufacturing administration dashboard is not only informative but also visually engaging on every screen.
Explore the code snippets, see the “before” and “after” images, and take a glimpse into how Smart-layout can revolutionize your web design, making it truly responsive, adaptive, and captivating.

Before Smart-layout

Boring and static dashboard displaying a grid, kpis and an scoreboard

// Implementing Smart-layout for a dynamic and adaptive layout
import { ComponentLayout } from 'smart-layout';
const ManufacturingDashboard = () => {
  return (
    <div className="flex gap-2 w-full">
      <Card
        className="w-full h-full rounded-sm"
        bordered={false}
        title={title}
        headStyle={{ color: `${config.colors.primary}` }}
      >
        <div className="flex flex-col w-full h-full overflow-auto gap-2 mt-2">
          {testCharts.map((element, i) => (
            <div className="w-full" key={i}>
              <ProgressChart {...element} autoFit={false} className="">
                {element.title}
              </ProgressChart>
            </div>
          ))}
        </div>
      </Card>
      <Grid
        columns={testStopsColumns}
        dataSource={testStopsDataArray}
        pagination={false}
        subtitle={`${title}`}
      />
      <StackedBar
        dataSource={StackedBarData}
        maxBarWidth={30}
        className="w-full h-full"
      />
    </div>
  );
};

After Smart-Layout

// Implementing Smart-layout for a dynamic and adaptive layout
import { ComponentLayout } from 'smart-layout';
const ManufacturingDashboard = () => {
  return (
      <ComponentLayout id="mainLayout">
        <Grid
          columns={testClcolumns}
          className=""
          dataSource={testClDataArray}
          pagination={false}
          subtitle={`Centerlines Out`}
        />
        <Card
          className="w-full h-full rounded-sm"
          bordered={false}
          title={'Centerlines kpi'}
          headStyle={{ color: `${config.colors.primary}` }}
        >
          <div className="flex flex-col w-full h-full overflow-auto gap-2 mt-2">
            {testCharts.map((element, i) => (
              <div className="w-full" key={i}>
                <ProgressChart {...element} autoFit={false} className="">
                  {element.title}
                </ProgressChart>
              </div>
            ))}
          </div>
        </Card>
        <Grid
          columns={testStopsColumns}
          dataSource={testStopsDataArray}
          pagination={false}
          subtitle={`Unplanned Stops`}
        />
        <StackedBar
          dataSource={StackedBarData}
          maxBarWidth={30}
          className="w-full h-full"
        />
      </ComponentLayout>
  );
};

Gift of an amazing design displaying multiple grids, a scoreboard and kpis

With Smart-layout, transform your manufacturing administration dashboard into a dynamic and adaptive masterpiece. Watch as KPIs come to life, providing a seamless and visually stunning user experience.

Example 2: RAG Project Training Dashboard

The screenshot captures a pivotal moment within the dashboard where users can retrain the model. In the middle, you’ll notice an input area for loading new files, contributing to the retraining process. On the left side, a chat interface stands ready for testing the Language Model (LLM), offering a comprehensive and interactive environment for users to enhance their RAG project training.

Additionally, on the right side, users have access to a folder exploration tree, providing a structured and intuitive interface for navigating through project files and resources.

Before Smart-Layout

Boring training dashboard showcasing a little chat, a stepper form and a file-explorer

// Placeholder for the static design code
const RAGProjectDashboard = () => {
  // Your static RAG project training dashboard code here
  return (
    <>
        <Chat minimalistic={true} />
        <Stepper />
        <TreeDisplay />
    </>
  );
};

After Smart-Layout

// Implementing Smart-layout for a dynamic and adaptive layout
import { ComponentLayout } from 'smart-layout';
const RAGProjectDashboard = () => {
  return (
        <ComponentLayout
          id="retraining-layout"
          config={{
            classNameLayoutElement: "rounded-sm!",
          }}
        >
          <Chat minimalistic={true} />
          <Stepper />
          <TreeDisplay />
        </ComponentLayout>
  );
};

With Smart-layout, witness your RAG Project Training Dashboard become a dynamic and adaptive platform, providing an immersive training experience.

Wrapping up

As you can see Smart-Layout really can make you layouts shine with more movement, animations and a lot more and that’s exactly what I want to talk about…

What else can Smart-Layout do?

Let me show a part of the documentation

<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) => void, // callback when the fullscreen button is clicked;
    onMove: (element) => void, // callback when the move button is clicked;
    onMoveToTheTop: (element) => void, // callback when the move to the top button is clicked;
    onClose: (element) => 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;
  }}
/>

Those are the props that <ComponentLayout/> can receive, so just imagine. Just to give you some ideas for your applications let me mention a few things that I’ve done with this library:

1. Dynamic mount and unmount
2. Multiple layouts stored on a `<Selector/>` so the user can create his own layouts and change between them
3. A tiling window manager where the user can mount and unmount all the parts of the applications from a header
4. And much more…

If you want to see some of those ideas in practice I strongly encourage you to go to the documentation.
Finally I want to tell you that if you’ve enjoyed this post or the library itself go ahead and give it an 🌟 on GitHub because I’ve create it and I have put a lot of effort. Thanks for your time.

Elevate Your Designs Today

Smart-layout is more than just a library; it’s a game-changer for web designers. Start your journey today and see how dynamic layouts can revolutionize your applications. Visit Smart-layout on NPM for installation instructions and detailed documentation. Elevate your designs, captivate your users, and transform your web applications with Smart-layout!