Nondigestible Purple Mayonnaise

    prtfl

    1.0.0 • Public • Published

    # PRTFL.js - Awesome Project Presentation

    PRTFL.js creates a simple, clickable item grid with a clickable details overlay out of a json description.

    PRTFL is built to easily integrate into any web project - no endless dependencies, just plain javascript and css.

    Have a look a the demonstration.

    Interactive Demonstration

    PRTFL Screenshot - Gallery

    How To

    Just add the .js and the .css-file to your resources. Then, choose a root element (give the id "PRTFL"). Ready.

    A small example:

    <html>
      <head>
        <link rel="stylesheet" href="PRTFL.min.css">
      </head>
      <body>
        <div id="PRTFL"></div>
        <script type="text/javascript" src="PRTFL.min.js"></script>
      </body>
    </html>

    Now you can add items to the grid, have a look at the .json file in /demo.

    {
      "items": 
      [
        {
          "preview": 
          {
            "title": "Project A",
            "description": "a fancy project description",
             "thumbnail": "thumbnail_1.png"
          },
          "details": 
          {
            "title": "Project A",
            "content": 
            [
              {
                "type": "PICTURE",
                "value": ["a_picture.jpg"]
              },
              {
                 "type": "TEXT",
                 "value": "a single picture and a paragraph"
              }
            ]
          },
          "tags": ["A","B"],
          "date": "ISODATE"
        }
      ]
    }

    A few notes on content types

    • PICTURE: for simplicity all used images are expected to be in ./img (you can change this in the cfg object)
    • YOUTUBE: use just the embed code as value, not the whole embed url
    • HTML: You can use complex html structures with this type
    • TEXT: Faster than html

    Install

    npm i prtfl

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    30.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • henrikdetjen