Cardboard

Cardboard is a team 'scrum' board that can be used with any back end. It is divided into a Client and Server projects.

License

This project in licensed under BSD

Cardboard.Client

Server agnostic jQuery plug-in to build a visual board of cards.

Requirements

• jQuery
• knockout
• underscore
• bootstrap

Getting Started

• Install via NuGet to pull in all dependencies and a sample page.

  Install-Package Cardboard.Client
  

• Open 'CardboardSample.html' in browser to load a sample board.

Create your own board

• Add a script reference to cardboard.js and links to cardboard.css.

  <link href="Content/Css/cardboard.css" rel="stylesheet" />
  <script src="Scripts/cardboard.js"></script>
  

• Create cardboard on a jquery element and provide the cards metadata.

  $("#board").cardboard({
      boards: [{
          id: "FirstBoard",
          columns: [
          {
              name: "",
              width: "10%"
          },
          {
              name: "Todo",
              width: "40%"
          },
          {
              name: "In Progress",
              width: "10%"
          },
          {
              name: "Done",
              width: "40%"
          }]
      }],
      getCardsAsync: function() {
          var cards = [{
              id: "CardId",
              title: "CardTitle",
              owner: "Federico",
              priority: 1,
              status: "In Progress"
          }];
  
          return $.Deferred().resolve(cards).promise();
      }
  });
  

Card and Board Options

Refer to the Cardboard.d.ts type definition for all available options.

Cardboard.Server

Helper classes to create an ASP.NET server to load cards into the board.

Requirements

• ASP.NET WebAPI
• Ninject

Use

• Install via NuGet on an existing ASP.NET WebApplication

  Install-Package Cardboard.Server
  

• Implement the ICardService interface

  #!c#
  public class TestCardService: ICardService
  {
      public IEnumerable<Card> GetCards(string boardId)
      {
          return new Card[] 
          {
              new Card()
              {
                  Id = "1",
                  Owner = "Federico",
                  Priority = 1,
                  Title = "Task 1",
                  Status = "In Progress"
              }
          };
      }
  }
  

• Register the CardService with Ninject in Global.asax

  #!c#
  NinjectConfig.Register(GlobalConfiguration.Configuration, kernel =>
  {
      kernel.Bind<ICardService>().To<TestCardService>();
  });
  

• Create cardboard on a jquery element and provide the cards metadata.

  $("#board").cardboard({
      boards: [{
          id: "FirstBoard",
          columns: [
          {
              name: "",
              width: "10%"
          },
          {
              name: "Todo",
              width: "45%"
          },
          {
              name: "Done",
              width: "45%"
          }
      }]
  });