kristopolous / bootstra.386 Goto Github PK

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

Please do! <3

Screenshot

Breakout from #41

Breakout from #41

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

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';

}

Breakout from #41

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?

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

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.

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

Original bootstrap is OK

http://gyazo.com/86944f7ce5940e674afdedf5cbf97a6d

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.

Breakout from #41

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

Breakout from #41

Breakout from #41

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.

Breakout from #41

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;
}

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

Breakout from #41

Hey,

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

Regards,
Jan

Breakout from #41

I need this to be on bower.

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.

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.

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

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

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

Breakout from #41

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.

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

A sass version would be sooooo amazing !

This is a breakout from #41

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

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

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

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.

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

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

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

Breakout from #41

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

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?

tested on: Safari 9.1 and Chrome 53

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

Breakout from #41