
Bootstra.386 – A Bootstrap theme from the 1980s - dlsym
https://kristopolous.github.io/BOOTSTRA.386/
======
cs702
This is a work of art.

All the details are just right, from the color palette to the menu separators
and edges drawn with fake ASCII 'drawing' characters to the little blip that
refreshes the screen line by line. Even the name is perfect: "BOOTSTRA.386"
\-- eight characters plus three for the extension, all in uppercase.

THANK YOU.

~~~
garethpn
Yep, gotta love 8.3 file-naming

------
busterarm
This put such a huge smile on my face.

I was having a shit day, but now it's awesome. Thank you!

P.S. I will go build like 9 websites using this immediately.

~~~
busterarm
Anyone have any advice for rendering images in a time/technology-appropriate
fashion?

~~~
honestcoyote
If you're building a Macintosh System 6 or 7 style page, use this site[1] to
create 1-bit Atkinson[2] dithered images which will fit perfectly.

[1] [http://gazs.github.io/canvas-atkinson-
dither](http://gazs.github.io/canvas-atkinson-dither) [2]
[http://en.wikipedia.org/wiki/Bill_Atkinson](http://en.wikipedia.org/wiki/Bill_Atkinson)

If you actually used a Mac back in the late 80's / early 90's, this site's
output will give you a heady shot of pure, undiluted nostalgia. I wasted half
an afternoon once, converting images for my imaginary Hypercard project.

Photoshop will also give you options and allow you to reduce colors down to an
8 bit or 4 bit palette, with a variety of dithering choices, or for the true
lofi look (It's 1991 and I used the school's lab scanner for the first time!),
no dithering at all.

~~~
stephencanon
If you happen to be writing your simulated vintage mac site on a modern mac,
vImage (part of the Accelerate framework) supports Atkinson dithering from OS
X 10.9 onward via vImageConvert_Planar8to[Planar|Indexed][124].

Not overly useful for one image, but if you have lots of them, it's nice to
have a programmatic solution.

~~~
gdubs
For instance, Atkinson dithering on video. Like Vine, but 8bit.

~~~
stephencanon
For that, you'll want the new vImage CV pixel buffer functions in iOS 8 and
Yosemite =)

------
kristopolous
Author here. I had no idea this was posted until I just rolled out of bed.
Feel free to ask any questions here or hit me up on
gchat/skype/aim/facebook/yahoo with the same username as here if that's more
comfortable for you. There's also the standard issue tracker and mailing list.

Thanks!

~~~
err4nt
Hey, great looking theme, and it love the attention to detail, but I noticed
it's Bootstrap 2x and the site I was going to put it on is bootstrap 3x at the
moment.

Any plans/progress porting this or rewriting it root bootstrap 3x, or should I
build anything I want this one as 2x?

~~~
kristopolous
There's a lot of demand for 3x. I have been working on this for 18 months off
and on ... I'll look into 3x very soon.

------
zhte415
It looks old, it looks comical, but I KNOW WHAT TO DO!

Less pixels, and less colours, means greater usability! This is the greatest
application of Bootstrap I have ever seen. It is a shame that more websites
don't look like this (in all seriousness).

~~~
mhd
Given the increasing complexity of the web plus nostalgia, I'm seriously
surprised that there's no actual distributed BBS/Minitel/BTX thing going on.

With API-driven backends (webapps, esp. SPA's, mobile apps), it would probably
be easy enough to shoe-horn in some glorious ANSI interface...

~~~
jbinto
Apparently they're still popular in Taiwan.

[http://en.wikipedia.org/wiki/PTT_Bulletin_Board_System](http://en.wikipedia.org/wiki/PTT_Bulletin_Board_System)

~~~
MrBuddyCasino
Thats pretty impressive! I mean its a BBS with more than 1.5 million
registered users, for gods sake. Also there is some creative ASCII art in
there, go check it out.

~~~
fcambus
Indeed, PTT has a lot of beautiful screens, and for those of us used to the
CP437 character set, it looks quite exotic!

For those interested, here are some captures of some of the menus (there is a
lot more posted in conferences) :

\- Taiwanese BBSes and Unicode ANSi Art : [http://www.cambus.net/taiwanese-
bbses-and-unicode-ansi-art/](http://www.cambus.net/taiwanese-bbses-and-
unicode-ansi-art/) \- Taiwanese BBSes and Unicode ANSi Art - Part II :
[http://www.cambus.net/taiwanese-bbses-and-unicode-ansi-
art-p...](http://www.cambus.net/taiwanese-bbses-and-unicode-ansi-art-part-ii/)

------
acheron
I love this so much. Everything about the text mode of PCs (that is, what we
used to call "IBM compatibles") is burnt into my brain at the deepest levels.
Seeing this is like a jolt of electricity.

If you ask me to picture "what does a byte look like?", I am not going to
think of binary or hex, I am going to instantly imagine the "extended ASCII"
of code page 437.

------
JonnieCache
Make sure to check out the project's wiki page, where he goes into detail on
DOS terminal modes:

[https://github.com/kristopolous/BOOTSTRA.386/wiki/DOS-
Termin...](https://github.com/kristopolous/BOOTSTRA.386/wiki/DOS-Terminal-
Capability-Tutorial)

------
pjgomez
Very nice, it's so convincing my first reaction was to use the left-right
cursor keys to change the selected menu option! (that would be a cool enhance
by the way).

kudos!

~~~
j45
I instantly tried to use the arrow keys as well. Hopefully it becomes an
option. Having the scroll/refresh rate adjustable would be neat too, it seems
2400 baud, but 9600-14.4 was common too. Very cool otherwise!

------
rschmitty
Needs keyboard arrow navigation :)

~~~
aidenn0
I was more thinking they need to highlight the first character and allow Alt-
shortcuts to work...

~~~
rschmitty
Ooh good catch!

------
mVChr
Ahhhhh, a nostalgia Bootstrap I can get behind.

Unlike [http://code.divshot.com/geo-bootstrap/](http://code.divshot.com/geo-
bootstrap/)

~~~
asakura89
Ha! remind me of friendster.

------
enkiv2
It might be more accurate to call this a simulation of vga text mode -- more
early 90s than 1980s. Still, very cool.

~~~
JonnieCache
Indeed, it looks deliciously like Ceefax:
[https://en.wikipedia.org/wiki/Ceefax](https://en.wikipedia.org/wiki/Ceefax)

I might get up at 5am and stare at it while listening to some easy-listening
music.

~~~
keehun
I remember being in Germany a few years ago, and my friends' parents still
used this (something equivalent in Germany) on their TV. It was effective.

~~~
amatera
This is called Teletext[1] (or in german: Videotext). It still widely used i
guess. Even me sometimes used it to get informations about the sheduled TV-
Program if not cellphone/tablet is in reach ;)

[1]
[http://en.wikipedia.org/wiki/Teletext](http://en.wikipedia.org/wiki/Teletext)

------
JonnieCache
This seems like a good time to post Cathode, the retro terminal for OSX:
[http://www.secretgeometry.com/apps/cathode/](http://www.secretgeometry.com/apps/cathode/)

~~~
robert_tweed
I had a Sanyo MBC-550 with a green-screen CRT in the late 80s. The retro
coolness factor is overrated IMO. I much prefer my MBP Retina screen without
phosphor trails.

------
ithkuil
Where is the turbo button?

~~~
bigtones
LOL, the turbo button when the front of the PC displayed the number of MHz the
computer was operating at, and you could slow it down so you could play old
games. Good times.

~~~
nitrogen
Interesting bit of trivia: the MHz LED display on the front of most PC cases
was typically configured by jumpers and wired directly to the turbo button; it
did not read the actual speed from the motherboard. So if you wanted, you
could make it say "HI" for high speed and "LO" for low speed.

~~~
cbreuel
Yep, I remember spending an afternoon reverse-engineering the jumper
configuration to change the numbers to match the CPU I had just upgraded. I
may still have the diagram I drew somewhere. And I thought I didn't have
enough free time back then.

------
xedarius
As soon as the page came up I instinctively took my hand off the mouse and
placed them on the cursor keys, which made me laugh.

------
lbacaj
This is by far the best bootstrap theme I have seen!

------
mdip
First: Kudos. That is easily the coolest thing I've seen this month.

Everything "felt" like a fancy over-done BBS of the early 90s in the way that
the page loaded slowly, but I'm curious why you chose the second swipe of the
cursor over the screen. I don't remember my PC from 8088-80386 ever doing
that. Am I misremembering and was this in reference to some platform from the
80s that I didn't use?

~~~
walshemj
Reminds me of SLMR for Fido BBS's and the X.400 MUA we used at Telecom Gold
(Dialcom)

------
wiremine
This is by far the coolest thing I've seen in months. Kudos!

Now, excuse me while I find my Def Leppard cassette tape and turn up my
collar.

------
AlyssaRowan
Needs more ═[▪]═╗. :)

------
feralmoan
oh Turbo Vision, how I miss you!

~~~
randlet
Yes, very fond memories of using Turbo Vision in the late 90's came flooding
back to me as soon as I loaded the page!

------
ErikRogneby
This is incredibly well done.

My one criticism is the hamburger being used at 978 and below. The hamburger
is a 21st century artifact. Using [MENU] feels more old-school to me.

(yes Xerox did it in 1981, but I expect most of us were rocking a Apple II,
386, or C64 at that time...)

------
tritri
I've been having a lot of thoughts about why I love technology so much, and
this really put the biggest smile on my face!

Thank you so much for creating this. It's so unique, classic, novel.

I sincerely hope all the best for your career and your aspirations!

------
rbanffy
Would anyone like to give a hand with
[https://github.com/rbanffy/3270font](https://github.com/rbanffy/3270font) so
we could build a 3270 theme?

------
api
I literally experienced a sense memory from viewing this. I could smell the
slight smell that old, hot CRT monitors emitted -- probably some volatile mix
of things that give you cancer.

Wow!

~~~
kemist
You just made me remember that smell... Nostalgia in full effect

------
jerf
I see this faithfully reproduces that the cursor takes one pass to write the
text, then flashes through a second faster pass. I remember seeing that
sometimes.

Question: On the real systems where that occurred, what was the second pass
doing? It never seemed to change anything. (No guesses, please. I'm looking
for someone who knows.)

~~~
kristopolous
author here - it was an artifact of a common library that was used for TUI
creation. I used it in the early 90s. Applications made with it all had it.

------
contingencies
Am I the only one that noticed the irony of presenting a Javascript-required
website with the self-promotional phrase: _Made for everyone. Bootstrap was
made to not only look and behave great in the latest desktop browsers (as well
as IE7!), but in tablet and smartphone browsers via responsive CSS as well._?

------
michaelmior
Looks pretty awesome. I'm a little disappointed that the cursor wasn't turned
into a block though.

------
lordscarlet
I will have to check this out for the next version of Sixtten Colors (an ANSI
and ASCII art gallery). We use a similar font, but it is far from
bootstrapped.

[http://sixteencolors.net](http://sixteencolors.net)

------
agumonkey
Where's the button to compile .pas modules though ?

bootstrap === csszengarden 2.0

------
KJBweb
This is awesome, I'll be using this to revamp my personal site.

------
e12e
Love it. I'd love it more if it worked w/o js -- but at least it renders ok in
w3m -- so I guess I can live with having to enable js in Firefox...

------
mjhea0
instagram tag search circa 1980

[http://mherman.org/instagram-search-386/](http://mherman.org/instagram-
search-386/)

------
hellbanner
How can I make every website use this? It's one of the few designs that
doesn't look like shit.

------
elwell
Flat UI; we've come full circle.

------
stuaxo
Textmode was fast... !

This is my only thing, make the flicker faster .. and the update should be
almost instant.

~~~
stuaxo
[EDIT]

While I'm here.. make the scrolling only scroll by character boundries, for a
more authentic feel - the header shouldn't overlap by say half a character,
since textmode was cell based.

------
hnatt
I noticed that progress bars aren't styled. Otherwise it's awesomely
consistent.

------
waitingkuo
Awesome! Will be more 386-like if I can use the arrow keys to control the
navigator ;)

------
xienze
This is really clever! But text mode interfaces weren't _that_ slow.

------
xb
Glorious, I can't wait to come up with a project to use this in.

------
mmgutz
That's when Borland was right up there with Microsoft!

------
nitishmd
This is awesome!! Should use this as resume template!

------
mhartl
This is so rad. I mean, like, totally awesome!

------
Demiurge
Icons need more work! My next theme, for sure.

------
midhir
I can't help but think the creator's genius would've been better applied to
practically anything else. But so what, it's fantastic!

------
ronpeled
OMG! what an awesome throwback!

------
gnurag
whow! this is the coolest thing i've seen this whole year!

------
IBalic
Just simply awesome :)

------
k2enemy
previous discussion:
[https://news.ycombinator.com/item?id=7959068](https://news.ycombinator.com/item?id=7959068)

------
noso
very very cool!

~~~
noso
Good to see I was down voted for this comment! Get a life!

------
smrtinsert
I love this.

------
frozenport
I can't use this in production until you get rid of the scrolling painting!

