Bones_UI #

Bones_UI - A simple and easy Web User Interface framework for Dart.

CLI #

You can use the command-line interface (CLI) bones_ui to create or serve a project:

To activate it globally:

  $> dart pub global activate bones_ui

Now you can use the CLI directly:

  $> bones_ui --help

To show the Bones_UI template information:

  $> bones_ui info

To create a Bones_UI project from the default template:

  $> bones_ui create -o /path/to/workspace -p project_name_dir=simple_project -p "project_name=Simple Project"

Usage #

A simple usage example:

import 'dart:html';

import 'package:bones_ui/bones_ui_kit.dart';

void main() async {
  // Create `bones_ui` root and initialize it:
  var root = MyRoot(querySelector('#output'));
  root.initialize();
}

// `Bones_UI` root.
class MyRoot extends UIRoot {
  MyRoot(Element rootContainer) : super(rootContainer);

  MyMenu _menu;
  MyHome _home;

  @override
  void configure() {
    _menu = MyMenu(content);
    _home = MyHome(content);
  }

  // Returns the menu component.
  @override
  UIComponent renderMenu() => _menu;

  // Returns the content component.
  @override
  UIComponent renderContent() => _home;
}

// Top menu.
class MyMenu extends UIComponent {
  MyMenu(Element parent) : super(parent);

  // Renders a fixed top menu with a title.
  @override
  dynamic render() {
    return $div(
        style: 'position: fixed; top: 0; left: 0; width: 100%; background-color: black; color: white; padding: 10px',
        content: '<span style="font-size: 120%; font-weight: bold">Bones_UI</span>'
        );
  }
}

// The `home` component.
class MyHome extends UIComponent {
  MyHome(Element parent) : super(parent);

  @override
  dynamic render() {
    return markdownToDiv(('''
    <br>
    
    # Home
    
    Welcome!
    
    This is a VERY simple example!
    '''));
  }
}

Example from Sources #

Get the source

  $> git clone https://github.com/Colossus-Services/bones_ui.git

...and see the Web Example (just follow the README file for instructions).

Bones_UI App Example #

Also see the App example @ GitHub:

Bootstrap Integration #

You can use the Dart package Bones_UI_Bootstrap to activate Bootstrap integration with Bones_UI.

Bones_UI_Bootstrap automatically handles loading of JavaScript libraries and CSS. With it you don't need to add any HTML or JavaScript code to have full integration of Bootstrap with Bones_UI.

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Colossus.Services #

This is an open-source project from Colossus.Services: the gateway for smooth solutions.

Author #

Graciliano M. Passos: gmpassos@GitHub.

License #

Artistic License - Version 2.0