SBOL Visual CSS

SBOL Visual CSS (see full documentation online or in docs/index.html) is a pure-CSS library to easily display schematic DNA sequences in the Visual SBOL standard using a simple HTML syntax:

<div class="sbol-visual centered">
    <div class="sbolv promoter">p1</div>
    <div class="sbolv cds">lac</div>
    <div class="sbolv terminator">terminator</div>
</div>

While very light, SBOL Visual CSS is has features such as inline SBOL and combinatorial assemblies, and is versatile enough to serve as a generic SBOL visualizer for databases, web articles, etc. It is distributed as a self-contained CSS file generated in dist/sbol-visual-standalone.css and is therefore fit for embedding into HTML emails.

Build

The project now uses two Python entry points depending on what you want to generate.

Library bundle

python source/build_css.py

This command will:

• compile all SVG icons from source/SVG/ into dist/icons.json
• generate the standalone stylesheet bundle in dist/sbol-visual-standalone.css

Documentation site

python source/build_docs.py

This command will:

• run the library build from source/build_docs.py
• copy the stylesheet bundle into docs/dist/
• sync the example files into docs/examples/
• render the Jinja2 templates from docs/templates/ into docs/*.html

If Jinja2 is not installed yet, install it with:

pip install jinja2

Versioning

SBOL Visual CSS uses the semantic versioning scheme.

Version = 0.2.0

This library implements the SBOL Visual 3.0 Standard.

License = MIT

SBOL-visual CSS was originally written at the Edinburgh Genome Foundry by Zulko. The code is released on Github under the MIT License (Copyright 2016 Edinburgh Genome Foundry, University of Edinburgh). Everyone is welcome to contribute!