NOTE: This is in Alpha, still under development.
Fluid Layout provides a simple approach to implement resizable panes with a few lines of Javascript and CSS
Because I haven't found anything simple, lightweight and scalable. Seems like people tend to over-engineer things nowadays. So this is just so solve a personal need that I decided to publish.
This is still under development but I kind of like publishing code as I work so anyone can see the progress in a "real-time" way. So.. so far this are the setup steps:
- Install the library.
npm i -S @bitlib/flayout
- Add the script.
<script src="./node_modules/@bitlib/flayout/dist/flayout.umd.min.js"></script>
- Include the CSS.
<link rel="stylesheet" href="./node_modules/@bitlib/flayout/dist/flayout.min.css" type="text/css" />
- Use the following layout model.
<div class="flayout-main">
<div class="flayout-pane">
One pane
</div>
<div class="flayout-drag"></div>
<div class="flayout-pane">
Another pane
</div>
</div>
- Initialize it with
flayout.init()
at any point of your app.
<script>
flayout.init();
</script>
All this will be improved.