EGF logo SBOL Visual CSS Documentation

SBOL Visual CSS

Pure CSS visuals for the SynBio Open Language.

SBOL Visual CSS is a lightweight library for displaying synthetic biology constructs directly in HTML. It was initially developped at the Edinburgh Genome Foundry, and it is now maintained by the synthetic biology community (please request new features on GitHub).

Start with the guide Download standalone CSS

Quick example

This is the smallest useful construct to get a promoter, CDS and terminator on screen.

Markup

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

Rendered output

p1
lac
terminator