### Development Commands Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Commands for setting up the development environment, including installation, starting a live reload server, and building for production. ```bash npm install npm start # Development with live reload npm run build # Production build ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of how to use tabs. ```html
  • Desktop
  • Programs
  • Documents
    •

    Content for selected tab appears here

    ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Example of how to use select elements within a field-row. ```html
    ``` -------------------------------- ### Basic Window Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md An example of a basic window component styled with 98.css. ```html
    My First VB4 Program

    Hello, world!

    ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md An example demonstrating the usage of field-row for grouping radio buttons. ```html
    Operating System
    ``` -------------------------------- ### Developing Source: https://github.com/jdan/98.css/blob/main/README.md First, run `npm install`. ```bash npm install ``` -------------------------------- ### Textarea Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Example of using textareas for additional notes and biography. ```html
    ``` -------------------------------- ### Development Environment Source: https://github.com/jdan/98.css/blob/main/README.md You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process. ```bash npm start ``` -------------------------------- ### Installation / Usage Source: https://github.com/jdan/98.css/blob/main/README.md The easiest way to use 98.css is to import it from unpkg. ```html 98.css example
    My First VB4 Program

    Hello, world!

    ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of an interactive table within a file manager window. ```html
    File Manager
    Name Size Modified
    document.txt 4.5 KB 2024-01-15
    image.jpg 256 KB 2024-01-14
    archive.zip 1.2 MB 2024-01-10
    ``` -------------------------------- ### Checkbox Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md A complete example demonstrating multiple checkboxes within a fieldset. ```html
    Select your preferences
    ``` -------------------------------- ### Usage Examples Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Multiple examples showcasing different configurations of range sliders, including volume control, vertical sliders with box indicators, and sliders within fieldsets for audio settings. ```html
    Audio Settings
    ``` -------------------------------- ### Window Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md An example of a window with a title bar and body, including control buttons and interactive elements. ```html
    My First VB4 Program

    Hello, world!

    ``` -------------------------------- ### Complete Window Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md A comprehensive example of a window including title bar with controls, a content body with form elements, and a status bar. ```html
    Document Editor
    Document

    Ready

    Col 1

    ``` -------------------------------- ### Text Input Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Example of using text, password, and email input fields with labels. ```html
    ``` -------------------------------- ### CSS Custom Properties Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example of how to customize CSS variables for colors, spacing, and borders. ```css :root { --surface: #e0e0e0; --button-face: #f0f0f0; --element-spacing: 10px; } ``` -------------------------------- ### Font Replacement Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of overriding the font family for specific elements. ```css button, input, label { font-family: "Segoe UI", sans-serif; } ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/containers.md A basic example of a sunken panel containing a table. ```html
    Column 1 Column 2
    Data 1 Data 2
    ``` -------------------------------- ### Multiple Progress Indicators Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Example demonstrating multiple progress indicators within a window structure. ```html
    Download Manager

    File 1: document.zip

    File 2: image.iso

    File 3: software.exe

    ``` -------------------------------- ### Window Structure Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md The required HTML structure for creating a window component. ```html
    Title
    ``` -------------------------------- ### npm install Source: https://github.com/jdan/98.css/blob/main/README.md Alternatively, you can grab 98.css for the releases page or npm. ```bash npm install 98.css ``` -------------------------------- ### Plain JavaScript Integration Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of how to integrate 98.css into a plain HTML/JavaScript project. ```html
    JavaScript App
    ``` -------------------------------- ### Tree View Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md A complete HTML example demonstrating a tree view with nested expandable sections. ```html ``` -------------------------------- ### Button Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/buttons.md Example of using buttons in a field row, often for dialog actions. ```html
    ``` -------------------------------- ### Interactive Table Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/buttons.md Example of buttons within a dialog box structure. ```html
    Dialog Box

    Do you want to continue?

    ``` -------------------------------- ### Solid Progress Bar Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Example of a solid progress bar within a fieldset. ```html
    Downloading File

    65% complete

    ``` -------------------------------- ### Tab Switching (Minimal Example) Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md Handles tab selection and display logic for tabbed interfaces. ```javascript document.querySelectorAll('[role="tab"]').forEach(tab => { tab.addEventListener('click', (e) => { e.preventDefault(); // Remove selection from all tabs document.querySelectorAll('[role="tab"]').forEach(t => { t.removeAttribute('aria-selected'); }); // Select clicked tab tab.setAttribute('aria-selected', 'true'); // Show corresponding content // (Implementation depends on structure) }); }); ``` -------------------------------- ### Override CSS Variables Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of overriding default CSS variables to customize colors, spacing, and borders. ```css :root { /* Override colors */ --surface: #e0e0e0; --button-face: #f0f0f0; --button-highlight: #ffffff; --button-shadow: #808080; --text-color: #000000; /* Override spacing */ --element-spacing: 12px; --grouped-element-spacing: 8px; } ``` -------------------------------- ### Links Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Examples of using hyperlinks in paragraphs and within a tree view structure. ```html

    For more information, click here.

  • Home
  • About
  • Contact
    • ``` -------------------------------- ### React Integration Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of how to integrate 98.css into a React application. ```jsx import '98.css'; export function App() { return (
    React App
    ); } ``` -------------------------------- ### Minimize Repaints Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md Illustrates a less performant way of toggling classes versus a better JavaScript state management approach. ```javascript // Avoid: Adding/removing classes frequently element.classList.toggle('active'); // Better: Use JavaScript state management state.isActive = !state.isActive; updateUI(state); ``` -------------------------------- ### Selector Overrides Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of using new selectors with higher specificity to override default styles. ```css .my-button { background: blue; color: white; } ``` -------------------------------- ### Fieldset Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/containers.md An example demonstrating the usage of a fieldset with a legend to group radio button options. ```html
    Display Settings
    ``` -------------------------------- ### Vue Integration Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of how to integrate 98.css into a Vue application. ```vue ``` -------------------------------- ### Underline Element Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Example of using the underline element in a paragraph. ```html

    Please read carefully before proceeding.

    ``` -------------------------------- ### Vertical Bar Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/buttons.md Example of using vertical bars to separate buttons in a menu-like structure. ```html
    ``` -------------------------------- ### Preformatted Text Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Example of using a preformatted text block within a fieldset. ```html
    Example Code 
    <button>Click me</button>
    ``` -------------------------------- ### JavaScript Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Row selection implementation for interactive tables. ```javascript document.querySelectorAll('table.interactive').forEach(table => { table.addEventListener('click', (event) => { const highlightedClass = 'highlighted'; const isRow = el => el.tagName === 'TR' && el.parentElement.tagName === 'TBODY'; const newlySelectedRow = event.composedPath().find(isRow); if (!newlySelectedRow) return; const previouslySelectedRow = Array.from(newlySelectedRow.parentElement.children) .find(el => isRow(el) && el.classList.contains(highlightedClass)); if (previouslySelectedRow) { previouslySelectedRow.classList.remove(highlightedClass); } newlySelectedRow.classList.add(highlightedClass); }); }); ``` -------------------------------- ### interactive Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of using the 'interactive' class for tables. ```html
    ``` -------------------------------- ### Extending Components CSS Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of extending an existing component with new variants. ```css /* Extend existing component */ .window.large { width: 600px; } .window.small { width: 200px; } ``` -------------------------------- ### Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of a table with header row and row selection. ```html
    Column 1 Column 2
    Data 1 Data 2
    ``` -------------------------------- ### Increase Spacing Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Customization example to increase element spacing for larger layouts. ```css :root { --element-spacing: 12px; --grouped-element-spacing: 8px; } ``` -------------------------------- ### Custom Component CSS Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of adding a custom component using 98.css variables and patterns. ```css .my-component { background: var(--surface); padding: var(--element-spacing); border: var(--border-raised-outer), var(--border-raised-inner); } ``` -------------------------------- ### Segmented Progress Bar Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Example of a segmented progress bar within a fieldset. ```html
    Installation Progress

    45% complete

    ``` -------------------------------- ### Tab Component Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Illustrates the composition of a tab component using base elements, container classes, state attributes, and ARIA roles. ```html
  • Label
    • Content
    ``` -------------------------------- ### JavaScript Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Tabs require JavaScript to manage the active state. ```javascript // Handle tab clicks document.querySelectorAll('[role="tab"]').forEach(tab => { tab.addEventListener('click', (e) => { // Remove aria-selected from all tabs document.querySelectorAll('[role="tab"]').forEach(t => { t.removeAttribute('aria-selected'); }); // Add aria-selected to clicked tab tab.setAttribute('aria-selected', 'true'); // Update content visibility e.preventDefault(); }); }); ``` -------------------------------- ### Theme Creation CSS Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of overriding all CSS variables to create a complete custom theme. ```css :root { /* Complete custom color palette */ --surface: /* ... */ --button-face: /* ... */ /* ... */ } ``` -------------------------------- ### Change Main Surface Color Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Customization example to change the main surface color. ```css :root { --surface: #d0d0d0; /* Lighter gray */ } ``` -------------------------------- ### CSS Variables Customization Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of overriding CSS variables for color and spacing. ```css :root { --surface: #e0e0e0; --element-spacing: 10px; } ``` -------------------------------- ### Complete Window Structure Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example of the required HTML structure for a 98.css window or dialog. ```html
    Title
    ``` -------------------------------- ### Checked Checkbox Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md HTML structure for a pre-selected checkbox. ```html
    ``` -------------------------------- ### Header Cells Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of table header cells. ```html Header ``` -------------------------------- ### Use Different Title Bar Colors Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Customization example to use different colors for title bars. ```css :root { --dialog-blue: #003366; --dialog-blue-light: #1a7ba8; } ``` -------------------------------- ### Correct Form Control Labeling Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of semantically correct HTML for form controls with labels. ```html ``` -------------------------------- ### Body Cells Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md Example of table body cells. ```html Data ``` -------------------------------- ### Darken Button Shadows Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Customization example to darken button shadows for higher contrast. ```css :root { --button-shadow: #606060; /* Darker shadow */ } ``` -------------------------------- ### Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/containers.md Demonstrates the usage of field-border, field-border-disabled, and status-field-border classes in a flex column layout. ```html

    This is an active work area

    This work area is disabled

    This area shows dynamic content

    ``` -------------------------------- ### Customization Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/types.md Override variables in your stylesheet to create custom color schemes. All components will automatically adopt the new color and spacing values. ```css :root { /* Change button colors */ --button-face: #e0e0e0; --button-highlight: #f0f0f0; --button-shadow: #707070; /* Change primary accent color */ --dialog-blue: #1a1a5c; --dialog-blue-light: #2d7ab8; /* Adjust spacing */ --element-spacing: 10px; --grouped-element-spacing: 8px; } ``` -------------------------------- ### Publishing Source: https://github.com/jdan/98.css/blob/main/README.md Building the docs site: `npm run deploy:docs` ```bash npm run deploy:docs ``` -------------------------------- ### Checked Radio Button Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md HTML structure for a pre-selected radio button. ```html
    ``` -------------------------------- ### Vertical Orientation Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Demonstrates how to make a range slider display vertically by wrapping it in a container with the 'is-vertical' class. ```html
    ``` -------------------------------- ### Scrollbar Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/utilities.md Demonstrates how scrollbars automatically style elements with overflow. ```html

    Content that may overflow and show scrollbars...

    ``` -------------------------------- ### SVG for Visual Elements - Background Image Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of using CSS to load SVG icons as background images for elements. ```css background-image: svg-load("./icon/close.svg"); ``` -------------------------------- ### Status Bar Sub-element Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md Example of an individual status bar field. ```html

    Status message

    ``` -------------------------------- ### Radio Button Grouping Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example showing how radio buttons should share a 'name' attribute to form a group. ```html ``` -------------------------------- ### SVG for Visual Elements - Border Image Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of using CSS to load SVG icons as border images for elements. ```css border-image: svg-load("./icon/groupbox-border.svg") 2; ``` -------------------------------- ### Override Font Family Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Example of overriding the default font-family to use system fonts. ```css button, label, input, legend, textarea, select, option, table, ul.tree-view, .window, .title-bar, li[role=tab] { font-family: "Segoe UI", Tahoma, sans-serif; -webkit-font-smoothing: auto; } ``` -------------------------------- ### Inactive window (background) Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md An example of an inactive window, visually distinct from active windows. ```html
    Background Window

    This window is inactive

    ``` -------------------------------- ### CSS Variable System Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Example of CSS custom properties defined in the :root scope for themable properties, enabling easy theming and consistency. ```css :root { /* 50+ CSS variables */ --text-color: #222222; --surface: #c0c0c0; /* ... */ } ``` -------------------------------- ### Inactive Title Bar Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md Example of an inactive (unfocused) title bar. ```html
    Inactive Window
    ``` -------------------------------- ### Centered Dialog Pattern Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example of a common pattern for centering a dialog window using inline styles. ```html
    ``` -------------------------------- ### Manual Build Source: https://github.com/jdan/98.css/blob/main/README.md You can run a build manually with `npm run build`. This will write to the `dist/` directory. ```bash npm run build ``` -------------------------------- ### Publishing Source: https://github.com/jdan/98.css/blob/main/README.md Publishing to npm: `npm run release` ```bash npm run release ``` -------------------------------- ### Load Custom Styles After 98.css Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Demonstrates the correct order for loading stylesheets to ensure custom overrides are applied. ```html ``` -------------------------------- ### Field Row Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/containers.md Example demonstrating the use of field rows to create horizontally aligned labels and input fields. ```html
    ``` -------------------------------- ### Mobile Display Issues Solution Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS media query to make the `.window` element responsive on smaller screens. ```css @media (max-width: 600px) { .window { width: 100% !important; margin: 0 !important; } } ``` -------------------------------- ### Field Row Stacked Usage Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/containers.md Example demonstrating the use of stacked field rows to create vertically aligned labels and input fields within a fieldset. ```html
    Mailing Address
    ``` -------------------------------- ### Import the Library Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md How to import the 98.css library into your project. ```html ``` -------------------------------- ### Disabled Checkbox Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md HTML structure for a disabled checkbox. ```html
    ``` -------------------------------- ### Import in JavaScript Source: https://github.com/jdan/98.css/blob/main/_autodocs/configuration.md Import the 98.css stylesheet into your JavaScript project. ```javascript import '98.css'; ``` -------------------------------- ### Disabled Radio Button Example Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/form-inputs.md HTML structure for a disabled radio button. ```html
    ``` -------------------------------- ### Window Styling Details Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md CSS properties defining the appearance of the window container. ```css /* Background: var(--surface) (#c0c0c0) */ /* Border style: Window border (raised outer and inner) */ /* Padding: 3px */ /* Border radius: 0 (square corners) */ /* The window border uses dual box-shadow for a 3D effect: */ /* - Outer: inset -1px -1px var(--window-frame), inset 1px 1px var(--button-face) */ /* - Inner: inset -2px -2px var(--button-shadow), inset 2px 2px var(--button-highlight) */ ``` -------------------------------- ### High Contrast Customization Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS variables for implementing a high contrast theme. ```css :root { --surface: #ffffff; --button-face: #f0f0f0; --button-shadow: #000000; --window-frame: #000000; --text-color: #000000; } ``` -------------------------------- ### State Classes (Simulated in Markup) Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS classes to simulate states for demonstration purposes. ```css .active Button pressed state .focused Button keyboard focused state ``` -------------------------------- ### Keyboard Navigation HTML Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Semantic HTML structure for keyboard navigation and label association. ```html ``` -------------------------------- ### Tabs Multirows Modifier Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/lists-and-tables.md HTML example for enabling multi-row tab lists. ```html ``` -------------------------------- ### Window and Container Classes Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS classes for window and container elements. ```css .window Main window container .title-bar Window title bar .title-bar.inactive Inactive/background title bar .title-bar-text Title bar text .title-bar-controls Title bar control buttons container .window-body Window content area .status-bar Status bar container .status-bar-field Individual status bar field ``` -------------------------------- ### Window Body Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md The basic HTML structure for a window body. ```html
    ``` -------------------------------- ### Basic window with close button Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md A simple window structure with a title bar, close button, and a content body. ```html
    Simple Window

    Content here

    ``` -------------------------------- ### Window Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md Basic HTML structure for a window container. ```html
    Window Title
    ``` -------------------------------- ### Field Row with Multiple Inputs Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md An example of a field row containing multiple input fields and their labels. ```html
    ``` -------------------------------- ### Fieldset for Grouping Controls Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example of using a 'fieldset' and 'legend' to semantically group related form controls. ```html
    Settings
    ``` -------------------------------- ### Inline Styling Recommendations Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md Common inline CSS styles used with 98.css for layout and appearance. ```css style="width: 300px" /* Set window width */ style="height: 200px" /* Set panel height */ style="margin: 12px" /* Spacing around elements */ style="margin-top: 12px" /* Top spacing between sections */ style="margin-bottom: 12px" /* Bottom spacing */ style="padding: 8px" /* Content padding */ style="justify-content: flex-end" /* Right-align buttons */ style="gap: 8px" /* Spacing between flex children */ style="display: flex" /* Flexbox layout */ style="flex-direction: column" /* Vertical stacking */ ``` -------------------------------- ### Range Slider with Box Indicator Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Example of a range slider using the 'has-box-indicator' class for a box-style thumb. ```html ``` -------------------------------- ### Project Structure Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md The directory structure of the 98.css project, outlining the location of source files, build scripts, documentation, and distribution assets. ```bash 98.css/ ├── style.css # Main CSS source file ├── build.js # Build script ├── server.js # Development server ├── package.json # Package configuration ├── dist/ # Built output │ ├── 98.css # Unminified distribution │ └── 98.css.min.js # Minified distribution ├── docs/ # Documentation │ ├── index.html.ejs # Documentation template │ ├── docs.css # Documentation styles │ └── vs.css # Syntax highlighting ├── fonts/ # Custom font files │ └── converted/ # WOFF and WOFF2 formats ├── icon/ # SVG icon assets └── README.md # Project readme ``` -------------------------------- ### Specificity Management Source: https://github.com/jdan/98.css/blob/main/_autodocs/architecture.md Demonstrates the use of low-specificity selectors (element, class, attribute) to allow easy overrides by users. IDs are intentionally avoided. ```css /* Element selectors (lowest specificity) */ button { /* ... */ } /* Class selectors (low specificity) */ .window { /* ... */ } .field-row { /* ... */ } /* Attribute selectors (low specificity) */ input[type="text"] { /* ... */ } /* No IDs used (ensures user can override) */ ``` -------------------------------- ### Simple Dialog Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md An HTML structure for a basic modal dialog window with a title bar, body content, and action buttons. ```html
    Message

    Are you sure?

    ``` -------------------------------- ### Disabled Maximize Button Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md Example of a disabled maximize button within a title bar. ```html ``` -------------------------------- ### Vertical Range Slider with Box Indicator Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Example of a vertical range slider that also uses the 'has-box-indicator' class. ```html
    ``` -------------------------------- ### Form Control Label Association Source: https://github.com/jdan/98.css/blob/main/_autodocs/README.md Example demonstrating the requirement for form controls to have associated labels using the 'for' attribute. ```html ``` -------------------------------- ### Dark Theme Customization Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS variables for implementing a dark theme. ```css :root { --surface: #333333; --button-face: #404040; --button-highlight: #555555; --button-shadow: #1a1a1a; --text-color: #ffffff; --link-blue: #6699ff; } ``` -------------------------------- ### Select (Dropdown) Markup Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/text-inputs.md Basic HTML markup for a select dropdown list. ```html ``` -------------------------------- ### Form Layout Classes Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS classes for form layout. ```css .field-row Horizontal form control container .field-row-stacked Vertical form control container ``` -------------------------------- ### Container Styling Classes Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS classes for container styling. ```css .sunken-panel Scrollable panel with field border .field-border White background with field border .field-border-disabled Gray background with field border .status-field-border Gray background with status border ``` -------------------------------- ### File Dialog Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md An HTML structure for a file dialog window, including a tree view for navigation, a filename input, and action buttons. ```html
    Open File
    • C:
      • Windows
        • System
      • Users
        • Documents
    ``` -------------------------------- ### Input Not Showing Border Solution Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md Correct HTML for an input element to ensure it displays with a border. ```html
    Not an input
    ``` -------------------------------- ### Title Bar Styling Details Source: https://github.com/jdan/98.css/blob/main/_autodocs/api-reference/windows.md CSS properties defining the appearance of the title bar. ```css /* Background: Linear gradient (90deg, #000080 to #1084d0) */ /* Padding: 3px 2px 3px 3px */ /* Display: flex */ /* Justify-content: space-between */ /* Align-items: center */ ``` -------------------------------- ### List and Tree Classes Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md CSS classes for lists and trees. ```css .tree-view Root tree view list .interactive Interactive mode for tables (shows pointer cursor) .highlighted Selected/highlighted row in table .multirows Multi-row tab list ``` -------------------------------- ### Basic Form Source: https://github.com/jdan/98.css/blob/main/_autodocs/complete-reference.md A standard HTML form structure with fieldset, legend, input fields, and submit/reset buttons. ```html
    Form Title
    ```