Resizable panels
Snapkin is a framework agnostic library that attempts to play as nicely as possible with existing html/css/js paradigms. It does not try to bend page layout to its whim unless absolutely necessary to achieve its results.
Ideally this means that snapkin will be well behaved in any context it is imported it and play well with modern frontend frameworks.
Snapkin is intended to be used as a standalone JS+CSS library that adds custom HTML elements.
Frameworks currently under test:
- React
- Vue
Snapkin works by creating custom HTML elements, thus it can be imported
via a <script> tag, and <snap-drawer> elements will be turned into
panels.
Note
snapkin.cssis required for snapkin to function correctly
<!-- index.html -->
<head>
...
<link rel="stylesheet" type="text/css" href="/path/to/snapkin.css">
...
</head>
<body>
...
<snap-drawer direction="column"
class="border"
style="height: 500px;
width: 500px;
border: solid 1px grey;">
<div id="your">Hello</div>
<div id="content">World!</div>
</snap-drawer>
...
</body>
<script type="module" src="/path/to/snapkin.js"></script>Snapkin can be used programmatically as well
import { SnapDrawer } from '@root-goblin/snapkin'
// create new element
const snapElement = new SnapDrawer()
// place into document just like any other HTML element
document.getElementById('my-node').replaceChild(snapElement)
// create new panels
snapElement.newPanelAt(0)
// access panels as a SnapBox[]
snapElement.childPanels[0].content = someElement
// place into some panel directly through SnapDrawer
snapElement.placeInPanel(0, someElement)Warning Always assign to
SnapBox.content, instead of settinginnerHTMLof anySnapBoxelement.
Snapkin uses vite to preview with HMR.
git clone https://git.sr.ht/~standoffish/snapkinnpm installnpm run devWith the server running, it is time to fiddle with the code.
General file structure is as follows:
snapkin/
├── src/ -- main source code <-------------------- START HERE
├── dist/ -- build output
├── public/ -- bundled assets <--------------------- snapkin.css
├── test/ -- testing framework <-------------------- style.css
├── types/ -- type declarations
└── index.html -- testing site entryVite will serve index.html and reload as the project files change.
snapkin is a typescript project, it requires compiling into js for distrubition.
The build script will automatically generate files in dist/
npm run buildtl;dr -
git config sendemail.to ~standoffish/snapkin-devel@lists.sr.htsourcehut is an email-based system, the process to pull, build, and submit patches are as follows:
git clone https://git.sr.ht/~standoffish/snapkinY'know, fiddle with stuff, break things, eventually fix them and commit.
Once you have a set of commits...
There is an excellent tutorial at https://git-send-email.io/ that I will not repeat.
Note that whenever the tutorial references the 'global configuration file', it is talking about the git global configuration file, which you can find with the following command1:
git config --list --show-origin --show-scope
-
Sourced from this helpful StackOverflow answer ↩