kristopolous/bootstra.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

Bootstrap/386 is a Twitter bootstrap v2/3/4/5(in progress) theme to make webpages look like they are from the gentler, less distracting time of the 1980s.

See A Demo By Clicking Here

Download for your favorite bootstrap version with all the necessary JS and CSS to get started right away:

• BOOTSTRA/386 ][ (2013) demo 144KB
• BOOTSTRA/386 iii (2015) 423KB
• BOOTSTRA/386 4 (2020) - demo remaining issues - current build
• ブートストラップ/386 5.0 (2023) - In progress

bootstrap.mp4

     ____  ____  ____  _____________________  ___    ____        __   _____ ____  _____
    / __ )/ __ \/ __ \/_  __/ ___/_  __/ __ \/   |  / __ \     _/_/  |__  /( __ )/ ___/
   / __  / / / / / / / / /  \__ \ / / / /_/ / /| | / /_/ /   _/_/     /_ </ __  / __ \ 
  / /_/ / /_/ / /_/ / / /  ___/ // / / _, _/ ___ |/ ____/  _/_/     ___/ / /_/ / /_/ / 
 /_____/\____/\____/ /_/  /____//_/ /_/ |_/_/  |_/_/      /_/      /____/\____/\____/  

      The Definitive All-in-one Graphical Tool-Kit for Micros and Terminals.  
 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

  There's a lot of micros and a lot of        this future has arrived.
  graphics modes. Today there's CGA,          
  Hercules, MDA, and EGA. And that's only     Use primitives like buttons, "toolbars"
  on the IBM-PC.                              and various "widgets" that will control
                                              your application. We handle rendering
  What about Tandy, CDC, Honeywell,           these abstractions on screen for you.
  DEC, and Zenith? That's a different          
  problem. How about the portables on         Think of your software in terms of
  tomorrows' horizon? Plan to ignore the      Windows, Icons, Menus, and Pull-Downs.
  Compaq-1? Your customers won't.             Even a WIMP can do it (TM).
                                              
  Such incompatibilities shouldn't be         That's the new paradigm of full-screen
  your concern. You focus on making           interactive applications. Give your
  great microcomputer applications. We        customers the rich interface that are
  focus on making your application work       easy to use and also, easy to create.
  on tomorrow's computer.                     Give yourself that one-leg up on your
                                              competition. GUI is Good. GUI is God.
  It's called a "Graphical User Interface"    
  They've been in development for years       Just look at how beautiful
  at places like XEROX Parc in Palo Alto      your application can look with
  and Carnegie Mellon. And now, finally       BOOTSTRAP/386:

Configuration

Javascript settings are set via a global _386 object.

Animation

The loading animation can be configured through the following values:

• fastLoad [bool] (default: false) - disable all animation.
• onePass [bool] (default: false) - when set, this will disable the second flyby cursor
• speedFactor [float] (default: 1.0) - This controls how fast the animation happens. Higher values mean faster animation.

Example:

_386 = { onePass: true, speedFactor: 1.25 };

Note: For the progressive animation to work you may need to set this stanza in your regular CSS: body { visibility: hidden }.

Accomodating users without javascript

During a 2018 April fools' prank, a user pointed out that this theme doesn't work without javascript. This is a valid concern, however it cannot be addressed without a user manually doing something since this is just a bootstrap theme.

Luckily, HTML5 permits noscript in the head section which means that style can be put in the noscript section. This means that putting this in the header would permit people without JS on to see the site:

<noscript>
  <style>
    body { 
       visibility: visible; 
    }
  </style>
</noscript>

Bugs and Stuff

Check out the contribution doc - it's easy, I swear.

Building yourself

These folders, and all versions, are proper forks of tagged releases of bootstrap. Because they represent very specific snapshots in time, there's no configuration json, buildbot updates or anything like that. If you want to patch updates to the dependencies and confirm the build of the old versions then please open a PR ... I ignore the automated ones that github sends me because it's not that kind of project.

For building, I have included README.md in each of the directories. Unlike the lazy chumps over at bootstrap industries, I actually support 4 versions, simultaneously. Now I do so very poorly, and with a proposterous time lag, but I supposedly do.

Contact

• Mailing list

Also you can give me money, as little as $1/month ... Click on that heart sponsor thing at the top ... I'm a sponsorer as well!

See the wiki for more documentation.

Attributions

The font for v4/5 is by VileR, used under Creative Commons Share-Alike, which can be found at int10h.org.

bootstra.386's Issues

Bootstrap modal

The modal window in the example should not appear until triggered.

It should be possible to close the modal in the example with the x or close buttons.

Clicking a button makes it loose its shadow, therefore shrink and cause a flash o the interface.

Breakout from #41

Use `grid` CSS media feature

CSS media type has support for tty, we should add it to render the page correctly on terminals :-P

Bootstrap theme switcher?

So I used a slightly modified version of https://github.com/jguadagno/bootstrapThemeSwitcher

