everything wrong with free software
"obedience breeds foolishness"
*originally posted:* dec 2021
1337box is a simple, insanely optimized Lightbox replacement in pure CSS.
=> https://vimuser.org/vim.html A demo is available.
The demo is based on 1337box_insane.css, with the rules baked into the main CSS rules for vimuser.org, but it behaves in the same way as the original file.
You can download it from a Git repository:
git clone https://notabug.org/1337box/1337box
Direct links to the latest files:
Benefits over other Lightbox implementations include:
* Insane optimizations (180 bytes for the full version, 157 bytes for the optimized version, 140 bytes for the more optimized version, 168 bytes for the insane version and 151 bytes for the more insane version).
* Minified by default, but still easy to read.
* No shadows or fade-in effects, because that is bloat.
* Works well on mobile browsers.
How to understand CSS rules: .f is the full image, and .t is the thumbnail.
Upload one of the CSS files to your server and add a stylesheet link to it in your CSS. There are three files:
For 1337box.css and 1337box_optimized.css, establish images like so:
The difference between 1337box.css and 1337box_optimized.css is only that the _optimized version removes this line:
That line makes the thumbnail images behave like regular links, where hovering over it in a desktop browser causes it to have the “hand” icon that appears when you hover over links. The _optimized and _insane versions lack this behaviour.
When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen.
If you’re using 1337box_insane.css, you don’t need the class names. Use it like so:
In simple websites, you might save a few bytes by using the _insane version, but you can in fact use any version. The _insane version is actually bigger than the _optimized version, when looking at the CSS files, but you save space by not declaring classes on every HTML tag. If you will only ever use the HTML span tag for 1337box, the _insane version is probably ideal.
If in doubt, don’t use the _insane version.
The moreinsane and moreoptimized versions differ from the insane and optimized versions only in the following way:
* max-width:100%;max-height:100% has been changed to max-width:90% on full sized images, with max-height not set (it therefore defaults to auto).
* This means that some images may overlap the page, but in most cases, images will still fit within the page, and it means that the CSS is ever smaller
### Known problems and workarounds
If you have elements extending beyond the width of the browser screen, such that horizontal scrolling is enabled, 1337box will break horribly, because it will scale to that extended size.
Please ensure that your pages don’t horizontally scroll.
### Send patches
Send a pull request:
You can also send the patch via email. My info is on the
=> https://vimuser.org/contact.html contact page.
### Untitled Static Site Generator
You may also consider building websites using the
=> https://untitled.vimuser.org/ untitled static site generator.
With this, you can write pages in Markdown but it uses Pandoc to generate HTML, and you can still insert HTML into pandoc-style Markdown files.
Untitled and 1337box are both written with a simple goal: to make the web sane.
1337box is released under the terms of the Creative Commons Zero 1.0. You can view that license here:
A copy of that file has been included, alongside 1337box, in the COPYING file.
That license ALSO applies to this page/document that you are reading now! This text is released under the terms of the Creative Commons Zero 1.0 license.
As such, you can freely use 1337box for any purpose you desire. It is completely free, in every sense of the word.