5 ms·

Vintage 1980s DOS inspired Twitter Bootstrap theme

163 points by akshayagarwal 9y ago

gadders 9y ago
That is pretty funny. Excellent work.
nsxwolf 9y ago
Needs a Code page 437 font. I think that's just the character set, not the font. I don't know if the font I'm thinking of even has a name, but it was whatever was built into the VGA BIOSes of the time. It has a distinctive look.
- pjc50 9y ago
  https://int10h.org/oldschool-pc-fonts/readme/ https://int10h.org/oldschool-pc-fonts/readme/ (it does seem to use one of these for me, seemingly via "font-family: DOS")
jlebrech 9y ago
perfect better than this http://code.divshot.com/geo-bootstrap/ http://code.divshot.com/geo-bootstrap/
- nsxwolf 9y ago
  Better is subjective. I think that's wonderful.
- jamiesonbecker 9y ago
  That's superb as well, but a completely different time period. More than a decade of GUI and web development happened between those two.
Clubber 9y ago
The blue/yellow/gray was so easy on the eyes.
- kristopolous 9y ago
  yes, the fact that I also run http://unreadable.website http://unreadable.website along with having written this is not-so-much-a-coincidence. note: A number of the authors seemed to have found out they were listed on that site and increased their contrast. Mission accomplished.
Harimwakairi 9y ago
Makes me want to dial into something and play Trade Wars.
wafflesraccoon 9y ago
It is really well done, I want to use it for something but I have no idea what.
skocznymroczny 9y ago
Progress bars look horrible.
- yoz-y 9y ago
  They do, I wonder however if this is not where the CSS hits its limits.
- kristopolous 9y ago
  3.x is better ... I haven't updated the demo page ... this thing becomes randomly popular every couple of years or so ... I should probably make that demo better.
jroseattle 9y ago
My favorite part is the progressive screen display and the random flashing cursor.
nine_k 9y ago
Instant love :) I wish somebody extended it, covering more classic themes: Turbo Pascal 5 (the blue theme like this), Turbo Pascal 3 (the black / gray / yellow theme), SuperCalc, Word for DOS, etc. A special challenge would be fitting a theme into the 4-color CGA modes (red/green and purple/blue), complete with low-res proportional fonts and pixelation grids over pictures.
- VikingCoder 9y ago
  And in case people haven't seen it - here's a few things that TP3 is smaller than: http://prog21.dadgum.com/116.html http://prog21.dadgum.com/116.html
ccleve 9y ago
It's funny -- I spent many, many years looking at interfaces like that, designing them, developing them. I thought I'd feel some nostalgia. But no, I'm glad those days are long gone. I never want to see any of my old dBASE, Clipper, Pascal code again...
paultopia 9y ago
I love this so much. All it needs to be perfect is a bunch of keyboard shortcuts built-in---I really want to be able to use arrow keys to navigate like I'm really in DOS. :-)
- kristopolous 9y ago
  that's been a big request in the last wave of popularity (as in 36 hours) ... I'll think about how to do it in a non-awful way.
vog 9y ago
This is a really great theme! I love it how even the button clicks are authentic. Some suggestions: 1. To get a real DOS feeling, the number of characters per line should be limited to (exactly) 80, and the font size should be increased accordingly. 2. Links to headers [1] within the document make the browser scroll to the header text itself, rather than the top of the surrounding colored box. 3. This is mostly a "QBasic" style. There are other styles, such as: 3.1. The "Turbo Vision" style (used by the Turbo Pascal IDE itself, and many other Turbo Pascal applications using the Turbo Vision framework.) 3.2. The "Norton Commander / Nortin Utilities" style 3.3. The "DOS command line" style (command.com) etc. [1] https://kristopolous.github.io/BOOTSTRA.386/components.html#typography https://kristopolous.github.io/BOOTSTRA.386/components.html#...
- lloeki 9y ago
  Strangely I vividly remember setting (S)VGA text modes to higher counts than 80 per line for such UIs. Maybe my memory fails me and I'm mixing things up with Debian text mode installs?
  - IncRnd 9y ago
    Perhaps you ran mode to set the columns and rows?
  - vog 9y ago
    Yes, some of the tools did, but the ones mentioned here didn't (QBasic, Norton Commander/Utilities, Turbo Pascal/Vision). Norton Utilities did play some interesting games with modifying the VGA character set in real time, implementing a mouse cursor over the text mode. But it was still 80x25. However, some if the programs adapted to 80x50 if you enabled that mode before (or while?) starting them.
  - jacquesm 9y ago
    Some cards (Tseng, and others too) allowed 132 column text modes, some even 160.