Would it be possible to get BOOTSTRA.386 working with this? I suspect it would require me to jump through a few hoops since most of my themes don't require swapping out the JS only the CSS file.

List styles don't have any indicator. Suggestion: draw a block that looks similar to a bigger pixel.

Breakout from #41

project name in packaging files needs to be changed

package.json and composer.json have the same (outdated) name values as Bootstrap itself. Please update these files to set the name to something else.

Progress bars still seem to be using a gradient color. Not sure but it looked that way.

This is a breakout from #41

Selected/hovered items in the mobile navbar are black on black

Screenshot

Configurable load effect

It would be great if the load in animation was slightly quicker and that the second load in effect was absent.

The brand part of the navbars are not having a background image.

Breakout from #41

Header broken on "components" page

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

Missing examples on getting-started.html

The examples page contains some examples that are not BOOTSTRA.386.

Live page: http://kristopolous.github.io/BOOTSTRA.386/getting-started.html#examples
Source: https://github.com/kristopolous/BOOTSTRA.386/blob/gh-pages/getting-started.html#L239

Images folder: https://github.com/kristopolous/BOOTSTRA.386/tree/gh-pages/assets/img/examples

---

http://kristopolous.github.io/BOOTSTRA.386/examples/fluid.html

---

http://kristopolous.github.io/BOOTSTRA.386/examples/justified-nav.html

---

http://kristopolous.github.io/BOOTSTRA.386/examples/marketing-narrow.html

---

http://kristopolous.github.io/BOOTSTRA.386/examples/sticky-footer.html

Override scrolling behavior to constrain location to character grid.

Observations while playing with edit.exe in dosbox:

• Pageup/down scrolls by one page instantly.
• Blinking underline cursor shows and controls active position in document area. (not menu, but does show up on active button.)
• Moved by mouse with a click or arrow keys. (if on a menu, it disapears.)
• If at the edge, arrowkeys scroll by one character. if at the bottom, downarrow key it scrolls by one line,
• If a navigation key is held down, it moves by one page/character, then after a brief pause, (400 ms?) it repeats with a very short pause.

Now the blinking underline may be too much for now. (edit: and it may be better to have a LYNX style navigation for keyboard, so you move from link to link? but more complicated?)

At least, scrolling can be constrained to the character grid, but may have trouble in some browsers.

This project demonstrates disabling and controlling scrolling some:
http://naeka.github.io/jquery-scrollbar/
window.scrollTo(500,0);
http://help.dottoro.com/ljcjcwuo.php

Edit: changed title from: "Scroll behaviour: Not constrained to character grid, Not properly keyboard/swipe responsive." to "Override scrolling behavior to constrain location to character grid."

button not working on grey area above text

I think this has something to do with the drop shadow but on chrome, firefox, and ie buttons only work at or below where the text appears, not on the gray area of button above. it seems to have something to do with the shadow because clicking on the shadow does activate a click.

awesome project. thanks, kristopolous.

What about the cursor?

@kristopolous Can a cursor be added so that whenever the mouse moves the cursor is the old solid grey block? I think it can be achieved with canvas. What's your thinking?

The add-on buttons arent fitting correctly

Breakout from #41

[question] Movable dialogs?

Hey,

are there any plans to implement an movable dialog? It would be great if you will support this!

Regards,
Jan

Create a sample page on Github Pages

Put sample html files on gh-pages branch and github automatically hosts and provides the url http://kristopolous.github.io/BOOTSTRA.386/ or similar.

See:
https://help.github.com/articles/user-organization-and-project-pages#project-pages

[feature request] add rectangle jumping cursor

some demo-code for demonstration of idea:

w = 10;
h = 20;
b = document.getElementsByTagName('body')[0];
b.style.cursor = 'none'

d = document.createElement('div');
d.id = 'nicecursor';
b.appendChild(d);
a = document.getElementById('nicecursor');
a.style.position = 'absolute';
a.style.top = '10px';
a.style.left = '10px';
a.style.width = w+'px';
a.style.height = h+'px';
a.style.backgroundColor = 'white';
a.style.pointerEvents = 'none';

b.onmousemove = function(e){
    a.style.left = e.pageX - e.pageX % w   +'px';
    a.style.top = e.pageY - e.pageY % h +'px';

}

In the search example, button and text field are not aligned. That will become problematic for my use case...

Breakout from #41

This is way too awesome I can't handle it

Carousel overflows body

tested on: Safari 9.1 and Chrome 53

A overflow-x: hidden; could probably fix it.

Modal closes aren't styled

Breakout from #41

hero unit is really hideous

the green background has to go --- it's terrible.

Collapsable Navbar needs a better button

Here is what I ended up settling on, but I don't know if this is in keeping with the spirit of DOS UI so I wanted to see if anyone had any better ideas before I try and submit a patch:

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
    <span class="sr-only">Toggle navigation</span>
    ≡
  </button>
  <a class="navbar-brand" href="#">Project Name</a>
</div>

