Bootstra.386 – A Bootstrap theme from the 1980s

https://kristopolous.github.io/BOOTSTRA.386/

by dlsym • 12 years ago

803 109 12 years ago

kristopolous.github.io

noso2• 12 years ago

very very cool!

noso2• 12 years ago

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

feralmoan• 12 years ago

oh Turbo Vision, how I miss you!

randlet• 12 years ago

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!

lbacaj• 12 years ago

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

JonnieCache3• 12 years ago

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

robert_tweed4• 12 years ago

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.

enkiv2• 12 years ago

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

JonnieCache3• 12 years ago

Indeed, it looks deliciously like 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• 12 years ago

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.

robert_tweed4• 12 years ago

Nope, that would be the rather unique text mode of the BBC Micro, which allowed you to do things like double-height letters. AFAIK, only Ceefax and the BBC Micro supported that.

This is definitely based on the standard EGA/VGA text mode (originally 80x25 characters) used by DOS. Mode 0x10 IIRC.

This is also using the standard codepage 437, which includes the characters for single and double borders. You could also rewrite the symbol table to make custom characters, which is what Norton Utilities and others did.

johansch2• 12 years ago

What makes this VGA rather than CGA text mode?

(VGA is from 1987, by the way. :) )

robert_tweed4• 12 years ago

I think it's actually EGA, but it's definitely not CGA. CGA only supports 4 colours and you can tell immediately from the dark blue that it's not CGA, because that's not one of the 4. There are also at least 5 colours shown, all of which happen to be from the standard EGA palette.

VGA generally used the same text modes as EGA and very few people actually had an EGA, so referring to it as a VGA mode is an understandable mistake.

There were actually some VGA-specific text modes (80x30 mode for example) as well as SVGA modes, but they weren't really used much because the EGA modes were good enough, more widely compatible, and IIRC the 80x30 mode was noticeably slower.

Also IIRC, 80x30 mode used a slightly different font than this one, which is why I think it's the usual 80x25 EGA rather than one of the other modes.

nutate• 12 years ago

Whenever you see more than 4 colors on the screen simultaneously it kind of removes the CGA feel although there were hacks around it.

rschmitty2• 12 years ago

Needs keyboard arrow navigation :)

webXL2• 12 years ago

That was my instinct, too. You would almost need to paginate any page that would normally need scrolling, just so the arrows could work.

acomjean• 12 years ago

I agree. It was the first thing I tried to do.

mzs• 12 years ago

TAB and RETURN work.

aidenn0• 12 years ago

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

rschmitty2• 12 years ago

Ooh good catch!

k2enemy• 12 years ago

previous discussion: https://news.ycombinator.com/item?id=7959068

zhte415• 12 years ago

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).

webXL2• 12 years ago

You had me up until the parenthetical.

thathonkey• 12 years ago

This is undeniably neat but I am curious if you "know what to do" because you have a lot of experience using applications that looked this way largely by necessity. I don't think the average computer user would favor this type of aesthetic on any level.

When I was growing up with computers, interfaces like this were on their way out. So to me it just looks clunky and messy. Other than inspiring nostalgia and impressing me with the amount of work that surely went into creating it, I don't think this theme has much real world application.

These themes that attempt to replicate the look and feel of a GUI are pretty gimmicky in nature (ever been to a terrible blog that tries to look like the OS X GUI or worse... one of the Windows GUIs?). This one just happens to be really high quality.

rhizome• 12 years ago

I am curious if you "know what to do" because you have a lot of experience using applications that looked this way largely by necessity.

Of course. In the "nature vs. nurture" argument, there is no room for computers. It is all nurture here. Moreover, current interfaces derive from the design choices illustrated here.

My only complaint is that it's not degradable.

cwt• 12 years ago

I like the concept, but it hurts my eyes and, more importantly, is a constant reminder of the imminent blue screen of death

ErikRogneby2• 12 years ago

Blue screen of death 404!

mhd• 12 years ago

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• 12 years ago

Apparently they're still popular in Taiwan.

http://en.wikipedia.org/wiki/PTT_Bulletin_Board_System

Karunamon• 12 years ago

Telnet BBSes are still a thing, believe it or not. The first one I can think of off the top of my head is the home of a BBS software package.

