Os Gui

screenshot of Os Gui

Os Gui

Retro OS GUI JS/CSS library

Overview:

This library is designed to imitate the graphical user interface of Windows 98 on the web. It powers a web-based version of Windows 98, complete with applications like Paint, Notepad, and Sound Recorder. The library offers features such as menu bars, draggable windows, dialog and tool window variants, titlebar animations, button styles, scrollbar styles, procedurally rendered arrows, and themeability with Windows .theme and .themepack files.

Features:

  • Menu bars with support for checkbox items, disabled states, and submenus
  • Draggable app windows with options to maximize, minimize, close, and resize
  • Dialog and tool window variants
  • Flying titlebar animation for maximize/minimize/restore actions
  • Focus containment, allowing Tab or Shift+Tab navigation within a window
  • Various button styles including lightweight buttons, disabled buttons, and default action buttons
  • Scrollbar styles, currently webkit-specific, with potential support for custom scrollbar libraries in the future
  • Procedurally rendered arrows for different scrollbar sizes
  • Themeability using Windows .theme and .themepack files

Installation:

  1. Download the repository as a ZIP file or clone it.
  2. Include the necessary scripts (MenuBar.js or $Window.js) and stylesheets for layout, theme, and color scheme.
  3. Ensure that you use the compiled CSS files, not the source files.
  4. Refer to the provided API documentation for more information.

Summary:

This library enables developers to create web-based interfaces that resemble the Windows 98 operating system. It offers a range of features including draggable windows, menu bars, button styles, and themeability. The library requires jQuery for the windowing implementation but aims to become dependency-free in the future. Developers can download the repository or install the library as an npm package to get started.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

ui-kit
UI Kits & Components

A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.