- kristopolous 9y ago
  scaling doesn't work because our screens are different form factors these days. You'd get really fat characters (I've tried it). 2. it's a bug ... I'll fix it 3. sure. it's the microsoft style to be more specific. the manufacturers had their own 'branding' in this sense. I had to pick one of them due to time being a finite resource.
jscipione 9y ago
This seems like a way to modernize a curses-based application without the users of the application noticing much of a difference.
AngeloAnolin 9y ago
I can see a use case for this -> For software users who are so used to the DOS / Terminal interfaces in some old COBOL, Foxpro, dBase, Clipper, Turbo Pascal and other programming languages back then. You can switch between the shiny newer interface to using the old DOS gui-based look. Nice work!
krylon 9y ago
Wow, this beautiful! Maybe it's just the nostalgia talking, but I really like this look.
slipstream- 9y ago
Previous discussions: https://news.ycombinator.com/item?id=7983008 https://news.ycombinator.com/item?id=7983008 https://news.ycombinator.com/item?id=7959068 https://news.ycombinator.com/item?id=7959068
creeble 9y ago
Hey! An Amdek color monitor! I worked for Amdek in 1983. We sold a LOT of those color monitors.
- kristopolous 9y ago
  The fake ad is just a photoshopped version of a real ad. I may have scanned it myself. I don't remember.
rabidrat 9y ago
I thought I was being original when I redid my website[0] in a similar style this past summer (right down to the text appearing to come in at 9600 baud). But it appears this repo is at least 2 years old.. [0] http://saul.pw http://saul.pw
- harleypig 9y ago
  Gah ... I automatically started looking for doors when I went to your site! :D
kristopolous 9y ago
Hi, author here. I missed this. Sorry I'm in late. Questions, critiques, and everything else accepted. Thanks

163 points by akshayagarwal 9y ago

That is pretty funny. Excellent work.

Needs a Code page 437 font. I think that's just the character set, not the font. I don't know if the font I'm thinking of even has a name, but it was whatever was built into the VGA BIOSes of the time. It has a distinctive look.

pjc50 9y ago
https://int10h.org/oldschool-pc-fonts/readme/ https://int10h.org/oldschool-pc-fonts/readme/ (it does seem to use one of these for me, seemingly via "font-family: DOS")

jlebrech 9y ago

perfect better than this http://code.divshot.com/geo-bootstrap/ http://code.divshot.com/geo-bootstrap/

nsxwolf 9y ago
Better is subjective. I think that's wonderful.
jamiesonbecker 9y ago
That's superb as well, but a completely different time period. More than a decade of GUI and web development happened between those two.

Clubber 9y ago

The blue/yellow/gray was so easy on the eyes.

kristopolous 9y ago
yes, the fact that I also run http://unreadable.website http://unreadable.website along with having written this is not-so-much-a-coincidence. note: A number of the authors seemed to have found out they were listed on that site and increased their contrast. Mission accomplished.

Harimwakairi 9y ago

Makes me want to dial into something and play Trade Wars.

wafflesraccoon 9y ago

It is really well done, I want to use it for something but I have no idea what.

skocznymroczny 9y ago

Progress bars look horrible.

yoz-y 9y ago
They do, I wonder however if this is not where the CSS hits its limits.
kristopolous 9y ago
3.x is better ... I haven't updated the demo page ... this thing becomes randomly popular every couple of years or so ... I should probably make that demo better.

jroseattle 9y ago

My favorite part is the progressive screen display and the random flashing cursor.

nine_k 9y ago

Instant love :) I wish somebody extended it, covering more classic themes: Turbo Pascal 5 (the blue theme like this), Turbo Pascal 3 (the black / gray / yellow theme), SuperCalc, Word for DOS, etc. A special challenge would be fitting a theme into the 4-color CGA modes (red/green and purple/blue), complete with low-res proportional fonts and pixelation grids over pictures.