Try telnetting to vert.synchro.net

Demiurge• 12 years ago

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

ithkuil2• 12 years ago

Where is the turbo button?

bigtones• 12 years ago

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.

ithkuil2• 12 years ago

As a kid I was fascinated by the fact that turbo button was actually a brake button but there was a perverse incentive to call it turbo because of the psychological effect.

nitrogen• 12 years ago

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.

acheron• 12 years ago

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.

nitishmd• 12 years ago

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

wiremine• 12 years ago

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.

michaelmior• 12 years ago

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

busterarm2• 12 years ago

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.

palominoz• 12 years ago

busterarm2• 12 years ago

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

jordan0day• 12 years ago

Lots of dithering, a 16 or 256 color palette, or just straight up convert to ASCII art.

mcguire• 12 years ago

An animated giv scanning through each line of the image one at a time?

honestcoyote• 12 years ago

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 [2] 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.

kristopolous6• 12 years ago

The only thing I was able to figure out cross-browser, and it's already in there, was this:

https://github.com/kristopolous/BOOTSTRA.386/blob/master/les...

    img {
     display: none;
     -webkit-filter: contrast(800%);
     -moz-filter: contrast(1000%);
     filter: contrast(1000%);
     -o-filter: contrast(800%);
     -ms-filter: contrast(800%);
    }

(In fact, I don't know what that display:none is doing there now ... I'll have to look into it)

There may be some brilliant visual hack to get images to look more faithful ... but this was the best I could figure out.

kristopolous6• 12 years ago

Hit me up with the links and I'll put you in the gallery on the first page of the pitch. I still need 3 more screen-shots to swap out.

inkfactory• 12 years ago

It's even better in full-screen mode.

Press F11 to experience the 80's.

waitingkuo• 12 years ago

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

smrtinsert• 12 years ago

I love this.

ErikRogneby2• 12 years ago

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...)

KJBweb• 12 years ago

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

stuaxo2• 12 years ago

Textmode was fast... !

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

stuaxo2• 12 years ago

[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.

cs702• 12 years ago

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• 12 years ago

Yep, gotta love 8.3 file-naming

mhartl• 12 years ago

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

rbanffy• 12 years ago

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

xienze• 12 years ago

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

mmgutz• 12 years ago

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

midhir• 12 years ago

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!

AlyssaRowan• 12 years ago

Needs more ═[▪]═╗. :)

xb• 12 years ago

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

tritri• 12 years ago

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!

xedarius• 12 years ago

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.

mVChr• 12 years ago

Ahhhhh, a nostalgia Bootstrap I can get behind.

Unlike http://code.divshot.com/geo-bootstrap/

asakura89• 12 years ago

Ha! remind me of friendster.

JonnieCache3• 12 years ago

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...

jerf• 12 years ago

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.)

kristopolous6• 12 years ago

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.

api• 12 years ago

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• 12 years ago

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

pjgomez• 12 years ago

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!

wuliwong• 12 years ago

hahah, i did the same thing.

j45• 12 years ago

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!

e12e• 12 years ago

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...

gnurag• 12 years ago

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

mdip• 12 years ago

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• 12 years ago

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

kristopolous6• 12 years ago

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• 12 years ago

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?

kristopolous6• 12 years ago

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.

devindotcom• 12 years ago

I realize this is a ridiculous question (totally different platforms), but is this something that could eventually be made into a tumblr theme? I would guess that tens of thousands of people would download it day one.

kristopolous6• 12 years ago

sure I can roll that eventually.

lordscarlet• 12 years ago

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

agumonkey• 12 years ago

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

bootstrap === csszengarden 2.0

elwell• 12 years ago

Flat UI; we've come full circle.

mjhea0• 12 years ago

instagram tag search circa 1980

http://mherman.org/instagram-search-386/

contingencies• 12 years ago

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.?

IBalic• 12 years ago

Just simply awesome :)

hnatt• 12 years ago

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

hellbanner• 12 years ago

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

frozenport• 12 years ago

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

ronpeled• 12 years ago

OMG! what an awesome throwback!

Bootstra.386 – A Bootstrap theme from the 1980s

Related Stories