Friso's Component API

Archived because I switched from this hobby prototype to TailwindCSS and Vue

Installing Friso's Component API

Run composer install

Upload the code to a PHP server and that's it.

Configuration

On line 2 of index.php you can change the origin domains that can access the API. The default is any domain.

header("Access-Control-Allow-Origin: *");

You may want to limit access on a private API if the URL is exposed through a front-end implementation.

Alternatively you can extend it with API keys or some other access control system.

Using the Component API

Compiled stylesheets and javascript live in the static folder. Add your own styling or variables to the build by changing these.

For a full breakdown of the design, visit Architecture

In short:

• Add new components to the corresponding component folder: particles, atoms or molecules.
• Organisms and templates live in specific projects, but you can extend the API if so desired.
• Add only components that will be reused and need to be maintained.
• Components are Mustache templates, javascript or CSS.
• Added CSS components must be added to the folder's build SASS file.
• Added Mustache components must be added to the allowed API calls in index.php
  (static $components)
• Javascript components need to be added to the relevant libraries in the static folder.

Front-end implementation

Load the compiled stylesheet and javascript of your choice from the static folder of your API.

Create your first component:

<div id="hello-world"></div>
<script>
    parseComponentHTML("#hello-world", {
        "name": "alert",
        "vars": {
            "type": "info",
            "message": "Hello world!"
        }
    })
</script>

Read the docs.

Style guide documentation

You are free to implement a documentation website however you wish.

If you want to get started with the current website as a template, you can find it on Github.

This documentation is built with Sculpin as a static site generator. Run composer install if you want to use Sculpin. The files are in source.

Alternatively you can find the generated static site in output_prod.