VikingCoder 9y ago
And in case people haven't seen it - here's a few things that TP3 is smaller than: http://prog21.dadgum.com/116.html http://prog21.dadgum.com/116.html

ccleve 9y ago

It's funny -- I spent many, many years looking at interfaces like that, designing them, developing them. I thought I'd feel some nostalgia. But no, I'm glad those days are long gone. I never want to see any of my old dBASE, Clipper, Pascal code again...

paultopia 9y ago

I love this so much. All it needs to be perfect is a bunch of keyboard shortcuts built-in---I really want to be able to use arrow keys to navigate like I'm really in DOS. :-)

kristopolous 9y ago
that's been a big request in the last wave of popularity (as in 36 hours) ... I'll think about how to do it in a non-awful way.

vog 9y ago

This is a really great theme! I love it how even the button clicks are authentic. Some suggestions: 1. To get a real DOS feeling, the number of characters per line should be limited to (exactly) 80, and the font size should be increased accordingly. 2. Links to headers [1] within the document make the browser scroll to the header text itself, rather than the top of the surrounding colored box. 3. This is mostly a "QBasic" style. There are other styles, such as: 3.1. The "Turbo Vision" style (used by the Turbo Pascal IDE itself, and many other Turbo Pascal applications using the Turbo Vision framework.) 3.2. The "Norton Commander / Nortin Utilities" style 3.3. The "DOS command line" style (command.com) etc. [1] https://kristopolous.github.io/BOOTSTRA.386/components.html#typography https://kristopolous.github.io/BOOTSTRA.386/components.html#...

lloeki 9y ago
Strangely I vividly remember setting (S)VGA text modes to higher counts than 80 per line for such UIs. Maybe my memory fails me and I'm mixing things up with Debian text mode installs?
- IncRnd 9y ago
  Perhaps you ran mode to set the columns and rows?
- vog 9y ago
  Yes, some of the tools did, but the ones mentioned here didn't (QBasic, Norton Commander/Utilities, Turbo Pascal/Vision). Norton Utilities did play some interesting games with modifying the VGA character set in real time, implementing a mouse cursor over the text mode. But it was still 80x25. However, some if the programs adapted to 80x50 if you enabled that mode before (or while?) starting them.
- jacquesm 9y ago
  Some cards (Tseng, and others too) allowed 132 column text modes, some even 160.
kristopolous 9y ago
scaling doesn't work because our screens are different form factors these days. You'd get really fat characters (I've tried it). 2. it's a bug ... I'll fix it 3. sure. it's the microsoft style to be more specific. the manufacturers had their own 'branding' in this sense. I had to pick one of them due to time being a finite resource.

jscipione 9y ago

This seems like a way to modernize a curses-based application without the users of the application noticing much of a difference.

AngeloAnolin 9y ago

I can see a use case for this -> For software users who are so used to the DOS / Terminal interfaces in some old COBOL, Foxpro, dBase, Clipper, Turbo Pascal and other programming languages back then. You can switch between the shiny newer interface to using the old DOS gui-based look. Nice work!

krylon 9y ago

Wow, this beautiful! Maybe it's just the nostalgia talking, but I really like this look.

slipstream- 9y ago

Previous discussions: https://news.ycombinator.com/item?id=7983008 https://news.ycombinator.com/item?id=7983008 https://news.ycombinator.com/item?id=7959068 https://news.ycombinator.com/item?id=7959068

creeble 9y ago

Hey! An Amdek color monitor! I worked for Amdek in 1983. We sold a LOT of those color monitors.

kristopolous 9y ago
The fake ad is just a photoshopped version of a real ad. I may have scanned it myself. I don't remember.

rabidrat 9y ago

I thought I was being original when I redid my website[0] in a similar style this past summer (right down to the text appearing to come in at 9600 baud). But it appears this repo is at least 2 years old.. [0] http://saul.pw http://saul.pw

harleypig 9y ago
Gah ... I automatically started looking for doors when I went to your site! :D

kristopolous 9y ago

Hi, author here. I missed this. Sorry I'm in late. Questions, critiques, and everything else accepted. Thanks