Also I added this CSS to eliminate the border:

.navbar-inverse .navbar-toggle {
  border: 0 none;
}

provide a bootstrap 3 version - please :D

Register package on Bower

Please do! <3

nav panel not stretching across, and drop shadow is out of place

http://gyazo.com/86944f7ce5940e674afdedf5cbf97a6d

Make .well have a border and look like a tiny window, after all, that seems to be what they technically are. At least, a little box with a shadow.

Breakout from #41

Some of the buttons are glitched. Like the button with loading state looses its shadow and shrinks down, then back up when it changes back again.

Breakout from #41

There is no placeholder in google-chrome

There is no placeholder in google-chrome, or it has the same color with navbar.

[bs2] fluid design needs to be better handled

Specifically it's this demo page, which comes up pretty terribly: http://kristopolous.github.io/BOOTSTRA.386/examples/fluid.html

404 Error on "Download compiled" link

The following link gives 404 error
https://kristopolous.github.io/BOOTSTRA.386/assets/bootstrap.zip

Display errors in Firefox for Android

There is a problem on fx latest (how i see the demo page):

Original bootstrap is OK

There are no distinct colours for Alert, Success, ...

Breakout from #41

Ideas...

This is one very awesome bootstrap theme. In fact, I am very sure where to use it; as a stats page for my server. Since it provides a terminal to ssh into the server, that is pretty much a well-fitting theme.

Normally I work with Bootstrap 3. I am not sure how much the code has advanced in comparsion to the demo, but:

• Progress bars still seem to be using a gradient color. Not sure but it looked that way.
• Some of the buttons are glitched. Like the button with loading state looses its shadow and shrinks down, then back up when it changes back again.
• The button sizes seem a bit odd. The small an dmini button are almost similar.
• There are no distinct colours for Alert, Success, ...
• The brand part of the navbars are not having a background image.
• Primary navbar should be gray with black text, whilst inverse navbar should be black with white text.
• Modals arent styled at all, currently.
• Clicking a button makes it loose its shadow, therefore shrink and cause a flash o the interface.
• List styles don't have any indicator. Suggestion: draw a block that looks similar to a bigger pixel.
• In the search example, button and text field are not aligned. That will become problematic for my use case...
• The add-on buttons arent fitting correctly
• The dropdown buttons at the tabs example seem broken but I am not sure if they really are.
• Make .well have a border and look like a tiny window, after all, that seems to be what they technically are. At least, a little box with a shadow.

If I knew proper LESS and how to work the bootstrap theme, i would immedialy sit down and work these errors out. This theme is too cool to be true! :)

Kind regards, Ingwie

Important Label and Badge is white text on white background

Seen on https://kristopolous.github.io/BOOTSTRA.386/components.html#labels-badges.

[bs2] mobile menu bar doesn't generate right

on the demo page. the mobile menu is screwed up.

Cannot build

Cloning the repo and running make does not work. I figured out that running npm update before make does the trick

Primary navbar should be gray with black text, whilst inverse navbar should be black with white text.

Breakout from #41

Sass version

A sass version would be sooooo amazing !

Please publish to bower

I need this to be on bower.

load effect

I'm so dumb that I cannot understand, how works your "loading effect" and what files provides it, and how can I add it to my page... :( Please, help! Is there some docs for this or something useful?

Diagonal separations and color gradients in progress bars

Examples here.

Edit:
Forgot to specify: the problem is that the progress bars don't look that much 80's with gradients and diagonal separation.

Create a Compiled zipfile instead of linking back to the repo

Using the single css links are great and all, but you won't get the js effects. A package that has the compiled js in it should be made in the deploy process.

The button sizes seem a bit odd. The small an dmini button are almost similar.

Breakout from #41

Images not ASCII/ANSI. Switch video mode for fullscreen CGA/VGA rendering of images?

Possible libraries, or a combination/remake is needed:

• Renders images to ascii in browser: http://www.nihilogic.dk/labs/jsascii/
• Renders canvas/bitmaps to ansi console: https://github.com/TooTallNate/ansi-canvas
• Renders ansi to a canvas: http://andyherbert.github.io/ansilove.js/
• Something I have not found yet.

So for BOOTSRTA.386, perhaps:

• Get the rendered size of the image, constrained to character grid.
• resize image to that character grid size.
• render to ANSI.
• Optional: clicking/keyboard selecting the image emulates switching video mode to a fullscreen high-res EGA/VGA mode. Any key or click returns to text mode view.
• ANSI/EGA/VGA conversion may be too slow for some devices/browsers, so perhaps have/suggest a serverside conversion of images?

cdnjs

Would be nice to have the CSS files hosted on cdnjs (and jsDelivr)

buttons not 'clickable'

Button text and foreground should be repositioned to the shadow position when clicked (CSS :focus) to simulate old fashioned click effect.

I'd also suggest using CSS3 transitions to make a smoother animation effect.

Dropdown/up vertical alignment is off

Breakout from #41